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

リスト形式のチームメンバー一覧(横並び簡易表示)

アバター・氏名・担当を1行にまとめたリスト形式。人数が多い部署一覧をコンパクトに掲載できます。

staticcss

プレビュー

ソースコード

HTML

<ul class="list">
          <li><span class="av">村</span><span class="nm">村上 亮太</span><span class="rl">営業</span></li>
          <li><span class="av">石</span><span class="nm">石井 麻衣</span><span class="rl">広報</span></li>
          <li><span class="av">加</span><span class="nm">加藤 悠</span><span class="rl">人事</span></li>
        </ul>

CSS

.d06-06-10 .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;max-width:220px;}
        .d06-06-10 .list li{display:flex;align-items:center;gap:10px;}
        .d06-06-10 .av{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:sans-serif;}
        .d06-06-10 .nm{flex:1;font-size:12px;font-weight:700;color:#1e293b;font-family:sans-serif;text-align:left;}
        .d06-06-10 .rl{font-size:10.5px;color:#94a3b8;font-family:sans-serif;}

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