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

共著者の横並び表示

2名以上の著者アバターを並べる複数著者表記。共同執筆記事や対談記事のクレジット欄に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="co">
          <div class="member"><span class="av">A</span><span class="nm">安藤 蓮</span></div>
          <span class="plus">+</span>
          <div class="member"><span class="av">B</span><span class="nm">木村 咲</span></div>
        </div>

CSS

.d06-13-04 .co{display:flex;align-items:center;gap:12px;}
        .d06-13-04 .member{display:flex;flex-direction:column;align-items:center;gap:6px;}
        .d06-13-04 .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#10b981,#34d399);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:sans-serif;}
        .d06-13-04 .nm{font-size:11px;color:#334155;font-family:sans-serif;}
        .d06-13-04 .plus{font-size:14px;color:#cbd5e1;font-weight:700;}

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