「できること」や「持ち物リスト」を、ただの箇条書きで並べると、意外と読み飛ばされてしまいます。

この記事では、コピペするだけで使えるアイコン付きリスト・チェックリストを20個まとめました。
チェックマーク、番号、星、色付きの背景など、内容や目的に合わせて選べる種類を用意しています。

カード・バッジなどの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します
。続いて、HTMLのコードを、リストを表示したい場所に貼り付けます。
多くはulタグ（順序のないリスト）で作っていますが、手順のように順番が大切なものはolタグを使っています。

アイコン部分は、CSSの::beforeという記法で表示しているものが多いので、文字を書き換えるだけでは変わりません。
該当するCSSの中の記号を書き換えてください。

01. シンプルチェックマークリスト

緑のチェックマークを添えた、もっとも基本のリストです。

実際の見た目

• 予約フォームの設置
• 自動返信メールの設定
• スプレッドシートとの連携

HTMLコード

<ul class="kts-list01"> <li>予約フォームの設置</li> <li>自動返信メールの設定</li> <li>スプレッドシートとの連携</li> </ul>

CSSコード

.kts-list01 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list01 li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; color: #333; } .kts-list01 li::before { content: "✓"; position: absolute; left: 0; color: #2E9E5B; font-weight: 700; }

02. 背景色付きチェックリスト

1項目ずつ薄い背景で囲んで、読みやすくしたリストです。

実際の見た目

• 名刺の準備
• 会場の下見
• 配布資料の印刷

HTMLコード

<ul class="kts-list02"> <li>名刺の準備</li> <li>会場の下見</li> <li>配布資料の印刷</li> </ul>

CSSコード

