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

グリッド配置チェックリスト

2カラムに並んだチェック項目のリストです。準備物や確認事項をコンパクトにまとめたいときに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-08-list">
          <li>企画書</li>
          <li>台本</li>
          <li>撮影素材</li>
          <li>編集データ</li>
        </ul>

CSS

.d02-05-08-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;width:100%;max-width:280px;font-size:13px;color:#333;}
        .d02-05-08-list li{position:relative;padding:4px 0 4px 22px;}
        .d02-05-08-list li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border:2px solid #558b2f;border-radius:3px;}
        .d02-05-08-list li::after{content:"";position:absolute;left:4px;top:8px;width:6px;height:3px;border-left:2px solid #558b2f;border-bottom:2px solid #558b2f;transform:rotate(-45deg);}

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