パーツ番号 09-13-09 ・ CSSのみ

動画サムネイル一覧用スケルトン

再生アイコン付きサムネイルとタイトル・チャンネル行を灰色ブロックで表現した動画一覧のプレースホルダー。動画配信ページの読み込み表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="grid09-13-09">
          <div class="vcard09-13-09">
            <div class="vthumb09-13-09"><span class="vplay09-13-09"></span></div>
            <div class="vtitle09-13-09"></div>
            <div class="vchan09-13-09"></div>
          </div>
          <div class="vcard09-13-09">
            <div class="vthumb09-13-09"><span class="vplay09-13-09"></span></div>
            <div class="vtitle09-13-09"></div>
            <div class="vchan09-13-09"></div>
          </div>
        </div>

CSS

.d09-13-09 .grid09-13-09{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:14px;
          width:100%;
          max-width:270px;
          font-family:sans-serif;
        }
        .d09-13-09 .vthumb09-13-09{
          position:relative;
          width:100%;
          aspect-ratio:16/9;
          border-radius:8px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d09-13-09 .vplay09-13-09{
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-50%);
          width:26px;
          height:26px;
          border-radius:50%;
          background:rgba(255,255,255,.75);
        }
        .d09-13-09 .vtitle09-13-09{
          width:90%;
          height:9px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin:8px 0 6px;
        }
        .d09-13-09 .vchan09-13-09{
          width:55%;
          height:8px;
          border-radius:3px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
        }

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