重なりアバター
複数人のアイコンを少しずつ重ねて並べ、最後に「+9」のように残りの人数をまとめて見せる UI です。並びは flex で横一列にし、各アイコンに margin-left:-12px の負の余白を与えて隣へ食い込ませることで重なりを作っています。
解説
複数人のアイコンを少しずつ重ねて並べ、最後に「+9」のように残りの人数をまとめて見せる UI です。並びは flex で横一列にし、各アイコンに margin-left:-12px の負の余白を与えて隣へ食い込ませることで重なりを作っています。先頭だけ :first-child で食い込みを打ち消し、左端を揃えています。丸い形は border-radius:50%、周囲の白い縁は border で表現し、重なっても各アイコンの輪郭が分かるようにしています。CSSのみで完結します。
よく使う場面
- プロジェクトの参加メンバーや担当者の一覧
- 記事や投稿に「いいね」した人たちの表示
- チャットルームやグループの参加者プレビュー
重なり具合は margin-left の負の値で調整でき、値を大きくするほど密に重なります。アイコンのサイズや縁の色も自由に変えられます。実画像を入れる場合は img に切り替え、必ず 誰なのか分かる alt を付けると読み上げにも伝わります。「+9」の数字は飾りではなく実際の残り人数と合わせる必要があり、表示と中身がずれると混乱を招きます。並ぶ順番は重要度の高い人を先頭にすると意味が伝わりやすくなります。
よくある質問
アイコンの重なり具合は調整できますか
できます。各アイコンに付いている負の左余白（margin-left）の値を変えるだけです。マイナスを大きくするほど密に重なり、小さくすると間隔が開きます。先頭だけは食い込みを打ち消しているので左端が揃います。
文字ではなく実際の写真を入れたいです
spanをimgに差し替え、同じ丸い形と縁のスタイルを当てれば写真にできます。その際は誰の画像か分かるalt属性を必ず付けてください。末尾の「+9」は実際の残り人数と一致させることも大切です。