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

記事カード用スケルトン(画像+タイトル+本文行)

画像・見出し・本文行を灰色ブロックで表現した記事カードの読み込み中プレースホルダー。ブログ一覧やニュースカードの読み込み待ち表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="card09-13-01">
          <div class="thumb09-13-01"></div>
          <div class="wrap09-13-01">
            <div class="ttl09-13-01"></div>
            <div class="sub09-13-01"></div>
            <div class="row09-13-01 r1"></div>
            <div class="row09-13-01 r2"></div>
            <div class="row09-13-01 r3"></div>
          </div>
        </div>

CSS

.d09-13-01 .card09-13-01{
          width:100%;
          max-width:260px;
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:12px;
          overflow:hidden;
          font-family:sans-serif;
        }
        .d09-13-01 .thumb09-13-01{
          width:100%;
          height:110px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-01 .wrap09-13-01{
          padding:14px 16px;
        }
        .d09-13-01 .ttl09-13-01{
          width:75%;
          height:14px;
          border-radius:4px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:10px;
        }
        .d09-13-01 .sub09-13-01{
          width:45%;
          height:10px;
          border-radius:4px;
          background:linear-gradient(135deg,#e2e8f0,#f1f5f9);
          margin-bottom:14px;
        }
        .d09-13-01 .row09-13-01{
          height:8px;
          border-radius:4px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
          margin-bottom:7px;
        }
        .d09-13-01 .row09-13-01.r1{ width:100%; }
        .d09-13-01 .row09-13-01.r2{ width:100%; }
        .d09-13-01 .row09-13-01.r3{ width:65%; margin-bottom:0; }

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