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

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

カンファレンス会場別スケジュール表

複数会場のセッションを色分けタグで並べたカンファレンス向けスケジュール表。同時開催イベントのタイムテーブルページに活用できる。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-14-03-table">
          <thead>
            <tr><th></th><th class="v1">会場A</th><th class="v2">会場B</th><th class="v3">会場C</th></tr>
          </thead>
          <tbody>
            <tr><td>13:00</td><td><span class="d05-14-03-tag t1">AI活用事例</span></td><td><span class="d05-14-03-tag t2">デザイン思考</span></td><td><span class="d05-14-03-tag t3">組織づくり</span></td></tr>
            <tr><td>14:00</td><td><span class="d05-14-03-tag t2">UXリサーチ</span></td><td><span class="d05-14-03-tag t3">採用戦略</span></td><td><span class="d05-14-03-tag t1">データ分析</span></td></tr>
            <tr><td>15:00</td><td><span class="d05-14-03-tag t3">マーケ最新</span></td><td><span class="d05-14-03-tag t1">開発体制</span></td><td><span class="d05-14-03-tag t2">ブランド論</span></td></tr>
          </tbody>
        </table>

CSS

.d05-14-03-table{border-collapse:collapse;font-size:10px;width:100%}
        .d05-14-03-table th{padding:6px 6px;text-align:center;color:#fff;font-weight:600}
        .d05-14-03-table th:first-child{background:#374151;color:#fff}
        .d05-14-03-table th.v1{background:#2563eb}
        .d05-14-03-table th.v2{background:#059669}
        .d05-14-03-table th.v3{background:#d97706}
        .d05-14-03-table td{padding:6px 6px;text-align:center;border-bottom:1px solid #eee}
        .d05-14-03-table td:first-child{font-weight:700;color:#374151}
        .d05-14-03-tag{display:inline-block;padding:3px 8px;border-radius:6px;font-size:9px;font-weight:600}
        .d05-14-03-tag.t1{background:#dbeafe;color:#1d4ed8}
        .d05-14-03-tag.t2{background:#d1fae5;color:#047857}
        .d05-14-03-tag.t3{background:#fef3c7;color:#b45309}

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