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

パーツ番号 05-14-11 ・ CSSのみ

アジェンダ形式リストスケジュール

時刻と項目を縦のライン+ドットでつないだ議事進行表・アジェンダ表示の静止見本です。セミナーや式典の当日プログラムページに使いやすい構成です。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-14-11-list">
          <div class="d05-14-11-row">
            <span class="d05-14-11-time">09:30</span>
            <span class="d05-14-11-dot"></span>
            <div class="d05-14-11-body"><strong>受付開始</strong><span>会場ロビーにて</span></div>
          </div>
          <div class="d05-14-11-row">
            <span class="d05-14-11-time">10:00</span>
            <span class="d05-14-11-dot"></span>
            <div class="d05-14-11-body"><strong>開会挨拶</strong><span>メインホール</span></div>
          </div>
          <div class="d05-14-11-row">
            <span class="d05-14-11-time">10:15</span>
            <span class="d05-14-11-dot"></span>
            <div class="d05-14-11-body"><strong>基調講演</strong><span>ゲストスピーカー登壇</span></div>
          </div>
          <div class="d05-14-11-row">
            <span class="d05-14-11-time">12:00</span>
            <span class="d05-14-11-dot"></span>
            <div class="d05-14-11-body"><strong>昼食休憩</strong><span>1階カフェスペース</span></div>
          </div>
        </div>

CSS

.d05-14-11-list{position:relative;width:100%;display:flex;flex-direction:column;gap:18px;padding-left:4px}
        .d05-14-11-list::before{content:"";position:absolute;left:52px;top:6px;bottom:6px;width:1px;background:#e5e7eb}
        .d05-14-11-row{display:flex;align-items:flex-start;gap:12px;position:relative}
        .d05-14-11-time{width:40px;flex:none;font-size:11px;font-weight:700;color:#374151;text-align:right}
        .d05-14-11-dot{width:9px;height:9px;border-radius:50%;background:#6366f1;margin-top:3px;flex:none;position:relative;z-index:1;box-shadow:0 0 0 3px #fff}
        .d05-14-11-body{display:flex;flex-direction:column;gap:2px}
        .d05-14-11-body strong{font-size:12px;color:#111827}
        .d05-14-11-body span{font-size:10.5px;color:#9ca3af}

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