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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ホームページを制作する時にFooterの扱いで困る事が多いので、備忘録 and テンプレートを残しておきます。
 

一言でfooter(フッタ)と言っても、webページ毎にデザインも違うし仕様も扱いも内容も全く違います。
 

コピーライトを文字列で表示しているだけのページもあれば、ヘッダと同じメニューをフッタにも表示させていたり、ヘッダはサイトメニューを表示して、運営会社メニュー(会社概要やプライバシーポリシーなど)をフッタに盛り込んでいるサイトもあります。
 

どの使い方をしても正解・不正解という判断はないのですが、フッタを画面(ページ)の下付きにするという状態は汎用的にやろうとすると、難しいという事は言えます。
 

ちなみに、今回はjavascriptは一切使わずHTML構造とCSSのみを使っての構造体を基本とします。
※その方が無駄にリソースやらブラウザパワーを使わないのでエコシステムですね。

基本構造

ページの構成も今現在では、色々なテンプレートが数多くありますが、今回は、比較的シンプルな1カラム3段構成について考えてみたいと思います。
 

下記のソースコードを基本として使います。
 

 

 


 

フッタ下付きの条件

ヘッダ部
コンテンツ部
フッタ部
 

この3段構成は、ホームページの基本で一番スタンダードな形ですが、この場合にヘッダをfixedとさせる仕様もありますが、今回はこの3要素はstaticとしてscrollさせる仕様で考えます。
 

通常のホームページであれば、ヘッダとフッタ部分は、サイズ固定として考えられますが、コンテンツ部はサイズ可変が一般的です。
 

コンテンツ部分は、すご〜く長くなるケースもあれば、テキスト数行の超短いケースも考えられます。
 

また、構築中などにおいて、空白ページという可能性もあり,、この際に問題になるのが、フッタの定位置です。
 

上記のサンプル画像を見て分かる通り、ページ構成を全てstaticで作った場合に、フッタはコンテンツ部分の下付きになりますが、サイズが小さい場合にフッタは画面下部ではなく、中央部や上部に表示されてしまいます。
 

コンテンツサイズが大きい場合は問題ではないのですが、こうした場合にどのようにすればいいのでしょう?

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

CSSで簡単に行う場合は、コンテンツ部分の最小値をcalc機能を使ってセットします。
 

 


 

.contentsの「min-height:calc(100% – 50px – 100px);」のみを書き換えましたが、画面の下付きになっていることが確認できます。
 

ポイントは、100%からヘッダとフッタのheightサイズを差し引いてあげれば、いいだけなんですね。
 

contents要素が縦に長くなった場合は、自然とフッタはコンテンツ下付きになるので、この点も問題なし。

要点解説

cssの冒頭に記述している、heightの100%はおまじないだと思って記述してください。
※この指定が無いと、それ以下のDOM構造でheightの値が正常に取得できなくなります。
 

 

次にサンプル画像を見て気がつくのは、何故かスクロールバーが表示されているという点です。
 

これを回避するには、bodyなど、基本要素のmargin,paddingを徹底的に無くすという事で、以下のように書いてみました。
 

 


 

無事にスクロールバーも無くなり問題解決です。
 

codepenに最終盤を上げておくので、参考にしてみてください。
 

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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です