CSS（見た目のスタイリング）

ルールの基本形

CSS の最小単位は ルール。「セレクタ」で対象を絞り、{ } の中に「プロパティ: 値;」の宣言を並べます。

/* セレクタ { プロパティ: 値; } */
p {
  color: #333;       /* 文字色 */
  font-size: 16px;   /* 文字サイズ */
  line-height: 1.6;  /* 行間 */
}

HTML に適用する方法は3通り。優先度や保守性が違います。

セレクタ（どれを選ぶか）

代表的なセレクタを、よく使う順に。

• タイプ: p, h1（要素名そのもの）
• クラス: .btn（class="btn" を持つ要素／最頻出）
• ID: #header（id="header"。ページ内で一意）
• 属性: [type="text"], a[href^="https"]
• 擬似クラス: :hover（マウスが乗った状態）, :first-child, :focus
• 結合子: .card p（子孫）, .card > p（直接の子）, h2 + p（隣接）

.btn:hover { background: #2563eb; }   /* ホバー時だけ */
nav a[aria-current="page"] { font-weight: bold; }

ボックスモデル（大きさの正体）

すべての要素は 4層の箱 で描かれます。内側から content → padding → border → margin。

• content: 中身（文字や画像）そのもの
• padding: 内側の余白（背景色が及ぶ）
• border: 枠線
• margin: 外側の余白（要素どうしの間隔。背景は透過）

/* 全要素を border-box に。width 計算が直感的になる */
*, *::before, *::after { box-sizing: border-box; }

カスケードと詳細度（衝突の決着）

同じ要素に複数のルールが当たったとき、どれが勝つか。CSS の名前の由来でもある核心です。優先順位は上から強い順に。

1. !important 付き（多用は禁物）
2. 詳細度（specificity）が高い ルール
3. 詳細度が同じなら、後に書かれた ルール（記述順）

詳細度は「インライン > ID > クラス/属性/擬似クラス > 要素」で数えます。

単位（px / rem / em / %）

サイズ指定の単位は、絶対値か相対値か で性質が分かれます。

レイアウト：Flexbox と Grid

現代のレイアウトはこの2つが主役。1次元なら Flexbox、2次元なら Grid が目安です。

/* Flexbox: 横並びで中央に揃える */
.toolbar {
  display: flex;
  justify-content: space-between; /* 主軸（横）の配置 */
  align-items: center;            /* 交差軸（縦）の配置 */
  gap: 12px;                      /* 要素間の隙間 */
}

/* Grid: 3列の格子。1fr は余りを等分する単位 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

レスポンシブの触り

画面幅に応じて見た目を変えるには メディアクエリ を使います。スマホ向けを基本に、広い画面で上書きする「モバイルファースト」が定石です。

/* 既定（スマホ）: 1列 */
.cards { grid-template-columns: 1fr; }

/* 画面が 768px 以上になったら 3列に */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

つまずきポイントまとめ

• width が思った大きさにならない → box-sizing: border-box を確認
• 余白が二重／不足 → 縦 margin の相殺を疑う
• スタイルが効かない → デベロッパーツールで詳細度と打ち消し線（取り消されたルール）を確認
• 中央寄せできない → ブロック中央は margin: 0 auto、子要素の整列は Flexbox/Grid で

最後はブラウザの デベロッパーツール（要素を右クリック →「検証」）が最強の味方。適用中のルールと、どれが勝っているかが一目で分かります。仕様の一次情報は MDN が信頼できます。