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

空状態(empty state)

イラスト風SVGと案内文、CTAボタンで構成した空状態。イラストがふわっと浮遊します。WordPressの一覧が0件のときの表示に最適。

csssvg

プレビュー

ソースコード

HTML

<div class="d09-02-05-box">
          <div class="d09-02-05-art">
            <svg viewBox="0 0 120 90">
              <ellipse cx="60" cy="80" rx="42" ry="6" fill="#eef0f4"/>
              <rect x="30" y="26" width="60" height="46" rx="6" fill="#e5e9f2" stroke="#c3cbdb" stroke-width="2"/>
              <rect x="38" y="18" width="44" height="14" rx="4" fill="#f4f6fb" stroke="#c3cbdb" stroke-width="2"/>
              <path d="M46 46h28M46 54h20" stroke="#c3cbdb" stroke-width="3" stroke-linecap="round"/>
              <circle cx="88" cy="30" r="12" fill="#fff" stroke="#a5b0c9" stroke-width="2.5"/>
              <path d="M96 38l7 7" stroke="#a5b0c9" stroke-width="3" stroke-linecap="round"/>
            </svg>
          </div>
          <p class="d09-02-05-title">まだデータがありません</p>
          <p class="d09-02-05-sub">最初の項目を追加してみましょう。</p>
          <button class="d09-02-05-cta">＋ 新規作成</button>
        </div>

CSS

.d09-02-05-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
        .d09-02-05-art{width:150px;animation:d265float 3.2s ease-in-out infinite}
        .d09-02-05-art svg{width:100%;display:block}
        .d09-02-05-title{margin:8px 0 0;font-size:16px;font-weight:700;color:#3a4152}
        .d09-02-05-sub{margin:0;font-size:12.5px;color:#8a92a4}
        .d09-02-05-cta{margin-top:10px;padding:9px 18px;border:none;border-radius:22px;background:#4f46e5;color:#fff;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 5px 14px rgba(79,70,229,.3);transition:transform .15s}
        .d09-02-05-cta:hover{transform:translateY(-2px)}
        @keyframes d265float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

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