フィーチャー チェックリスト
各項目の頭に丸いチェックマークが付く、機能一覧向けのリストです。 ul の標準マーカーを消し、 li::before に円形の緑バッジとチェックの SVG を入れています。アイコンは外部フォントに頼らずインラインの線画 SVG で描いているため、この部品単体でそのまま動くのが利点です。
解説
各項目の頭に丸いチェックマークが付く、機能一覧向けのリストです。ul の標準マーカーを消し、li::before に円形の緑バッジとチェックの SVG を入れています。アイコンは外部フォントに頼らずインラインの線画 SVG で描いているため、この部品単体でそのまま動くのが利点です。各行は padding-left でアイコン分の余白を確保し、テキストが折り返してもきれいに揃います。
よく使う場面
- 料金プランに含まれる機能の比較表
- サービス紹介ページの「できること」一覧
- 申し込み前の特典まとめ
バッジの色は background、大きさは幅と高さ、文字色は本文側で調整します。否定や注意を示したい行だけ色を変えたり別アイコンに差し替えると、含む・含まないの対比が伝わりやすくなります。アイコンは装飾なので、内容はテキスト側で必ず読み取れるようにしておくとスクリーンリーダー利用者にも親切です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
チェックの色を変えられますか。
li::before の background でバッジの色を、stroke でチェック線の色を指定できます。ブランドカラーに合わせて調整してください。
含まれない機能を打ち消し線で表現できますか。
対象の行だけクラスを分け、バッジを別色やバツ印の SVG に差し替え、テキストに打ち消し線を当てると、含む・含まないが一目で伝わります。