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 みなさまのプログラミングライフの一助になれば幸いです。
みなさまこんにちは、ハーツテクノロジーの山崎です。
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 は機会があったら追加します。
みなさまのプログラミングライフの一助になれば幸いです。
100日チャレンジの251日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 251日目は、 おはようございます251日目・webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 27, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
251日目は、
おはようございます251日目・webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 27, 2020
おはようございます251日目・webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
