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

カレンダー+予定リストのダッシュボード構成

左に月間カレンダー、右に当日の予定一覧を配置する構成。予約管理画面やスケジュール確認ページの骨格として使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-11-wrap">
          <div class="d01-10-11-cal">
            <span class="d01-10-11-caltitle"></span>
            <div class="d01-10-11-grid">
              <i></i><i></i><i class="on"></i><i></i><i></i><i></i><i></i>
              <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
            </div>
          </div>
          <div class="d01-10-11-sched">
            <span class="d01-10-11-stitle"></span>
            <div class="d01-10-11-ev"><b></b><span></span></div>
            <div class="d01-10-11-ev"><b></b><span></span></div>
            <div class="d01-10-11-ev"><b></b><span></span></div>
          </div>
        </div>

CSS

.prev.d01-10-11{padding:16px;align-items:stretch}
        .d01-10-11-wrap{display:flex;gap:12px;width:100%;font-family:sans-serif}
        .d01-10-11-cal{flex:1.3;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px}
        .d01-10-11-caltitle{display:block;width:70px;height:10px;border-radius:4px;background:#334155;margin-bottom:10px}
        .d01-10-11-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
        .d01-10-11-grid i{display:block;aspect-ratio:1/1;border-radius:4px;background:#f1f5f9}
        .d01-10-11-grid i.on{background:#38bdf8}
        .d01-10-11-sched{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px}
        .d01-10-11-stitle{display:block;width:60px;height:10px;border-radius:4px;background:#334155;margin-bottom:2px}
        .d01-10-11-ev{display:flex;flex-direction:column;gap:4px;border-left:3px solid #38bdf8;padding-left:8px}
        .d01-10-11-ev b{display:block;width:40px;height:7px;border-radius:3px;background:#94a3b8}
        .d01-10-11-ev span{display:block;width:80%;height:7px;border-radius:3px;background:#e2e8f0}

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