- Coding Methodology
- 第21回 フッターのページ下部固定
第21回 フッターのページ下部固定
Webサイトのページは、デザイン時点では一枚の「絵」ですが、サイトが公開されユーザが閲覧するのは、いろいろな解像度やディスプレイサイズのブラウザに表示された「画面」になります。そのため、どんなブラウザ・どんなディスプレイで閲覧されても、そのデザイン意図が反映されるようにするために、コーディング面で独特の注意を払う必要があるケースがあります。
今回はその中から、ページの内容量に関わらず、ページの最下部にフッターを固定する方法をご紹介します。
フッターを固定する理由
コンテンツ量に連動しフッターが上がると
不自然な配置になります
フッターを固定するとコンテンツ量によらず
フッターは下に留まります
フッターがページの最大幅まで広がって、他の部分の背景と異なる色が敷かれているようなデザインの場合、意識せずにコーディングしてしまうと、ページコンテンツ部分のボリュームが少ないときに、本来は画面の一番下にいるはずのフッターが、コンテンツの長さに連動して上がり、ページ下部に不自然な空白(背景)が見えてしまいます。
このようなデザインの場合は、コンテンツの内容量に左右されないでフッターが常に画面の一番下にとどまるように、フッターを固定したコーディングをする必要があります。
手順1:フッターを除くコンテンツの高さを100%にし、フッターを画面からはみ出させる
画面(黒部分)はコンテンツ領域とし、フッターは画面の外にはみ出させます
フッターを下部に固定するために、まずはフッター以外のコンテンツ部分で画面全体の高さを100%にとって、画面をコンテンツ部分で埋め、フッターを『常に画面からはみ出る』状態にします。
たとえばフッターの高さが100pxの場合、右記のような記述になります。
このソースでは、「min-height:100%;」や「height:100%;」などで、コンテンツが少ない場合でも画面の100%よりも高さが低くならないようにしています。この記述で、コンテンツの量が多い場合はコンテンツ量に応じて伸びていき、逆にコンテンツが少ない場合は、ページ全体の高さは画面の100%を下回らない高さである『100%+100px』となります。これでフッターが常に画面からはみ出ている状態を作ることができます。
手順2:ページからはみだしたフッターを持ち上げる
いったんはみ出させたフッターを持ち上げます
上の手順で常にフッターの100pxがページからはみ出る状態になったところで、今度は「margin-top:-100px;」を指定して、フッターをフッター自体の高さ(100px)分強制的に上に持ち上げます。
これで、常にフッターをページ下部に配置することができます。
そして、これだけだとコンテンツ部分とフッターが重なってしまうため、コンテンツ側のmarginやpaddingを指定し、フッター間との余白を調節していきます。
ディスプレイの解像度によってフッター位置は変わってしまうため、デザインをパッと見ただけではフッター固定をしたほうがいいことに気づきにくい場合もあります。また、当初はコンテンツ量の少ないページが存在しなくても、運用中にそのようなページが発生することも考えられます。そのため、ブラウザで確認するときは、コンテンツのボリュームを意識的に変更してフッターの位置を確認する必要があります。