パーツ番号 07-15-05 ・ CSSのみ

チャンネルアイコン付きサムネイル(YouTube風)

サムネイル下にチャンネルアバターと名称を並べたYouTube風レイアウトです。動画メディアサイトの一覧カードに転用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="playbtn"><span class="tri"></span></span>
          </div>
          <div class="row">
            <span class="avatar"></span>
            <div class="cinfo">
              <p class="vtitle">週末だけの家庭菜園入門</p>
              <p class="cname">green garden channel</p>
            </div>
          </div>
        </div>

CSS

.d07-15-05 .card{width:220px;}
        .d07-15-05 .thumb{position:relative;width:220px;height:124px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#7bbf7a,#3f8f5c);}
        .d07-15-05 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;}
        .d07-15-05 .tri{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid #235c3a;margin-left:3px;}
        .d07-15-05 .row{display:flex;gap:8px;margin-top:9px;align-items:flex-start;}
        .d07-15-05 .avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#e8c468,#d9a441);}
        .d07-15-05 .vtitle{margin:0 0 3px;font-size:12.5px;font-weight:700;color:#333;line-height:1.35;}
        .d07-15-05 .cname{margin:0;font-size:11px;color:#888;}

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