スプリット 50/50 セクション
スプリット 50/50 セクションは、画面を左右に二分してテキストとビジュアルを対比させる構成です。この実装は CSS Grid の grid-template-columns:1fr 1fr で均等な2カラムを作り、左にはメッセージ、右にはビジュアル用のブロックを置いています。
解説
スプリット 50/50 セクションは、画面を左右に二分してテキストとビジュアルを対比させる構成です。この実装は CSS Grid の grid-template-columns:1fr 1fr で均等な2カラムを作り、左にはメッセージ、右にはビジュアル用のブロックを置いています。左側は flex の縦中央寄せで文章を見やすく整え、右側はサンプルとしてグラデーション背景を当てています。実際の制作では右側に写真や図版を差し替えて使います。
使いどころ
- サービス紹介で、説明と画像を並べる
- ヒーロー直下のメッセージ＋イメージ
- 特長を一項目ずつ左右交互に見せる連続セクション
狭い画面では max-width:680px で1カラムに切り替わり、縦積みになります。左右の比率を変えたいときは grid-template-columns を 3fr 2fr のように書き換えます。右側を実画像にする場合は img に width と height、loading="lazy"、意味のある alt を付けると表示と読み上げの両方で親切です。
よくある質問
左右の比率を変えられますか
はい。grid-template-columns の 1fr 1fr を 3fr 2fr などに書き換えるだけで、左右の幅の割合を自由に調整できます。
スマホでは左右どちらが上に来ますか
1カラムに切り替わると、HTMLで先に書かれた左のテキストが上、ビジュアルが下になります。順番を逆にしたい場合はHTMLの並びを入れ替えてください。