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

## モバイルファースト

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

```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）でも、レイアウトが崩れないことを確認します。

:::note
カスタムプロパティはメディアクエリの条件に使えません（`@media (width >= var(--bp-md))` は無効です）。ブレークポイントの値は、Sass の変数や Tailwind CSS の `--breakpoint-*` テーマ変数など、ビルド時に展開される仕組みで管理してください。
:::

## メディアクエリの書き方

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

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

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

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

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

## コンテナクエリ

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

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

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

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

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

## ネストの深さ

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

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

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

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

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