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

空の下書き・記事一覧イラスト

文書アイコンのアウトラインで下書き記事が未作成であることを伝える静止イラスト。ブログ管理画面の投稿一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-11-wrap">
          <svg class="d09-08-11-svg" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="16" y="14" width="88" height="64" rx="6" stroke="#c7ccd6" stroke-width="6" fill="#f5f6f9"/>
            <line x1="30" y1="34" x2="70" y2="34" stroke="#e1e4ea" stroke-width="5" stroke-linecap="round"/>
            <line x1="30" y1="48" x2="90" y2="48" stroke="#e1e4ea" stroke-width="5" stroke-linecap="round"/>
            <line x1="30" y1="62" x2="58" y2="62" stroke="#e1e4ea" stroke-width="5" stroke-linecap="round"/>
          </svg>
          <p class="d09-08-11-text">記事の下書きはまだありません</p>
          <p class="d09-08-11-sub">最初の投稿を作成しましょう</p>
        </div>

CSS

.d09-08-11-wrap{ text-align:center; }
        .d09-08-11-svg{ width:100px; height:84px; margin:0 auto 12px; display:block; }
        .d09-08-11-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-11-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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