パーツ番号 02-05-01 ・ CSSのみ

チェックマーク付きリスト

各項目の先頭にカスタムのチェックマークを配置した箇条書きです。記事内のポイント整理やまとめセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-01-list">
          <li>記事の要点を整理する</li>
          <li>参考資料を確認する</li>
          <li>下書きを作成する</li>
          <li>最終チェックを行う</li>
        </ul>

CSS

.d02-05-01-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;font-size:14px;color:#333;}
        .d02-05-01-list li{position:relative;padding:6px 0 6px 30px;line-height:1.5;border-bottom:1px solid #f0f0f0;}
        .d02-05-01-list li:last-child{border-bottom:none;}
        .d02-05-01-list li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;background:#2e7d32;color:#fff;border-radius:50%;font-size:12px;line-height:20px;text-align:center;}

クラス名 .d02-05-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。