コーディングメソドロジー

第21回 フッターのページ下部固定

Webサイトのページは、デザイン時点では一枚の「絵」ですが、サイトが公開されユーザが閲覧するのは、いろいろな解像度やディスプレイサイズのブラウザに表示された「画面」になります。そのため、どんなブラウザ・どんなディスプレイで閲覧されても、そのデザイン意図が反映されるようにするために、コーディング面で独特の注意を払う必要があるケースがあります。
今回はその中から、ページの内容量に関わらず、ページの最下部にフッターを固定する方法をご紹介します。

フッターを固定する理由

フッターを固定する理由

コンテンツ量に連動しフッターが上がると
不自然な配置になります

フッターを固定する理由

フッターを固定するとコンテンツ量によらず
フッターは下に留まります

フッターがページの最大幅まで広がって、他の部分の背景と異なる色が敷かれているようなデザインの場合、意識せずにコーディングしてしまうと、ページコンテンツ部分のボリュームが少ないときに、本来は画面の一番下にいるはずのフッターが、コンテンツの長さに連動して上がり、ページ下部に不自然な空白(背景)が見えてしまいます。
このようなデザインの場合は、コンテンツの内容量に左右されないでフッターが常に画面の一番下にとどまるように、フッターを固定したコーディングをする必要があります。

手順1:フッターを除くコンテンツの高さを100%にし、フッターを画面からはみ出させる

手順1

画面(黒部分)はコンテンツ領域とし、フッターは画面の外にはみ出させます

フッターを下部に固定するために、まずはフッター以外のコンテンツ部分で画面全体の高さを100%にとって、画面をコンテンツ部分で埋め、フッターを『常に画面からはみ出る』状態にします。
たとえばフッターの高さが100pxの場合、右記のような記述になります。
このソースでは、「min-height:100%;」や「height:100%;」などで、コンテンツが少ない場合でも画面の100%よりも高さが低くならないようにしています。この記述で、コンテンツの量が多い場合はコンテンツ量に応じて伸びていき、逆にコンテンツが少ない場合は、ページ全体の高さは画面の100%を下回らない高さである『100%+100px』となります。これでフッターが常に画面からはみ出ている状態を作ることができます。

手順2:ページからはみだしたフッターを持ち上げる

手順2

いったんはみ出させたフッターを持ち上げます

上の手順で常にフッターの100pxがページからはみ出る状態になったところで、今度は「margin-top:-100px;」を指定して、フッターをフッター自体の高さ(100px)分強制的に上に持ち上げます。
これで、常にフッターをページ下部に配置することができます。
そして、これだけだとコンテンツ部分とフッターが重なってしまうため、コンテンツ側のmarginやpaddingを指定し、フッター間との余白を調節していきます。

ディスプレイの解像度によってフッター位置は変わってしまうため、デザインをパッと見ただけではフッター固定をしたほうがいいことに気づきにくい場合もあります。また、当初はコンテンツ量の少ないページが存在しなくても、運用中にそのようなページが発生することも考えられます。そのため、ブラウザで確認するときは、コンテンツのボリュームを意識的に変更してフッターの位置を確認する必要があります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム