アイコン付きメリットリスト（チェック）HTML・CSS

アイコン付きメリットリスト（チェック）HTML・CSS: 用途

商品やサービスのメリットを、チェック、丸囲みチェック、矢印、星、ハート、稲妻のアイコン付きリストに変えます。背景の丸の有無、1列か2列、ブランドカラーを選べます。各項目に | で区切ってタイトルと説明を付けられます。

アイコンはCSSで表示され、小さなSVGをマスクにして変数 --cor-icone で塗ります。HTMLはGoogleやスクリーンリーダーが理解できる普通のリストのままで、全項目のアイコンの変更は1行で済みます。

使い方

1. 項目を1行に1つ書きます。
2. アイコン、列数、色を選びます。
3. コードをサイトにコピーします。

使うタイミング

• トップページのメリットのセクション。
• プランに含まれる内容のリスト。
• サービスのセールスページ。

よくある質問

なぜアイコンをCSSで表示するのですか？

HTMLがすっきりして、liの普通のリストのままになるからです。アイコンは装飾なので、スクリーンリーダーは項目のテキストだけを読み上げ、CSSを1行変えるだけで全項目のアイコンを変更できます。

画像なしでどうやってアイコンを表示しますか？

各項目の ::before に小さなSVGをマスク（mask-image）として使い、選んだ色で塗ります。現在のすべてのブラウザで動作し、色は変数 --cor-icone で変更できます。

メリットリストはどこで使いますか？

トップページのメリットのセクション、サービスの説明、プランの料金の横、セールスページなどです。各項目は特徴ではなく、お客様にとっての成果から書き始めましょう。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール