# 料金プラン比較表のCSS実装

> 機能×プランの比較テーブル。scope属性で行列の対応を正しく伝え、おすすめ列の縦ハイライトと✓/×の色分けで見やすくします。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/plan-comparison-table/

## HTML

```html
<div class="plans-wrap" tabindex="0" role="region" aria-label="料金プランの比較表">
  <table class="plans">
    <thead>
      <tr>
        <th scope="col">機能</th>
        <th scope="col">フリー</th>
        <th scope="col" class="featured">プロ<span class="reco">おすすめ</span></th>
        <th scope="col">チーム</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">プロジェクト数</th>
        <td>3</td>
        <td class="featured">無制限</td>
        <td>無制限</td>
      </tr>
      <tr>
        <th scope="row">共同編集</th>
        <td><span class="no" aria-label="非対応">×</span></td>
        <td class="featured"><span class="yes" aria-label="対応">✓</span></td>
        <td><span class="yes" aria-label="対応">✓</span></td>
      </tr>
      <tr>
        <th scope="row">優先サポート</th>
        <td><span class="no" aria-label="非対応">×</span></td>
        <td class="featured"><span class="no" aria-label="非対応">×</span></td>
        <td><span class="yes" aria-label="対応">✓</span></td>
      </tr>
      <tr>
        <th scope="row">月額（税込）</th>
        <td>¥0</td>
        <td class="featured">¥980</td>
        <td>¥2,980</td>
      </tr>
    </tbody>
  </table>
</div>
```

## CSS

```css
.plans-wrap {
  overflow-x: auto; /* 狭い画面では表ごと横スクロール */
}

.plans {
  min-width: 420px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.plans th,
.plans td {
  padding: 10px 16px;
  border: 1px solid #e2d8c2;
  text-align: center;
  white-space: nowrap;
}

.plans thead th {
  background: #f3ecd9;
  font-size: 13px;
}

.plans tbody th {
  text-align: left;
  font-weight: 600;
  color: #5c5445;
  background: #faf6ea;
}

/* おすすめ列の縦ハイライト */
.plans .featured {
  background: #fdf3f2;
  border-left-color: #b0413e;
  border-right-color: #b0413e;
}

.plans thead .featured {
  border-top-color: #b0413e;
  color: #b0413e;
}

.reco {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #b0413e;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 4px;
}

.yes { color: #4a7c59; font-weight: 700; }
.no  { color: #b5a583; }
```

## 仕組みの解説

比較表の生命線はヘッダーの対応付けです。列見出しに scope="col"、行見出しに scope="row" を付けると、支援技術がセル読み上げ時に「プロ・共同編集・対応」のように文脈を補ってくれます。おすすめ列は featured クラスを列の全セルに付けて背景と左右の枠線色で縦に貫き、✓/×は色だけでなくaria-labelでも対応状況を伝えます。

## 実装のポイント

プラン数が多い場合はカード型（料金テーブルのレシピ）との出し分けを検討してください。表は機能軸での比較、カードはプラン軸での訴求に向きます。

## AIに依頼するときの文例

機能×プランの料金比較表を作ってください。th要素にscope="col"/"row"を正しく設定し、おすすめ列を縦にハイライト、✓/×は色とaria-labelの両方で伝え、狭い画面ではラッパーで横スクロールさせてください。

## 使っているプロパティ

- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [text-align](https://www.css-dictionary.com/property/text-align.md)
- [white-space](https://www.css-dictionary.com/property/white-space.md)
- [border](https://www.css-dictionary.com/property/border.md)
- [table-layout](https://www.css-dictionary.com/property/table-layout.md)