.kts-list02 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list02 li { padding: 10px 14px; margin-bottom: 6px; background: #F9FAFB; border-radius: 6px; font-size: 14px; color: #333; display: flex; align-items: center; gap: 8px; } .kts-list02 li::before { content: "✓"; color: #2E6F5E; font-weight: 700; }

03. 番号付き丸アイコンリスト

丸の中に番号を入れた、手順や順番を示すリストです。

実際の見た目

1. お申し込みフォームに入力
2. 確認メールが届く
3. 当日ご来店

HTMLコード

<ol class="kts-list03"> <li>お申し込みフォームに入力</li> <li>確認メールが届く</li> <li>当日ご来店</li> </ol>

CSSコード

.kts-list03 { list-style: none; padding: 0; margin: 0; counter-reset: kts03; font-family: sans-serif; } .kts-list03 li { counter-increment: kts03; padding: 6px 0 6px 34px; position: relative; font-size: 14px; color: #333; } .kts-list03 li::before { content: counter(kts03); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; line-height: 22px; text-align: center; background: #3F8CFF; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; }

04. できることリスト（太字強調）

特徴やできることを、太字とチェックで強調するリストです。

実際の見た目

• 24時間いつでも予約受付
• 自動でリマインドメールを送信
• 無料で始められる

HTMLコード

<ul class="kts-list04"> <li><strong>24時間</strong>いつでも予約受付</li> <li><strong>自動</strong>でリマインドメールを送信</li> <li><strong>無料</strong>で始められる</li> </ul>

CSSコード

.kts-list04 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list04 li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; color: #1F2933; } .kts-list04 li strong { color: #D97757; } .kts-list04 li::before { content: "✓"; position: absolute; left: 0; color: #D97757; font-weight: 700; }

05. 持ち物リスト（チェックボックス風）

四角いチェックボックスの見た目で、持ち物を並べるリストです。

実際の見た目

• 身分証明書
• 印鑑
• 筆記用具

HTMLコード

<ul class="kts-list05"> <li>身分証明書</li> <li>印鑑</li> <li>筆記用具</li> </ul>

CSSコード

.kts-list05 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list05 li { padding: 6px 0 6px 28px; position: relative; font-size: 14px; color: #333; } .kts-list05 li::before { content: ""; position: absolute; left: 0; top: 9px; width: 15px; height: 15px; border: 2px solid #8A94A0; border-radius: 3px; }

06. 対応・非対応の二列リスト

できることとできないことを、○と×で並べて見せるリストです。

実際の見た目

HTMLコード

<div class="kts-list06"> <ul class="ok"> <li>クレジットカード払い</li> <li>コンビニ払い</li> </ul> <ul class="ng"> <li>銀行振込</li> <li>後払い</li> </ul> </div>

CSSコード

.kts-list06 { display: flex; gap: 24px; font-family: sans-serif; } .kts-list06 ul { list-style: none; padding: 0; margin: 0; } .kts-list06 li { padding: 6px 0 6px 24px; position: relative; font-size: 14px; color: #333; } .kts-list06 .ok li::before { content: "○"; position: absolute; left: 0; color: #2E9E5B; font-weight: 700; } .kts-list06 .ng li::before { content: "×"; position: absolute; left: 0; color: #C0392B; font-weight: 700; }

07. ホバーで色が変わるリスト

カーソルを合わせた項目だけ、色が変わるインタラクティブなリストです。

実際の見た目

• 料金プランを見る
• 導入事例を見る
• よくある質問を見る

HTMLコード

<ul class="kts-list07"> <li>料金プランを見る</li> <li>導入事例を見る</li> <li>よくある質問を見る</li> </ul>

CSSコード

.kts-list07 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list07 li { padding: 10px 14px; font-size: 14px; color: #333; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .kts-list07 li:hover { background: #EFF6F3; color: #2E6F5E; }

08. カード型ステップリスト

番号と説明を、カードのように区切って見せるリストです。

実際の見た目

1. 1会員登録をする
2. 2プランを選ぶ
3. 3利用を開始する

HTMLコード

<ol class="kts-list08"> <li><span class="num">1</span><span class="txt">会員登録をする</span></li> <li><span class="num">2</span><span class="txt">プランを選ぶ</span></li> <li><span class="num">3</span><span class="txt">利用を開始する</span></li> </ol>

CSSコード

.kts-list08 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: sans-serif; } .kts-list08 li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #E4E4E4; border-radius: 8px; } .kts-list08 .num { width: 26px; height: 26px; line-height: 26px; text-align: center; flex-shrink: 0; background: #1F2933; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; } .kts-list08 .txt { font-size: 14px; color: #1F2933; }

09. 絵文字アイコン付き特徴リスト

項目ごとに違う絵文字を添えた、親しみやすいリストです。

実際の見た目

• ⚡スピード対応
• 🔒安心のセキュリティ
• 💬いつでもチャット相談

HTMLコード

<ul class="kts-list09"> <li><span aria-hidden="true">⚡</span>スピード対応</li> <li><span aria-hidden="true">🔒</span>安心のセキュリティ</li> <li><span aria-hidden="true">💬</span>いつでもチャット相談</li> </ul>

CSSコード

.kts-list09 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list09 li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: #333; }

10. 横並びメリットリスト

アイコンを上、テキストを下に置いた、横に並ぶタイプです。

実際の見た目

• 🚀スピード
• 💰コスト削減
• 🤝手厚いサポート

HTMLコード

<ul class="kts-list10"> <li><span class="ico" aria-hidden="true">🚀</span>スピード</li> <li><span class="ico" aria-hidden="true">💰</span>コスト削減</li> <li><span class="ico" aria-hidden="true">🤝</span>手厚いサポート</li> </ul>

CSSコード

.kts-list10 { list-style: none; display: flex; gap: 24px; padding: 0; margin: 0; font-family: sans-serif; } .kts-list10 li { text-align: center; font-size: 13px; color: #333; } .kts-list10 .ico { display: block; font-size: 26px; margin-bottom: 6px; }

11. できないこと（×印）リスト

対応していない内容を、×印でわかりやすく伝えるリストです。

実際の見た目

• 土日の対応
• 即日キャンセル

HTMLコード

<ul class="kts-list11"> <li>土日の対応</li> <li>即日キャンセル</li> </ul>

CSSコード

.kts-list11 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list11 li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; color: #8A94A0; } .kts-list11 li::before { content: "×"; position: absolute; left: 0; color: #C0392B; font-weight: 700; }

12. グラデーション番号リスト

番号の背景にグラデーションを使った、華やかなリストです。

実際の見た目

1. ヒアリング
2. ご提案
3. 納品

HTMLコード

<ol class="kts-list12"> <li>ヒアリング</li> <li>ご提案</li> <li>納品</li> </ol>

CSSコード

.kts-list12 { list-style: none; padding: 0; margin: 0; counter-reset: kts12; font-family: sans-serif; } .kts-list12 li { counter-increment: kts12; padding: 6px 0 6px 34px; position: relative; font-size: 14px; color: #333; } .kts-list12 li::before { content: counter(kts12); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; line-height: 22px; text-align: center; background: linear-gradient(135deg, #6C63FF, #3F8CFF); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; }

13. タイムライン風の縦リスト

縦の線でつないだ、時系列や手順を示すリストです。

実際の見た目

• お問い合わせ
• お見積り
• ご契約

HTMLコード

<ul class="kts-list13"> <li>お問い合わせ</li> <li>お見積り</li> <li>ご契約</li> </ul>

CSSコード

.kts-list13 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list13 li { position: relative; padding: 0 0 24px 24px; font-size: 14px; color: #333; border-left: 2px solid #D8DCE1; } .kts-list13 li:last-child { border-left: 2px solid transparent; padding-bottom: 0; } .kts-list13 li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; background: #3F8CFF; border-radius: 50%; }

14. 完了項目に打ち消し線のリスト

終わった項目を、打ち消し線とグレーで示すリストです。

実際の見た目

• 会場の予約
• 招待状の送付
• 当日の受付準備

HTMLコード

<ul class="kts-list14"> <li class="done">会場の予約</li> <li class="done">招待状の送付</li> <li>当日の受付準備</li> </ul>

CSSコード

.kts-list14 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list14 li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; color: #333; } .kts-list14 li::before { content: "☐"; position: absolute; left: 0; color: #8A94A0; } .kts-list14 li.done { color: #B0B7BE; text-decoration: line-through; } .kts-list14 li.done::before { content: "☑"; color: #2E9E5B; }

15. 二重丸で評価を示すリスト

◎・○・△のような記号で、対応レベルを示すリストです。

実際の見た目

• ◎日本語サポート
• ○英語サポート
• △電話サポート

HTMLコード

<ul class="kts-list15"> <li><span class="mark good">◎</span>日本語サポート</li> <li><span class="mark mid">○</span>英語サポート</li> <li><span class="mark low">△</span>電話サポート</li> </ul>

CSSコード

.kts-list15 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list15 li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: #333; } .kts-list15 .mark { font-weight: 700; width: 18px; text-align: center; } .kts-list15 .good { color: #2E9E5B; } .kts-list15 .mid { color: #3F8CFF; } .kts-list15 .low { color: #FFB020; }

16. 円形アイコン背景のリスト

小さな円形の背景にアイコンを乗せた、特徴紹介向けのリストです。

実際の見た目

• ✓初期費用0円
• ✓いつでも解約可能

HTMLコード

<ul class="kts-list16"> <li><span class="circle" aria-hidden="true">✓</span>初期費用0円</li> <li><span class="circle" aria-hidden="true">✓</span>いつでも解約可能</li> </ul>

CSSコード

.kts-list16 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list16 li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: #333; } .kts-list16 .circle { width: 20px; height: 20px; line-height: 20px; text-align: center; flex-shrink: 0; background: #EFF6F3; color: #2E6F5E; border-radius: 50%; font-size: 11px; font-weight: 700; }

17. 左ボーダー付きリスト

各項目の左に短い線を添えた、シンプルなリストです。

実際の見た目

• プライバシーマーク取得済み
• SSL暗号化通信対応

HTMLコード

<ul class="kts-list17"> <li>プライバシーマーク取得済み</li> <li>SSL暗号化通信対応</li> </ul>

CSSコード

.kts-list17 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list17 li { padding: 8px 0 8px 14px; margin-bottom: 4px; border-left: 3px solid #2E6F5E; font-size: 14px; color: #333; }

18. 星付き特徴リスト

星のアイコンを添えて、おすすめポイントを示すリストです。

実際の見た目

• ★業界最安値に挑戦
• ★累計導入10,000社

HTMLコード

<ul class="kts-list18"> <li><span aria-hidden="true">★</span>業界最安値に挑戦</li> <li><span aria-hidden="true">★</span>累計導入10,000社</li> </ul>

CSSコード

.kts-list18 { list-style: none; padding: 0; margin: 0; font-family: sans-serif; } .kts-list18 li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: #333; } .kts-list18 span { color: #FFB020; }

19. タグ風の小さいチェックリスト

ピル型のタグの中に、チェックと項目を並べる形です。

実際の見た目

• Wi-Fiあり
• 駐車場あり
• ペット可

HTMLコード

<ul class="kts-list19"> <li>Wi-Fiあり</li> <li>駐車場あり</li> <li>ペット可</li> </ul>

CSSコード

.kts-list19 { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-family: sans-serif; } .kts-list19 li { display: flex; align-items: center; gap: 4px; padding: 5px 12px; background: #EFF6F3; color: #2E6F5E; border-radius: 999px; font-size: 12px; } .kts-list19 li::before { content: "✓"; font-weight: 700; }

20. 見出し付きボックスリスト

小見出しの下に、チェックリストをまとめて入れる形です。

実際の見た目

HTMLコード

<div class="kts-list20"> <p class="heading">ご利用前にご確認ください</p> <ul> <li>利用規約を確認した</li> <li>支払い方法を選択した</li> </ul> </div>

CSSコード

.kts-list20 { width: 280px; padding: 16px 18px; background: #F9FAFB; border-radius: 8px; font-family: sans-serif; } .kts-list20 .heading { font-size: 13px; font-weight: 700; color: #1F2933; margin: 0 0 10px; } .kts-list20 ul { list-style: none; padding: 0; margin: 0; } .kts-list20 li { padding: 4px 0 4px 22px; position: relative; font-size: 13px; color: #444; } .kts-list20 li::before { content: "✓"; position: absolute; left: 0; color: #2E6F5E; font-weight: 700; }

カスタマイズの小ワザ

• アイコンの多くはCSSの::before（項目の前に表示する記法）で作っています。記号を変えたい時は、contentの中の文字を書き換えてください。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
• 13番のタイムライン風リストは、項目数が変わってもそのまま使えますが、最後の項目だけ線の色を透明にしている点に注意してください。
• 06番の対応・非対応リストのように、2つのulを並べる形は、HTMLの構造ごとコピーしてください。
• 文字を変えたい時は、HTMLコード内のテキスト部分を書き換えてください。

まとめ｜早見表

用途	該当するリスト
できること・特徴紹介	01, 04, 09, 16, 17, 18
持ち物・チェック項目	02, 05, 14, 19, 20
手順・ステップ	03, 08, 12, 13
対応・非対応の比較	06, 11, 15
装飾・インタラクション	07, 10

20個のリストは、できること・持ち物・手順・比較など、伝えたい内容に応じて使い分けられる。単なる箇条書きより、視線の流れを作りやすくなる。