重なるアバターグループ（+N 表記）
重なるアバターグループは、複数ユーザーのアイコンを少しずつ左に重ねて並べ、人数が多いときは末尾に「+5」と省略表示する UI です。重なりは margin-left のマイナス値で作り、各アイコンに白い border を回すことで前後の境界をくっきり見せています。
解説
重なるアバターグループは、複数ユーザーのアイコンを少しずつ左に重ねて並べ、人数が多いときは末尾に「+5」と省略表示する UI です。重なりは margin-left のマイナス値で作り、各アイコンに白い border を回すことで前後の境界をくっきり見せています。:hover で対象だけがふわっと上に浮き、z-index が手前に来るので、誰のアイコンかを確認しやすい仕掛けです。CSS だけで動作し JavaScript は不要です。
向いている用途
- プロジェクトやタスクの参加メンバー表示
- 記事・投稿へのコメント参加者一覧
- イベントの参加者や「いいね」した人の表示
カスタマイズの中心は、アイコンの大きさ（width・height）と重なり幅（margin-left）、白枠の太さです。重なりを深くするほどコンパクトになります。各アイコンは画像にも差し替えられ、頭文字のままなら背景のグラデーションで個性を出せます。「+5」の数字は実際の残り人数に合わせて出し分けると自然です。アクセシビリティのため、画像にする場合は alt に名前を入れておくと読み上げ時に親切です。
よくある質問
頭文字ではなく顔写真を表示できますか？
できます。各アイコンの背景グラデーションの代わりに img を入れるか、background-image に写真を指定してください。丸い枠と白い縁取りはそのまま活かせます。
重なり具合を調整したいです。
ag__a の margin-left のマイナス値を変えると重なりの深さが変わります。値を小さく（マイナスを浅く）すれば離れ、大きくすればより密に重なります。