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

空状態からの誘導イラスト(静止)

データが1件もない状態で表示する案内イラストとボタン。最初の一歩を促す空状態画面の見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-08-wrap">
          <svg viewBox="0 0 100 80" width="100" height="80">
            <rect x="20" y="20" width="60" height="44" rx="4" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="5 4"/>
            <line x1="50" y1="34" x2="50" y2="50" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
            <line x1="42" y1="42" x2="58" y2="42" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
          </svg>
          <p class="d11-07-08-t">まだ項目がありません</p>
          <span class="d11-07-08-btn">最初の項目を作成</span>
        </div>

CSS

.d11-07-08-wrap{ text-align:center; }
        .d11-07-08-t{ margin:8px 0 10px; font-size:12.5px; color:#64748b; }
        .d11-07-08-btn{ display:inline-block; padding:7px 16px; background:#0f172a; color:#fff; font-size:11.5px; font-weight:600; border-radius:999px; }

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