チームメンバープロフィールカード
このパーツは、円形の顔写真・名前・役職をひとまとまりにしたメンバーカードを、 display:grid と repeat(auto-fill,minmax(220px,1fr)) で自動的に並べるチーム紹介セクションです。
このパーツの使いどころと実装ポイント
このパーツは、円形の顔写真・名前・役職をひとまとまりにしたメンバーカードを、display:grid と repeat(auto-fill,minmax(220px,1fr)) で自動的に並べるチーム紹介セクションです。カード数が増えても列の折り返しは CSS が面倒を見るため、メンバーの追加・削除が <li> のコピーだけで済むのが利点です。写真は border-radius:50% と object-fit:cover で丸く切り抜かれ、縦横比の違う写真でも崩れません。
向いている場面
- 士業事務所やクリニックの「スタッフ紹介」
- 制作会社・スタートアップの「メンバー」「採用」ページ
- 講師・コーチを並べるスクールサイト
ホバー時は写真が暗くなり、上に重ねた SNS アイコンが opacity で浮かび上がる仕組みです。アイコンは position:absolute で写真の上に重ねているため、X・LinkedIn・GitHub など人によって数が違っても自然に中央寄せされます。
カスタマイズと注意
役職テキスト team__role の色やサイズを変えるだけで雰囲気が引き締まります。アクセシビリティ面では、alt が空のままだと写真が誰のものか読み上げで分からないため、必ず本人の氏名を alt に入れてください。SNS リンクには aria-label を付け、ホバーでしか出ない情報がタッチ端末でも辿れるよう、リンク自体は常に DOM 上に残す設計にしています。
よくある質問
メンバーの人数が変わっても崩れませんか。
崩れません。グリッドが auto-fill と minmax で列数を自動調整するため、liを増減させるだけで均等に並びます。1人でも7人でも中央寄せの体裁を保てます。
SNSアイコンはホバーでしか出ませんが、スマホでも使えますか。
リンク自体は常にHTML内に存在するため、タップで反応します。ただしタッチ端末ではホバー表示が効かないので、重要なリンクは写真の下に常時表示する形へ調整するのもおすすめです。