ミッション・バリュー 3 列セクション
ミッション・ビジョン・バリューを横 3 列で並べる、会社概要ページの中心になるセクションです。レイアウトは display:grid と grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) で組まれており、画面幅が狭くなると 3 列 → 2 列 → 1…
解説
ミッション・ビジョン・バリューを横 3 列で並べる、会社概要ページの中心になるセクションです。レイアウトは display:grid と grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) で組まれており、画面幅が狭くなると 3 列 → 2 列 → 1 列へ自動で折り返します。各カードの番号（01・02・03）には等幅フォントを当てて桁を揃え、見出しと本文を中央寄せで重ねる素直な構成です。装飾は控えめで、影と角丸だけで上品さを出しています。CSS のみで動き、JavaScript は使いません。
使う場面
- コーポレートサイトの会社概要・理念ページ
- ブランドの 3 つの約束や提供価値の提示
- サービスの強みを 3 本柱で語る導入ブロック
項目数を 3 から増減させても auto-fit が幅を均すため、HTML のカードを足し引きするだけで崩れません。番号アクセントの色やラベル（OUR MISSION）の文字間隔を変えると印象が大きく動きます。本文は読みやすさを優先し、1 カードあたり 2〜3 行に収めると視線が散りません。背景色とカード色のコントラストを保てば、暗い配色のサイトにもそのまま移植できます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
列数を 3 から 4 に増やせますか？
はい。HTML のカードを 1 つ追加するだけで、grid の auto-fit が自動で 4 列に並べ替えます。grid-template-columns を書き換える必要はありません。ただし 1 列あたりが狭くなるので、minmax の最小値を見直すと安定します。
スマホでは何列になりますか？
画面幅に応じて自動で折り返し、最終的に縦 1 列になります。minmax(200px,1fr) の 200px を境にカードが折り返すため、この値を下げれば狭い画面でも複数列を維持できます。