パーツ番号 06-06-12 ・ CSSのみ

アバターウォール型メンバー一覧

正方形タイルでアバターを敷き詰め、残人数を「+18」のように表示する形式。大人数の社員一覧をコンパクトに見せられます。

staticcss

プレビュー

ソースコード

HTML

<div class="wall">
          <div class="tile"><span class="av">田</span></div>
          <div class="tile"><span class="av">鈴</span></div>
          <div class="tile"><span class="av">佐</span></div>
          <div class="tile"><span class="av">山</span></div>
          <div class="tile"><span class="av">林</span></div>
          <div class="tile more">+18</div>
        </div>

CSS

.d06-06-12 .wall{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:210px;}
        .d06-06-12 .tile{aspect-ratio:1/1;border-radius:8px;background:linear-gradient(135deg,#0ea5e9,#6366f1);display:flex;align-items:center;justify-content:center;}
        .d06-06-12 .av{color:#fff;font-size:16px;font-weight:700;font-family:sans-serif;}
        .d06-06-12 .more{background:#e2e8f0;color:#64748b;font-size:12px;font-weight:700;font-family:sans-serif;}

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