そんな疑問にお答えします。
まず聖杯レイアウトとは何かといいますと、天地にヘッダー、フッターがあり中央にコンテンツとその左右にサイドバーがあるレイアウトのことです。
左のサイドバーにはナビゲーション、右のサイドバーにはサブコンテンツやバナーなどが配置されているレイアウトはいろんなWebサイトで目にします。
このレイアウトをFlexboxとGridそれぞれを用いて作ります。
今回はFlexbox編です。
実際に作ってみることで使い勝手や特徴が理解でき、応用も効くようになります。
どんどんと自分の引き出しを増やしていきましょう。
Flexboxを用いた聖杯レイアウト
コード
<body>
<header>header</header>
<div>
<nav>left</nav>
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>body {
min-height: 100vh;
display: flex;
flex-direction: column;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
header {
height: 200px;
}
div {
display: flex;
flex: 1;
}
main {
flex: 1;
}
nav {
width: 200px;
}
aside {
width: 200px;
}
footer {
height: 200px;
}
@media (max-width: 960px) {
body,nav,aside {
width: 100%;
}
div {
flex-direction: column;
}
}
解説
<body>
<header>header</header>
<div>
<nav>left</nav>
<main>center</main>
<aside>right</aside>
</div>
<footer>footer</footer>
</body>HTMLの構成は、body内にheader、div、footerと並んでいます。
divの中にはnav(left)とmain(center)とaside(right)が入っています。
cssをまだ当てていない状態ではこうなります。
まずnav、main、asideを横並びにします。
それらの親要素のdivに display: flex; を指定。
nav、asideの幅は200pxの固定幅とします。
mainはそれらの幅を除いた残り全部としたいので flex: 1; と指定します。
こうすることで中央のみ可変のレイアウトとなります。
現時点ではこうなっています。
次に高さを調整します。
header、footerの高さを200pxとします。
そして親要素はつねに縦幅が画面サイズ以上になるようにします。
ですのでbodyの高さを画面一杯にします。
height: 100vh;で一杯にできますが、これだとコンテンツの量が多くなると見切れてしまうので最低でも100vhは確保するということで min-height: 100vh; と指定します。
さらに横幅のときと同様に今度はdivの高さをheader、footerの高さを除いた全部とする指定をかけます。
body {
min-height: 100vh;
display: flex;/*追加*/
}
div {
display: flex;
flex: 1; /*追加*/
}
divに対してflex: 1としますが、そのためには親要素をdisplay: flex;にしないといけません。
よってbodyに display: flex; を指定します。
しかしこうするとbody内の子要素が横並びになってしまいます。
これを縦に並べたいのでbodyにさらに flex-direction: column; を指定します。
body {
min-height: 100vh;
display: flex;
flex-direction: column;/*追加*/
}
レスポンシブ対応
画面サイズが小さい場合には縦に並ぶようにします。
@media (max-width: 960px) {
body,nav,aside {
width: 100%;
}
div {
flex-direction: column;
}
}現在divに対してはdisplay: flex;が指定されています。
これを flex-direction: column; とすることで縦並びとなります。
さらにnavとasideにはwidth: 200px;と固定幅が指定されているのでこれをwidth: 100%;とし横幅一杯にします。
ちなみにheaderの次にメイン要素（center）をもってきたいなら、mainの要素に対して order: -1; と指定すればOKです。
@media (max-width: 960px) {
body,nav,aside {
width: 100%;
}
div {
flex-direction: column;
}
main {
order: -1;/*追加*/
}
}
orderプロパティはFlexboxアイテムの配置する順番を指定します。
初期値はゼロ。
-1と指定することでFlexbox内の先頭にもってきています。
まとめ
-
display: flex;
-
flex: 1;
-
flex-direction: column;
-
min-height: 100vh;
これらの使い方の意味をしっかり理解しましょう。
投稿者 トシ
コメントを残す