パーツ番号 06-05-10 ・ CSSのみ

動画サムネイル風レビューカード(静止)

再生ボタンのアイコンを添えた静止サムネイルで、動画インタビュー風の見た目を作るカードです。実際の再生機能は含みません。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-05-10-card">
          <div class="d06-05-10-thumb">
            <span class="d06-05-10-play">▶</span>
            <span class="d06-05-10-time">01:24</span>
          </div>
          <div class="d06-05-10-stars">★★★★★</div>
          <div class="d06-05-10-name">渡辺 洋介 様のインタビュー</div>
        </div>

CSS

.d06-05-10-card{ width:100%; max-width:230px; text-align:center; }
        .d06-05-10-thumb{ position:relative; height:110px; border-radius:10px; background:linear-gradient(135deg,#3a3550,#5c6bc0); margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
        .d06-05-10-play{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9); color:#3a3550; display:flex; align-items:center; justify-content:center; font-size:13px; }
        .d06-05-10-time{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,0.55); color:#fff; font-size:9px; padding:2px 6px; border-radius:4px; }
        .d06-05-10-stars{ color:#f5a623; font-size:12px; letter-spacing:1px; margin-bottom:4px; }
        .d06-05-10-name{ font-size:11px; font-weight:700; color:#221f33; }

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