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

検索結果リスト用スケルトン

サムネイル・タイトル・説明文2行を灰色ブロックで並べた検索結果のプレースホルダー。サイト内検索やニュース一覧の読み込み待ち表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="slist09-13-08">
          <div class="srow09-13-08">
            <div class="sthumb09-13-08"></div>
            <div class="sbody09-13-08">
              <div class="stitle09-13-08"></div>
              <div class="sline09-13-08 sl1"></div>
              <div class="sline09-13-08 sl2"></div>
            </div>
          </div>
          <div class="srow09-13-08">
            <div class="sthumb09-13-08"></div>
            <div class="sbody09-13-08">
              <div class="stitle09-13-08"></div>
              <div class="sline09-13-08 sl1"></div>
              <div class="sline09-13-08 sl2"></div>
            </div>
          </div>
        </div>

CSS

.d09-13-08 .slist09-13-08{
          width:100%;
          max-width:280px;
          font-family:sans-serif;
        }
        .d09-13-08 .srow09-13-08{
          display:flex;
          gap:12px;
          padding:12px 0;
          border-bottom:1px solid #f1f5f9;
        }
        .d09-13-08 .srow09-13-08:last-child{
          border-bottom:none;
        }
        .d09-13-08 .sthumb09-13-08{
          flex-shrink:0;
          width:56px;
          height:56px;
          border-radius:8px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-08 .sbody09-13-08{
          flex:1;
        }
        .d09-13-08 .stitle09-13-08{
          width:80%;
          height:11px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:8px;
        }
        .d09-13-08 .sline09-13-08{
          height:8px;
          border-radius:3px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
          margin-bottom:5px;
        }
        .d09-13-08 .sl1{ width:100%; }
        .d09-13-08 .sl2{ width:65%; margin-bottom:0; }

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