EC・商品
商品比較テーブル
3商品を仕様ごとに ○/× で比較し、おすすめ列をハイライト。狭い画面では横スワイプでき、行ホバーで横一列が強調される。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
実装メモ
3商品×仕様行の比較表で、おすすめ列を藍でハイライトし列上にバッジを載せています。1列目（仕様名）は position:sticky で固定し、狭い画面では横スクロール（スワイプ）で残りの列を見せる構成です。プレビュー枠のような小さい高さでも縦スクロールを避けられます。○/× は色で可否がひと目で伝わります。
コード（コピーして使えます）
<div class="ctl-scroll">
<table class="ctl">
<thead>
<tr>
<th class="ctl-rowhead"></th>
<th>ベーシック</th>
<th class="ctl-reco"><span class="ctl-badge">おすすめ</span>プロ</th>
<th>ライト</th>
</tr>
</thead>
<tbody>
<tr><th class="ctl-rowhead">価格</th><td>¥6,980</td><td class="ctl-reco">¥9,980</td><td>¥3,980</td></tr>
<tr><th class="ctl-rowhead">重量</th><td>320g</td><td class="ctl-reco">248g</td><td>410g</td></tr>
<tr><th class="ctl-rowhead">防水</th><td class="ctl-yes">○</td><td class="ctl-reco ctl-yes">○</td><td class="ctl-no">×</td></tr>
<tr><th class="ctl-rowhead">急速充電</th><td class="ctl-no">×</td><td class="ctl-reco ctl-yes">○</td><td class="ctl-no">×</td></tr>
<tr><th class="ctl-rowhead">保証</th><td>1年</td><td class="ctl-reco">2年</td><td>1年</td></tr>
</tbody>
</table>
</div>