HTML CSS フレックスボックスレウアウト(display: flex;)を使って header, footer を作ってみる（最小？）サンプルコード
みなさまこんにちは、ハーツテクノロジーの山崎です。
HTML でヘッダー(header)を作るのは難しくないのですが、フッター(footer)を作るのって意外にも難しくて、ハマりポイントもあり、いろんな方法を紹介してくれるページもたくさんあります。でも、最近のブラウザでは CSS のフレックスボックス flex （注意：flexboxではない）がサポートされていて「いまとなってはこの方法がベストじゃん」と思うものの、ググってみても情報が多すぎて、最小構成のサンプルがみつからず、、、「ならばわしがっっ！」といった気持ちで到達記念魚拓を残すのです。
まぁ、たいした情報じゃないけど、忘れちゃうので（忘れたいので）備忘録です。
リサイズしたときのスクロールバーに注目！
表示画面を小さくリサイズしていくと、まずコンテンツ部分にスクロールバーが出て、隠れ始めます。「ヘッダ」「フッタ」が表示され続けています（ここがポイント）。さらに小さくリサイズしていくと、全体にスクロールバーが表示されます。
コードの解説
解説するほど情報は無いのですが、ポイントを挙げると、メインになるのは以下の４つ。逆に言えば、たったこれだけ。
・display: flex; /* flex を指定 */;
・flex-direction: column; /* 縦方向に並べ */;
・flex-grow: 1; /* この div をがんばって広げる指定 */;
・overflow: auto; /* コンテンツが増えても、フッタが隠れないようにスクロールを指定 */;
あとは、罠が２つほどあるので、
・html tag も body tag も縦サイズ height が最小になるようにデフォルトで設定されている
・body tag にはご丁寧に margin がデフォルトで設定されている
これを回避する指定をすれば目標に到達できます。
CSS の詳細を知りたいひとはこちらflexへどうぞ。
全コード
<!DOCTYPE html>
<!-- HTML CSS display: flex; を使って header-footer を作ってみるテスト -->
<meta charset="UTF-8">
<html style="height: 100%; /* まず html タグを広げる必要がある、ってなかなか気が付かない */;">
<body style="
margin: 0; /* body のデフォルト margin が 0 以外になっているのも罠だよなぁ、、、 */;
height: 100%;
display: flex; /* flex を指定して */;
flex-direction: column; /* 縦方向に並べます */;
">
<div style='background-color: hsla(29, 52%, 72%, 0.5);'>ヘッダ<br>ヘッダ</div>
<div style='background-color: hsla(106, 23%, 63%, 0.5);'>コンテンツ1タイトル</div>
<div style='
flex-grow: 1; /* この div をがんばって広げる指定 */;
overflow: auto; /* コンテンツが増えても、フッタが隠れないようにスクロールを指定 */;
background-color: hsla(106, 23%, 63%, 0.7);
'>
コンテンツ1<br>
コンテンツ1<br>
コンテンツ1<br>
コンテンツ1<br>
</div>
<div style='background-color: hsla(202, 32%, 60%, 0.5);'>フッタ<br>フッタ</div>
</body>
</html>
動作を確認したブラウザ
2020-02-28の時点で動作確認したブラウザは以下です。Windowsのみ。MacOS は機会があったら追加します。
Google Chrome 80.0.3987.122
Firefox 73.0.1
Microsoft Edge 44.17763.8831.0
IE 11.1039.17763.0
みなさまのプログラミングライフの一助になれば幸いです。