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

空のカレンダー・予定イラスト

カレンダー形のCSS図形で予定・予約が未登録であることを伝える静止イラスト。予約管理画面やスケジュール一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-12-wrap">
          <div class="d09-08-12-cal">
            <div class="d09-08-12-head"></div>
            <span class="d09-08-12-q">?</span>
          </div>
          <p class="d09-08-12-text">予定されているイベントはありません</p>
          <p class="d09-08-12-sub">新しい予約を追加してください</p>
        </div>

CSS

.d09-08-12-wrap{ text-align:center; }
        .d09-08-12-cal{ width:76px; height:68px; margin:0 auto 14px; border-radius:8px; background:#f5f6f9; border:2px solid #d7dbe3; position:relative; display:flex; align-items:center; justify-content:center; }
        .d09-08-12-head{ position:absolute; top:-2px; left:8px; right:8px; height:10px; background:#d7dbe3; border-radius:2px; }
        .d09-08-12-q{ font-size:26px; color:#c7ccd6; font-weight:700; }
        .d09-08-12-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-12-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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