レスポンシブ

ブレークポイントの管理、メディアクエリの範囲構文、コンテナクエリ、ネストの深さのルール

モバイルファースト

スタイルはスマートフォン向けを基本に書き、画面が広くなるにつれてメディアクエリで上書きします。Tailwind CSS のブレークポイントも同じ考え方です。

.card-list {
  display: grid;
  gap: 16px;

  @media (width >= 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

ブレークポイント

• ブレークポイントはプロジェクト開始時に決め、数を必要最小限に絞ります。
• 決めた値は、プロジェクトの README などに一覧で残してください。
• デザインカンプにない中間の幅（例：768px〜1024px）でも、レイアウトが崩れないことを確認します。

メディアクエリの書き方

min-width / max-width ではなく、範囲構文（width >= など）で書きます。境界の値がどちらに含まれるかが読み取りやすくなります。

/* ✅ 良い例 */
@media (width >= 768px) {
}

@media (768px <= width < 1024px) {
}

/* ❌ 悪い例 */
@media (min-width: 768px) {
}

@media (min-width: 768px) and (max-width: 1023.98px) {
}

コンテナクエリ

カードやサイドバー内のウィジェットなど、置かれる場所によって幅が変わるコンポーネントは、画面幅ではなく親要素の幅で切り替えます。親要素に container-type を指定し、@container で条件を書きます。

.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 8px;

  @container (width >= 480px) {
    grid-template-columns: 160px 1fr;
  }
}

ページ全体のレイアウト（ヘッダーの切り替えやカラム数など）は、従来どおりメディアクエリで切り替えます。

ネストの深さ

CSS のネスト（& による入れ子）は 3 階層までとします。深いネストは詳細度が上がり、どのセレクタが適用されるかを追いにくくなります。

/* ✅ 良い例 */
.card {
  &:hover {
  }

  @media (width >= 768px) {
    &:hover {
    }
  }
}

/* ❌ 悪い例：BEM のエレメントをネストで組み立てる */
.card {
  .card__body {
    .card__title {
      .card__link {
      }
    }
  }
}

BEM のエレメントはネストせず、.card__title のようにそれぞれトップレベルに書いてください（クラス命名規則）。