CSS入門 — Flexbox & Gridレイアウト
セレクタ・ボックスモデル・FlexboxからGridレイアウト・レスポンシブデザイン・アニメーションまで、Webのスタイリングを体系的に学ぶ入門書です。随時コンテンツを拡充していきます。
目次（全12章）
- 1CSSとは何か — Webスタイリングの基本を理解する
HTMLに見た目を与えるCSSの役割と基本的な書き方、ブラウザがどうスタイルを適用するかを整理します。
- 2CSSセレクタの種類と使い分け — 要素を正確に指定する
タグ・クラス・ID・属性・擬似クラスなど、CSSセレクタの種類と適切な使い方を整理します。
- 3ボックスモデル — margin・padding・borderの仕組み
すべてのHTML要素が持つボックスモデルを理解し、余白・枠線・サイズの制御を正確に行う方法を学びます。
- 4Flexboxで横並びレイアウトを作る
display: flex を起点に、主軸・交差軸の概念からよく使うプロパティまでFlexboxレイアウトの全体像を整理します。
- 5CSS Gridでページレイアウトを設計する
2次元レイアウトを可能にするCSS Gridの基本概念、テンプレートの定義方法、よく使うパターンを解説します。
- 6レスポンシブデザインとメディアクエリ
画面サイズや端末に応じてスタイルを切り替えるメディアクエリの書き方と、モバイルファーストの設計方針を解説します。
- 7テキスト・フォント・改行制御 — 読みやすさを設計する
font-family・font-size・line-heightに加え、white-space・word-break・overflow-wrapなどテキストの改行・折り返し制御まで網羅的に解説します。
- 8色と背景の指定方法 — CSSカラーシステムを理解する
hex・rgb・hsl・oklchなど色の指定形式と、背景色・グラデーション・backgroundプロパティの使い方を解説します。
- 9トランジションとアニメーション — 動きをCSSで作る
transition・animationプロパティの使い方と、パフォーマンスを意識したCSSアニメーションの作り方を解説します。
- 10CSS変数（カスタムプロパティ）でテーマを管理する
var()とカスタムプロパティを使ってデザイントークンを定義し、テーマカラーや余白の一元管理と、ダークモード対応の方法を解説します。
- 11詳細度とカスケード — スタイルが当たらない理由を理解する
CSSのスタイル適用優先順位を決める詳細度（Specificity）とカスケードの仕組みを解説します。
- 12実務で使うCSSパターン集
ナビゲーション・カード・モーダル・フォームなど、実務でよく登場するUIコンポーネントのCSSパターンをまとめます。