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

プロフィールカード用スケルトン(丸アバター+テキスト行)

丸型アバターと名前・肩書き行、統計ボックスを灰色ブロックで表現したプロフィールカードのプレースホルダー。会員一覧やマイページの読み込み表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="card09-13-02">
          <div class="head09-13-02">
            <div class="avatar09-13-02"></div>
            <div class="info09-13-02">
              <div class="name09-13-02"></div>
              <div class="role09-13-02"></div>
            </div>
          </div>
          <div class="stats09-13-02">
            <span class="stat09-13-02"></span>
            <span class="stat09-13-02"></span>
            <span class="stat09-13-02"></span>
          </div>
        </div>

CSS

.d09-13-02 .card09-13-02{
          width:100%;
          max-width:260px;
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:12px;
          padding:18px;
          font-family:sans-serif;
        }
        .d09-13-02 .head09-13-02{
          display:flex;
          align-items:center;
          gap:12px;
          margin-bottom:16px;
        }
        .d09-13-02 .avatar09-13-02{
          flex-shrink:0;
          width:52px;
          height:52px;
          border-radius:50%;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-02 .info09-13-02{
          flex:1;
        }
        .d09-13-02 .name09-13-02{
          width:110px;
          height:13px;
          border-radius:4px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:8px;
        }
        .d09-13-02 .role09-13-02{
          width:75px;
          height:10px;
          border-radius:4px;
          background:linear-gradient(135deg,#e2e8f0,#f1f5f9);
        }
        .d09-13-02 .stats09-13-02{
          display:flex;
          gap:8px;
        }
        .d09-13-02 .stat09-13-02{
          flex:1;
          height:36px;
          border-radius:8px;
          background:linear-gradient(135deg,#eef1f5,#f5f7f9);
        }

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