← 静的パーツギャラリーへ戻る

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

左固定ミニカレンダー+右予約リストスクロール2カラム

左側に小さなカレンダーを固定表示し、右側の予約一覧だけがスクロールする構成です。WordPressの予約サイトやサロンの当日予約状況ページのレイアウトに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-11-frame">
          <div class="d01-15-11-scroll">
            <div class="d01-15-11-side">
              <p class="d01-15-11-cal-ttl">2026年7月</p>
              <div class="d01-15-11-cal-grid">
                <span>日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span>
                <span class="d">1</span><span class="d">2</span><span class="d">3</span><span class="d">4</span><span class="d">5</span><span class="d">6</span><span class="d">7</span>
                <span class="d">8</span><span class="d">9</span><span class="d">10</span><span class="d on">11</span><span class="d">12</span><span class="d">13</span><span class="d">14</span>
              </div>
            </div>
            <div class="d01-15-11-main">
              <h4>ご予約リスト</h4>
              <div class="d01-15-11-item"><span class="t">10:00</span><span class="n">カット</span></div>
              <div class="d01-15-11-item"><span class="t">11:30</span><span class="n">カラー</span></div>
              <div class="d01-15-11-item"><span class="t">13:00</span><span class="n">パーマ</span></div>
              <div class="d01-15-11-item"><span class="t">14:30</span><span class="n">トリートメント</span></div>
              <div class="d01-15-11-item"><span class="t">16:00</span><span class="n">カット</span></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-15-11{padding:0;display:block}
        .d01-15-11-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d01-15-11-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
        .d01-15-11-side{flex:0 0 44%;position:sticky;top:0;align-self:flex-start;background:#f8f8fc;border-right:1px solid #eef0f3;padding:16px 12px;box-sizing:border-box;min-height:260px}
        .d01-15-11-cal-ttl{margin:0 0 8px;font-size:11px;font-weight:800;color:#334155}
        .d01-15-11-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:8.5px;text-align:center;color:#94a3b8}
        .d01-15-11-cal-grid .d{color:#334155;padding:3px 0}
        .d01-15-11-cal-grid .on{background:#6366f1;color:#fff;border-radius:4px;font-weight:700}
        .d01-15-11-main{flex:1;padding:18px 14px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
        .d01-15-11-main h4{margin:0 0 4px;font-size:13px;color:#1a1d24;font-weight:800}
        .d01-15-11-item{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px}
        .d01-15-11-item .t{font-size:11px;font-weight:700;color:#6366f1;flex:0 0 auto}
        .d01-15-11-item .n{font-size:11.5px;color:#334155}

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