[HTML + CSS] WEBページ構成テンプレート「フッタを画面下付きにする方法」

2019/06/08

テクノロジー プログラミング

t f B! P L
ホームページを制作する時にFooterの扱いで困る事が多いので、備忘録 and テンプレートを残しておきます。 一言でfooter(フッタ)と言っても、webページ毎にデザインも違うし仕様も扱いも内容も全く違います。 コピーライトを文字列で表示しているだけのページもあれば、ヘッダと同じメニューをフッタにも表示させていたり、ヘッダはサイトメニューを表示して、運営会社メニュー(会社概要やプライバシーポリシーなど)をフッタに盛り込んでいるサイトもあります。 どの使い方をしても正解・不正解という判断はないのですが、フッタを画面(ページ)の下付きにするという状態は汎用的にやろうとすると、難しいという事は言えます。 ちなみに、今回はjavascriptは一切使わずHTML構造とCSSのみを使っての構造体を基本とします。 ※その方が無駄にリソースやらブラウザパワーを使わないのでエコシステムですね。

基本構造

ページの構成も今現在では、色々なテンプレートが数多くありますが、今回は、比較的シンプルな1カラム3段構成について考えてみたいと思います。 下記のソースコードを基本として使います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <title>header-footer-template</title> <link rel="stylesheet" href="frame.css" /> </head> <body> <div class="header">Header</div> <div class="contents">Contents</div> <div class="footer">Footer</div> </body> </html> html,body{ width:100%; height:100%; } .header{ width:100%; height:50px; background-color:#FAA; } .footer{ width:100%; height:100px; background-color:#AAF; } .contents{ width:100%; min-height:300px; background-color:#FFA; }

フッタ下付きの条件

ヘッダ部 コンテンツ部 フッタ部 この3段構成は、ホームページの基本で一番スタンダードな形ですが、この場合にヘッダをfixedとさせる仕様もありますが、今回はこの3要素はstaticとしてscrollさせる仕様で考えます。 通常のホームページであれば、ヘッダとフッタ部分は、サイズ固定として考えられますが、コンテンツ部はサイズ可変が一般的です。 コンテンツ部分は、すご〜く長くなるケースもあれば、テキスト数行の超短いケースも考えられます。 また、構築中などにおいて、空白ページという可能性もあり,、この際に問題になるのが、フッタの定位置です。 上記のサンプル画像を見て分かる通り、ページ構成を全てstaticで作った場合に、フッタはコンテンツ部分の下付きになりますが、サイズが小さい場合にフッタは画面下部ではなく、中央部や上部に表示されてしまいます。 コンテンツサイズが大きい場合は問題ではないのですが、こうした場合にどのようにすればいいのでしょう?

コンテンツ部の最小サイズを決める

CSSで簡単に行う場合は、コンテンツ部分の最小値をcalc機能を使ってセットします。 html,body{ width:100%; height:100%; } .header{ width:100%; height:50px; background-color:#FAA; } .footer{ width:100%; height:100px; background-color:#AAF; } .contents{ width:100%; min-height:calc(100% - 50px - 100px); background-color:#FFA; } .contentsの「min-height:calc(100% - 50px - 100px);」のみを書き換えましたが、画面の下付きになっていることが確認できます。 ポイントは、100%からヘッダとフッタのheightサイズを差し引いてあげれば、いいだけなんですね。 contents要素が縦に長くなった場合は、自然とフッタはコンテンツ下付きになるので、この点も問題なし。

要点解説

cssの冒頭に記述している、heightの100%はおまじないだと思って記述してください。 ※この指定が無いと、それ以下のDOM構造でheightの値が正常に取得できなくなります。 html,body{ width:100%; height:100%; } 次にサンプル画像を見て気がつくのは、何故かスクロールバーが表示されているという点です。 これを回避するには、bodyなど、基本要素のmargin,paddingを徹底的に無くすという事で、以下のように書いてみました。 html,body{ width:100%; height:100%; margin:0; padding:0; border:0; } 無事にスクロールバーも無くなり問題解決です。 codepenに最終盤を上げておくので、参考にしてみてください。

See the Pen footer-position by YugetaKoji (@geta1972) on CodePen.

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