【webデザイン CSS】flexboxでスプリットスクリーンを作ってみる

スプリットスクリーンとは近年のwebデザインのトレンドの中で広く使われているレイアウト手法で画面を大きく分割することによって対比させ、さらにそれぞれが引き立て合うレイアウトになっています。
PCでは横に分割、モバイルでは縦に分割することでレスポンシブと親和性が高いレイアウト・デザインです。

そのスプリットスクリーンをflexboxを使って作ってみます。
まず大きく分割するのは<header>と<main>にします。
PCとタブレットで表示する時は横に分割して左側フルスクリーンで<header>を表示。右側縦にスクロールで<main>を表示させます。
スマホなどモバイルで表示する場合は縦に並ぶような形で<header>と<main>を表示させます。
<main>の中の画像のカラムレイアウトをPC→タブレット→モバイルでメディアクエリを使って変えていきます。

See the Pen
Split screen layout including responsive by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.

<header>に対してのCSSのポイント

まず分割するに当たってflexboxを使います。
<header>と<main>の親要素は<article>にしていますので<article>にdisplay:flex;を設定します。
ただスマホサイズで表示する場合は分割しませんのでタブレットサイズ以上でflexをかけます。
ということでメディアクエリの@media screen and (min-width:768px){}の中に<article>にdisplay:flex;を適用させます。
そして<header>と<main>の幅をwidth:50%;にします。
結果、ディスプレイ・サイズがタブレット以上になると分割して表示します。

<header>をフルスクリーンに

次に<header>を縦にフルスクリーンにして固定したいと思います。
方法はheightを100vhに設定します。
このvhという単位はviewport heightという意味で表示している画面の割合を設定できます。
100vhということは高さの画面の割合を100%＝フルスクリーンにするということになります。
以上の設定でフルスクリーンで固定されます。
<header>中のタイトル文字を左右で中央、上下で中央に配置したいと思います。
これもflexboxを使用します。
ここは全サイズで割り当てたいのでメディアクエリの中には記述せず最初の方で記述しておきます。
まずdisplay: flex;をheaderに記述します。
その下にjustify-content: center;を記述します。
これは左右で中央にそろえる設定です。
次にalign-items: center;を記述します。
これは上下で中央にそろえる設定です。

<main>を縦スクロールできるよう設定

次に<main>の中身を縦にスクロールできるよう記述してみます。
まず<header>と同様にタブレットサイズ以上で横に並びにし、さらにスクロールできるように@media screen and (min-width:768px){}の中に記述していきます。
width: 50%;にしてheight: 100vh;に設定します。
これは<header>と同様になります。
ですがこのままだと<main>の高さがフルスクリーンで固定されてスクロールしなくなります。
スクロールさせるためにoverflow-y: scroll;を追加します。
これにより縦がフルスクリーンで表示されていても内容がオーバーフローしている場合
スクロールして全部が表示できるようになります。
ここまででスプリットスクリーンの基本ができました。

メディアクエリを使ったレイアウトの変更〜タブレットで表示したら

細かいところですが画像の並びをディスプレイ・サイズで変えてみます。
クラス名photo1の中にある3枚ある画像をタブレットサイズの場合は最初の画像を幅100%にして2枚目3枚目の画像を50%にしてみます。
このクラス名photo1にもdisplay: flex;を記述して横並びにしていきますがflex-wrap: wrap;を追加して折り返しできるようにしておきます。

クラス名photo3も同様に折り返しできる設定をしておきます。
photo3にdisplay: flex;とflex-wrap: wrap;を設定し、中にある画像の幅を4枚ともwidth: 50%;にしておきます。

メディアクエリを使ったレイアウトの変更〜PCで表示したら

PCサイズで表示した時にクラス名photo1の画像を折り返さずに横並びで表示させます。
@media screen and (min-width:990px){}の中で記述することでPCサイズ以上で設定が反映されるようになります。
photo1にflex-wrap: nowrap;を記述し、折り返さないよう設定します。
そしてphoto1の中にある3枚の画像サイズを全部width: 33.33%;にします。