機能比較表（チェックマーク付き）
プランごとの機能の有無を、チェックマークとハイフンで一覧化した比較表です。マークは絵文字ではなく stroke ベースのインライン svg で描いており、文字色を継ぐ currentColor 指定なので環境に依存せず鮮明に表示されます。
解説
プランごとの機能の有無を、チェックマークとハイフンで一覧化した比較表です。マークは絵文字ではなく stroke ベースのインライン svg で描いており、文字色を継ぐ currentColor 指定なので環境に依存せず鮮明に表示されます。「あり」のセルは .cmp-y で緑（#34c759）、「なし」のセルは薄いグレーにして差を明確化。border-collapse:collapse と角丸＋overflow:hidden でカード風にまとめ、行ホバーで背景がうっすら変わります。CSS のみ。
使う場面
- 無料・有料プランの機能差を見せたい料金ページ
- 製品スペックの横並び対比
- 競合や旧版との違いを示す比較セクション
機能行は tbody の tr を増減して調整し、各セルにチェックの svg を入れるか空（ハイフン）にするかで有無を表します。あり色は .cmp-y の色を変えればブランドに合わせられます。横長になりやすいので、スマホでは表を横スクロール可能にするか列を絞る設計にすると崩れません。チェックマークの svg には aria-hidden が付くので、読み上げ用に「対応／非対応」のテキストを補うと親切です。
よくある質問
チェックマークが絵文字でないのはなぜですか?
絵文字は OS やフォントで見た目が変わり崩れやすいためです。このスニペットは線で描いた SVG を使っており、どの環境でも同じ鮮明なチェックが表示され、色も文字色に合わせて変えられます。
機能の行は自由に増やせますか?
増やせます。tbody の tr をコピーして機能名を書き換え、各プラン列にチェックの SVG を入れるか空欄にすれば、その行の有無が表現できます。