シリーズ第22回は、これまで学習してきたフレックスボックスを使って「聖杯レイアウト」を作成してみたいと思います。多くのサイトで採用されているレイアウトを実際に記述しながら、書いてみましょう。
聖杯レイアウトとは？
まず画像で見てみるとよくわかると思います。これを目標物として記述していきたいと思います。
目標物
こんな感じで、上にヘッダー、メイン部分が3カラムになっており、下にフッターがあるレイアウトのことを「聖杯レイアウト」と呼んでいます。
以前はこのレイアウトを作ることがとても難しい時代がありました。それを、”聖杯を見つけることは困難”という昔の西洋の考えに例えて、「聖杯レイアウト」と呼ばれるようになったそうです。
現在ではCSSでフレックスやグリッドなど、レイアウトを簡単に作るためのプロパティが開発されました。今回は、これまでの回で学習してきたフレックスボックスの考え方を用いて、基本的な聖杯レイアウトを作っていきたいと思います。
ベースとなるHTMLとCSS
以下のファイルを基に聖杯レイアウトを作っていきます。
HTML
<body>
<header>header</header>
<div>
<nav>left</nav>
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>
構成は簡単です。body内にヘッダーとフッター、その間にdivタグで囲われたnav(left)とmain(center)とaside(right）が入っています。
聖杯レイアウトで左側はナビゲーションメニューが、右側には他の二次的な情報が来ることが多いため、navとasideという要素を用いています。
CSS
body {
margin: 0;
}
header {
outline: 1px solid gray;
background-color: lightcyan;
}
main {
outline: 1px solid gray;
}
nav {
outline: 1px solid gray;
}
aside {
outline: 1px solid gray;
}
footer {
outline: 1px solid gray;
background-color: lightcyan;
}
まず、デフォルトの余白をリセットするため、bodyにmargin: 0; があたっています。見た目で分かりやすいように、ヘッダーとフッター、メイン内の3つ要素にはアウトラインをつけています。ヘッダーとフッターには背景色も設定しています。
この状態でブラウザに表示すると、次の画像のようになります。
では、少しずつ目標物に近づけていきましょう。
div内の要素を横並びにする
これは、フレックスボックス（１）～（３）までで学んできた通り、display: flex; を使います。nav,main,asideの親要素であるdivに対してdisplay: flex;を記述します。
画像のように、div内の各要素が横並びになりました。
mainを横幅いっぱいに広げる
前回解説したflexプロパティを使います。これは、1つのコンテナ内でどのような比率でアイテムを配置するかを指定できるプロパティでした。
今回は、main(center）を横幅いっぱいに配置したいので、main要素だけに flex: 1; を書いてみましょう。
思った通りmain(center)が横いっぱいに広がりましたね。
widthやheightを設定する
目標物に近づけていくために、ヘッダーとフッターにheight(高さ)100pxをあてます。div内のnav(left)には150px、aside(right)には200pxのwidth(幅)をあててみましょう。
画像のように表示されたでしょうか。
後は、div内の要素が縦幅いっぱいに広がるようにしたいですね。どうすればよいでしょか。
縦幅いっぱいに広がるようにする
結論から言えば、まずbodyに対して次のように記述します。
min-height: 100vh;
vhとは？
これは、幅の何パーセントを占めるかを指定する書き方です。100vhの場合は、表示できる幅の100％ということです。上の場合はheight(高さ)が表示できる100％まで広がるという意味になります。
min-heightとは？
heightの前に min がついていることにも注目できます。このように記述すると、”最低でも高さ100％に広がる”という指定になります。単にheightだけの場合は、div内の要素の内容が増えた時に見切れが生じてしまいます。それで、min-heightというプロパティを使って記述しておきます。
これで縦幅いっぱいに広げるための下準備ができました。実際に広げるためには、ブロックボックスで学んだプロパティをさらに使っていきます。
flexプロパティを使う
先程も flex: 1; を記述することによって、横幅いっぱいに広げることをしましたが、今度は縦方向に広げるためにdiv要素に対して使っていきます。
ただ、flexプロパティは親要素が display: flex; をもっている場合にスタイルがききます。今回の場合はbodyが親要素になります。それで、body要素にdisplay: flex; を記述してください。
単にdisplay: flex; だけだと横並びになってしまします。軸を縦方向に変える必要があります。軸を変えるためのプロパティを思い出せるでしょうか。
flex-directionを使う
これが軸の方向を変えるためのプロパティでした。今回の場合、縦方向にいっぱいに広げるために flex-direction: column; を使います。div内の3つの要素が縦幅いっぱいに広がるようにしたいので、やはり親要素であるbodyに、flex-direction: column と記述します。
最後に、縦幅いっぱいにdiv内の要素を広げるために、divに対して flex: 1; を記述します。
目標物のようになったでしょうか。
記述後のCSS
記述後のCSSはこうなっています。
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column
}
header {
outline: 1px solid gray;
background-color: lightcyan;
height: 100px;
}
div{
display: flex;
flex: 1;
}
main {
outline: 1px solid gray;
flex: 1;
}
nav {
outline: 1px solid gray;
width: 150px;
}
aside {
outline: 1px solid gray;
width: 200px;
}
footer {
outline: 1px solid gray;
background-color: lightcyan;
height: 100px;
}
まとめ
初心者もできる！プログラミング基礎講座【第22回】はいかがでしたか。今回はフレックスボックスを使って「聖杯レイアウト」を作ってみました。これまで学習してきたことを応用する形でレイアウトを作ってみました。こんなふうに実践的な仕方で学んでいくと楽しいですね！
では、次回もお楽しみに！