「CSS」の記事

背景カラーでも写真でも斜めのデザインってお洒落でカッコいい。でもそのデザインどおりにすぐコーディングできるかってなると最初はとまどっちゃいます。この記事ではCSSで背景を斜めに区切る方法を３つ紹介します。さあ一緒にコードを書いてみましょう。

CSSで画像を上下左右中央配置にする場合、どんな方法があるのでしょう？コーディング速度を上げるためにも書き方には気を配りたいものです。本記事ではその方法を３つ紹介します。あなたに合ったコードを見つけましょう！

カード型レイアウトの作り方は必ず知っておかなければならないところ。その方法はいくつかありますが、本記事では「nth-child」を使う方法と「gap」を使う方法を紹介します。ぜひ両方使えるようになっておきましょう。

横並びにした画像とテキストを上下中央配置になるようなレイアウトは少なくありません。そんなときその実装方法を知っているのと知らないのとではコーディングスピードに大きな差がでます。Flexboxで簡単に実装できるのでぜひ覚えておきましょう。

グローバルナビゲーションを２段表示にするにはどうすればいいのでしょう？やり方はいくつかありますが本記事ではFlexboxを使って表示します。さあ一緒に作っていきましょう。

ドロワーメニュー実装はjQueryを使うもので自作かプラグインかの２択でしょと思っているそこのあなた、HTMLとCSSのみで作る方法を知りたくはありませんか？それって難しくない？と不安にならなくても大丈夫です。仕組みさえ理解できればこちらの方がよっぽど簡単です。ではその実装方法を見ていきましょう。

display: flex;はつねに使っているという人の中でdisplay: grid;を使ったことがある人はどれくらいいるのでしょうか。display: flex;があれば十分と思っている人も多いはず。そんな食わず嫌いな人でも一度はdisplay: grid;を使ってみましょう。新たな発見がきっとあるはずです。

Flexboxは本当に便利です。display: flexさえかえとけば横並びにはできるし、高さも揃えてくれます。でもそれはあくまで子要素までのことです。孫要素になると高さは揃いません。どうすれば孫要素の高さが揃うのか？その方法を一緒に見ていきましょう。

font-familyにはなぜ複数のフォントを書くの？記載する順番にはどういった意味があるの？「sans-serif」って何？これらの質問の答えがあやふやならば今回の記事は読む価値ありです。CSSのフォントの指定を理解しましょう。