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

コメント欄用スケルトン

アバターと投稿者名・コメント本文行を縦に並べたコメント一覧のプレースホルダー。記事下コメント欄やレビュー欄の読み込み表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="clist09-13-06">
          <div class="crow09-13-06">
            <div class="cav09-13-06"></div>
            <div class="cbody09-13-06">
              <div class="cname09-13-06"></div>
              <div class="cline09-13-06 cl1"></div>
              <div class="cline09-13-06 cl2"></div>
            </div>
          </div>
          <div class="crow09-13-06">
            <div class="cav09-13-06"></div>
            <div class="cbody09-13-06">
              <div class="cname09-13-06"></div>
              <div class="cline09-13-06 cl1"></div>
              <div class="cline09-13-06 cl2"></div>
            </div>
          </div>
          <div class="crow09-13-06 last09-13-06">
            <div class="cav09-13-06"></div>
            <div class="cbody09-13-06">
              <div class="cname09-13-06"></div>
              <div class="cline09-13-06 cl1"></div>
            </div>
          </div>
        </div>

CSS

.d09-13-06 .clist09-13-06{
          width:100%;
          max-width:270px;
          font-family:sans-serif;
        }
        .d09-13-06 .crow09-13-06{
          display:flex;
          gap:10px;
          padding:10px 0;
          border-bottom:1px solid #f1f5f9;
        }
        .d09-13-06 .crow09-13-06.last09-13-06{
          border-bottom:none;
        }
        .d09-13-06 .cav09-13-06{
          flex-shrink:0;
          width:32px;
          height:32px;
          border-radius:50%;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-06 .cbody09-13-06{
          flex:1;
        }
        .d09-13-06 .cname09-13-06{
          width:80px;
          height:9px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:7px;
        }
        .d09-13-06 .cline09-13-06{
          height:8px;
          border-radius:3px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
          margin-bottom:5px;
        }
        .d09-13-06 .cl1{ width:100%; }
        .d09-13-06 .cl2{ width:60%; margin-bottom:0; }

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