骨組み(HTML)に対する内装・配色・家具の置き方。ボックスモデルは家具の「本体＋余白＋枠」の寸法、Flex/Gridは部屋への家具の並べ方。
📍 Web/フロントエンド基盤 ▸ Web基礎 ▸ CSS ｜ 種別: hands-on ｜ facts_as_of 2026-06（CSS）
MDN CSS ; 2026-06確認
Flexbox（2次元はGrid）。
box-sizing: border-box;
CSS は見た目を指定する。セレクタで要素を選び、プロパティで装飾する。ボックスモデルとレイアウト（Flex/Grid）が要。
/* セレクタ { プロパティ: 値; } */
.card { padding: 16px; border: 1px solid #ccc; box-sizing: border-box; }
.row { display: flex; justify-content: center; align-items: center; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
box-sizing: border-box で崩れにくく。出典: MDN: CSS
| よくある誤解 | 正しい理解 |
|---|---|
| width だけで幅が決まる | padding/border が加算される（box-sizing: border-box で内包） |
| 中央寄せは margin で頑張る | Flex（justify/align）等のレイアウトを使う |
| 後に書いたスタイルが必ず勝つ | カスケード／詳細度で決まる |
.card 等）。セレクタ・ボックスモデル・Flex/Grid を区別し、「幅が崩れる／中央寄せできない／スタイルが効かない」をなぜかで切り分けて直せる。
| 症状 | 原因 | 復旧 |
|---|---|---|
| 中央寄せできない | レイアウト未指定 | display:flex; justify-content/align-items:center |
| 幅が意図と違う | padding/border 加算 | box-sizing: border-box |
| スタイルが効かない | 詳細度/上書き | セレクタの詳細度を確認 |