3 列メンバー紹介カード
3 列メンバー紹介カードは、丸いアバターの下に名前・役職・短いプロフィールを縦に並べる、会社紹介やチームページの定番フォーマットです。並びは grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) で組み、ウィンドウ幅が狭まると 3 列が 2 列・1 列へと…
解説
3 列メンバー紹介カードは、丸いアバターの下に名前・役職・短いプロフィールを縦に並べる、会社紹介やチームページの定番フォーマットです。並びは grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) で組み、ウィンドウ幅が狭まると 3 列が 2 列・1 列へと自然に折り返します。アバターは border-radius:50% で円形にし、place-items:center でイニシャル文字を中央に置いています。マークアップは figure と figcaption を使った意味のある構造です。
こんなときに便利
- コーポレートサイトの「私たちについて」ページ
- 士業・クリニックなどスタッフ紹介が信頼につながる業種
- イベントの登壇者・講師一覧
サンプルはイニシャル＋グラデ背景ですが、実運用では円形の枠に実際の顔写真を入れると一気に本物らしくなります。写真は object-fit:cover で円にトリミングしてください。人数が増えたら figure ブロックを追加するだけで列が自動で増えていきます。最小幅 minmax の値を上げれば 1 枚あたりを大きく、下げれば多列に詰められます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
メンバーの人数を増やすにはどうしますか？
figure ブロックを追加でコピーするだけです。グリッドが auto-fit なので、要素数に応じて列が自動で増減し、レイアウトを手で組み直す必要はありません。
イニシャルの代わりに顔写真を入れられますか？
はい。アバターの円の中に img を置き、object-fit:cover を指定すれば円形にトリミングして表示できます。実写を入れるとチーム紹介としての説得力が上がります。