アバターグループスタック
このパーツは、複数ユーザーのアイコンを少しずつ重ねて並べるアバターグループです。実装は CSS のみで、各アイコンに margin-left:-12px を与えて左方向に重なりを作り、先頭だけ :first-child で重なりを解除します。
解説
このパーツは、複数ユーザーのアイコンを少しずつ重ねて並べるアバターグループです。実装は CSS のみで、各アイコンに margin-left:-12px を与えて左方向に重なりを作り、先頭だけ :first-child で重なりを解除します。白い border で縁取ることで重なっても境界がはっきり見え、末尾の「+5」要素で表示しきれない人数を示します。今回はイニシャル文字を入れていますが、実際の写真にも置き換えられます。
使う場面
- プロジェクトやチームの参加メンバーをコンパクトに見せたいとき
- 「いいね」や閲覧したユーザーを省スペースで一覧したいとき
- グループチャットの参加者をヘッダーに並べるとき
重なり具合は margin-left の負の値で調整でき、数値を大きくすると密に重なります。サイズは width と height をそろえて変更します。注意点として、重なり順は HTML の記述順と描画順で決まるため、手前に見せたいアイコンの位置を意識します。アクセシビリティのため、写真を使う場合は各画像に意味のある alt を、イニシャルだけの場合はツールチップで氏名を補うと親切です。
よくある質問
アイコンの重なり具合を変えられますか
各アイコンに付いている margin-left の負の値を調整します。-12px をより大きな負の値にすると密に重なり、小さくすると間隔が広がります。先頭だけは first-child で重なりを打ち消しているので、そのままで問題ありません。
イニシャルではなく顔写真にできますか
できます。文字を入れている要素を img に置き換え、円形にするため border-radius:50% と object-fit:cover を指定すれば写真版になります。写真には誰のものか伝わる alt 属性を必ず付けてください。