チームメンバー グリッド
「チームメンバー グリッド」は、顔写真・名前・役職・ひとことを カード形式で並べたチーム紹介セクション です。Grid の repeat(auto-fit,minmax(240px,1fr)) で組まれているため、画面幅に応じて1行に入る人数が自動で増減し、列数を手で指定しなくても自然に折り返します。
このパーツの使いどころと実装ポイント
「チームメンバー グリッド」は、顔写真・名前・役職・ひとことをカード形式で並べたチーム紹介セクションです。Grid の repeat(auto-fit,minmax(240px,1fr)) で組まれているため、画面幅に応じて1行に入る人数が自動で増減し、列数を手で指定しなくても自然に折り返します。写真にカーソルを合わせると、上にSNSリンクのオーバーレイがふわっと現れる仕掛けです。
向いている場面
- 採用ページやAboutページのメンバー紹介
- 士業・クリニックのスタッフ紹介
- スクールや教室の講師一覧
人数が変わってもカードを増減するだけでレイアウトが追従するのが利点です。役職や肩書きの長さがバラついても、auto-fit が高さをそろえてくれます。
実装上の注意
顔写真は実在のストック人物写真を使い、AI生成の顔や架空の人物に見えるものは避けます。各 img の alt には本人の名前を入れて読み上げに配慮しましょう。SNSリンクはホバーで出る設計のため、タッチ操作の端末ではホバーが効きません。スマホ利用が多いサイトでは、リンクを常時表示にするか、カードのタップで開く形に変えると取りこぼしを防げます。
よくある質問
メンバーが何人でもレイアウトは崩れませんか
崩れにくい設計です。auto-fitとminmaxで1列の最小幅を決めているため、人数や画面幅が変わっても自動で折り返して均等に並びます。3人でも12人でも、カードを増減するだけでバランスが保たれます。
スマホでもSNSリンクは押せますか
標準ではホバーで表示する設計なので、ホバーのないスマホでは出にくいことがあります。タッチ端末向けにはSNSリンクを常時表示にするか、カードをタップしたら開くようにCSSやJavaScriptを調整すると確実です。