料金プラン比較表

表示・フィードバックBaseline 広く利用可能

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

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

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

仕組みの解説

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

実装のポイント

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

AIに依頼するときの文例

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

使っているプロパティ

overflow text-align white-space border table-layout