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

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

左固定動画プレビュー+右コメント欄スクロール2カラム

左側に動画のサムネイルを固定し、右側のコメント一覧だけをスクロールできる構成です。WordPressの動画配信サイトやYouTube連携ページのレイアウト検討に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-12-frame">
          <div class="d01-15-12-scroll">
            <div class="d01-15-12-side">
              <div class="d01-15-12-player"><span class="d01-15-12-play">&#9654;</span></div>
              <p class="d01-15-12-vtitle">製品紹介動画</p>
              <p class="d01-15-12-vmeta">再生時間 3:24</p>
            </div>
            <div class="d01-15-12-main">
              <h4>コメント (12)</h4>
              <div class="d01-15-12-cm"><span class="d01-15-12-av"></span><div><p class="n">田中</p><p class="c">とても分かりやすい説明でした!</p></div></div>
              <div class="d01-15-12-cm"><span class="d01-15-12-av"></span><div><p class="n">佐藤</p><p class="c">続編も期待しています。</p></div></div>
              <div class="d01-15-12-cm"><span class="d01-15-12-av"></span><div><p class="n">鈴木</p><p class="c">画質も綺麗で見やすかったです。</p></div></div>
              <div class="d01-15-12-cm"><span class="d01-15-12-av"></span><div><p class="n">高橋</p><p class="c">保存版にします。</p></div></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-15-12{padding:0;display:block}
        .d01-15-12-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#0f172a}
        .d01-15-12-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
        .d01-15-12-side{flex:0 0 42%;position:sticky;top:0;align-self:flex-start;padding:18px 12px;box-sizing:border-box;min-height:260px;display:flex;flex-direction:column;gap:8px}
        .d01-15-12-player{width:100%;aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#334155,#1e293b);display:flex;align-items:center;justify-content:center}
        .d01-15-12-play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);color:#0f172a;display:flex;align-items:center;justify-content:center;font-size:13px}
        .d01-15-12-vtitle{margin:0;font-size:11.5px;color:#fff;font-weight:700}
        .d01-15-12-vmeta{margin:0;font-size:10px;color:#94a3b8}
        .d01-15-12-main{flex:1;background:#fff;padding:18px 14px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
        .d01-15-12-main h4{margin:0 0 2px;font-size:13px;color:#1a1d24;font-weight:800}
        .d01-15-12-cm{display:flex;gap:8px}
        .d01-15-12-av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#a78bfa,#8b5cf6)}
        .d01-15-12-cm .n{margin:0;font-size:10.5px;font-weight:700;color:#334155}
        .d01-15-12-cm .c{margin:2px 0 0;font-size:10.5px;color:#64748b;line-height:1.5}

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