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

SNSタイムライン投稿用スケルトン

アバター・投稿文・添付画像・アクションアイコンを灰色ブロックで表現したタイムライン投稿のプレースホルダー。SNS風フィードの読み込み待ち表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="post09-13-04">
          <div class="phead09-13-04">
            <div class="pavatar09-13-04"></div>
            <div class="pinfo09-13-04">
              <div class="pname09-13-04"></div>
              <div class="ptime09-13-04"></div>
            </div>
          </div>
          <div class="ptext09-13-04 pl1"></div>
          <div class="ptext09-13-04 pl2"></div>
          <div class="pimg09-13-04"></div>
          <div class="pactions09-13-04">
            <span class="pact09-13-04"></span>
            <span class="pact09-13-04"></span>
            <span class="pact09-13-04"></span>
          </div>
        </div>

CSS

.d09-13-04 .post09-13-04{
          width:100%;
          max-width:260px;
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:12px;
          padding:14px 16px;
          font-family:sans-serif;
        }
        .d09-13-04 .phead09-13-04{
          display:flex;
          align-items:center;
          gap:10px;
          margin-bottom:12px;
        }
        .d09-13-04 .pavatar09-13-04{
          flex-shrink:0;
          width:38px;
          height:38px;
          border-radius:50%;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-04 .pname09-13-04{
          width:90px;
          height:10px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:6px;
        }
        .d09-13-04 .ptime09-13-04{
          width:55px;
          height:8px;
          border-radius:3px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
        }
        .d09-13-04 .ptext09-13-04{
          height:8px;
          border-radius:3px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
          margin-bottom:6px;
        }
        .d09-13-04 .pl1{ width:100%; }
        .d09-13-04 .pl2{ width:70%; }
        .d09-13-04 .pimg09-13-04{
          width:100%;
          height:70px;
          border-radius:8px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
          margin:10px 0;
        }
        .d09-13-04 .pactions09-13-04{
          display:flex;
          gap:14px;
        }
        .d09-13-04 .pact09-13-04{
          width:20px;
          height:20px;
          border-radius:50%;
          background:linear-gradient(135deg,#eef1f5,#f5f7f9);
        }

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