パーツ番号 11-09-10 ・ CSSのみ

汎用エンプティステートページ

シンプルな書類イラストとメッセージのみで構成した静止の空状態デザイン。一覧ページにデータが1件もない場合の共通表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-10-wrap">
          <svg class="d11-09-10-illust" width="64" height="52" viewBox="0 0 64 52" fill="none">
            <ellipse cx="32" cy="46" rx="24" ry="4" fill="#f1f5f9"/>
            <rect x="18" y="10" width="28" height="30" rx="4" fill="#f8fafc" stroke="#d1d5db" stroke-width="2"/>
            <line x1="24" y1="20" x2="40" y2="20" stroke="#e5e7eb" stroke-width="2"/>
            <line x1="24" y1="27" x2="40" y2="27" stroke="#e5e7eb" stroke-width="2"/>
            <line x1="24" y1="34" x2="34" y2="34" stroke="#e5e7eb" stroke-width="2"/>
          </svg>
          <div class="d11-09-10-title">データがありません</div>
          <p class="d11-09-10-text">表示できる項目はまだ登録されていません</p>
        </div>

CSS

.d11-09-10-wrap{ text-align:center; }
        .d11-09-10-illust{ display:block; margin:0 auto 14px; }
        .d11-09-10-title{ font-size:15px; font-weight:700; color:#374151; }
        .d11-09-10-text{ margin-top:8px; font-size:12px; color:#9ca3af; }

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