パーツ番号 09-08-07 ・ CSSのみ

空のタスクリストイラスト(完了風)

丸で囲んだチェックマークで未処理タスクが無いことを伝える静止イラスト。ToDoアプリやタスク管理画面の空状態に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-07-wrap">
          <div class="d09-08-07-board">
            <span class="d09-08-07-check">✓</span>
          </div>
          <p class="d09-08-07-text">タスクはありません</p>
          <p class="d09-08-07-sub">すべて完了しました</p>
        </div>

CSS

.d09-08-07-wrap{ text-align:center; }
        .d09-08-07-board{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:#eef6f0; border:2px solid #bfe3c8; display:flex; align-items:center; justify-content:center; }
        .d09-08-07-check{ font-size:28px; color:#5fae74; font-weight:700; }
        .d09-08-07-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-07-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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