レイアウト

ページやセクションの骨組み

• ヒーローセクション ページの一番上に置く、大きな背景と見出し・リード文・CTA ボタンで構成する導入部分。
• カードグリッド 複数のカードを格子状に並べるレイアウト。画面幅に応じて列数が自動で変わることが多い。
• ベントグリッド 大きさの異なるタイルを弁当箱のように組み合わせて並べるグリッドレイアウト。
• メイソンリーレイアウト 高さの異なるカードを、隙間なくレンガ状に敷き詰めて並べるレイアウト。
• スプリットスクリーン 画面を左右（または上下）2 つの領域にきっぱり分けて、それぞれ別の内容を見せるレイアウト。
• 2 カラムレイアウト 本文とサイドバーなど、ページを左右 2 つの列に分けるレイアウト。狭い画面では 1 列に切り替える。
• 追従サイドバー 本文をスクロールしても、サイドバーだけが画面内に留まってついてくるレイアウト。
• フルスクリーンセクション 画面の高さいっぱいを使うセクションを縦に連ねて、1 画面ずつ見せていくレイアウト。
• 動画背景 ヒーローセクションなどの背景に、ループ再生する動画を敷くレイアウト演出。
• ブロークングリッド グリッドの区画から要素をあえてはみ出させ、重ねて配置する崩したレイアウト。
• レスポンシブデザイン 同じ HTML を、画面の幅に応じて見た目やレイアウトを変えて表示する設計の考え方。