MVV 3カラム
「MVV 3カラム」は、Mission・Vision・Value を 3 つのカードに分けて横並びで見せる企業理念セクションです。 display:grid と grid-template-columns:repeat(3,1fr) で均等な 3 列を作り、各カードは小さなラベル（MISSION 等）と短い宣言文だ…
このパーツの使いどころと実装ポイント
「MVV 3カラム」は、Mission・Vision・Value を 3 つのカードに分けて横並びで見せる企業理念セクションです。display:grid と grid-template-columns:repeat(3,1fr) で均等な 3 列を作り、各カードは小さなラベル（MISSION 等）と短い宣言文だけで構成しています。情報を削ぎ落とすことで、それぞれの言葉が際立つ落ち着いた印象になります。
向いている場面
会社概要ページの理念紹介、採用サイトのカルチャー説明、スタートアップのブランドステートメントなどに向きます。3 つの柱を同じ重みで対比的に見せたいときに最適です。
カスタマイズと注意点
- ラベルの英字と日本語のコピーを差し替えるだけで使えます。各カードの宣言文は文量をそろえると高さが揃い、整然と見えます。
- 3 つそれぞれに補足説明を足したい場合は
h3の下にpを加えますが、入れすぎると要点がぼやけるため簡潔さを保ちます。 - レスポンシブは
max-width:680pxで 1 列の縦積みに切り替わる指定済みです。見出しの行の高さは詰めすぎず、読みやすい余白を残してください。
よくある質問
Mission・Vision・Value以外の3項目にも使えますか？
使えます。ラベルと見出しを差し替えれば、サービスの3つの強みや事業の3本柱など、同じ重みで並べたい3項目の紹介に応用できます。
各項目に説明文を足したいときは？
見出しのh3の下に短いpタグを追加します。ただし文量は3項目で揃えると高さがそろい、入れすぎると要点がぼやけるので簡潔にまとめるのがおすすめです。