フッタを下部に固定する

WEBサイトやブログを作る際に、コピーライトなどを表記するブロック要素のフッタ領域を、ウィンドウ下部に固定してしまう方法。

サイトのデザインをある程度し終えてブラウザで確認したときに気になるのが、サイト下部にぽっかりと余っている空白部分。この空白部分というのは、ブラウザの解像度に対してサイト全体の高さの設定値が小さい場合に出来てしまいます。



特に何も設定していなければ、HTMLでは自動的に上詰めになってしまうのでこのようになりますが、余白があまりに目立って嫌なので、フッタ領域だけは下部に固定して表示したいって場合、CSSでちょこっと弄ってやることで簡単に変更できます。

フッターを画面の下に表示
フッタ固定
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』

上記の記事などのような方法で、フッタ領域だけを下部にピッタリと固定することが出来ます。ブログによって方法が違うように見えますが、基本的には同じです。



いまいちCSSでの設定がよく分からないという人は、JavaScriptを使うだけで更に簡単に固定をする方法もあります。

footerをウィンドウ下部に固定する『footerFixed.js』

JavaScriptで使用するフッタにIDを指定してあげるだけで簡単にフッタを下部に固定できてしまうので、CSSでの設定がよくわからないという人でもオススメの方法だと思います。

しかし、数年前まではフッタ固定の方法は、これらの方法で何の問題もなかったのですが、iPhoneやiPadなどのスマートフォンが台頭してきてから面倒なことが起きました。元々フッタの固定には「Position: fixed」を使うことによって固定をしていたわけですが、この方法がiPhoneやiPadなどのスマートフォンに搭載されているSafariで確認すると無効化されてしまうのです。

その為、これらの従来の方法で設定しているサイトを見ると、フッタ領域がページの中央部分などに被ってたりしてしまっています。もはやフッタとしての役目をまったく果たしていないどころか、折角作ったデザインも台無しになってしまいます。しかもこれらの現象を「Safariの仕様だから!」とSafari側が言ってしまってるので、PC用とスマートフォン用でCSSを分けるしか無いのかと思ったわけですが、フッタの為だけにそれは流石に馬鹿らしいってことで調べたら既に解決法がありました。

iPhone / iPadなどでposition: fixedが利用できる「iScroll」

このiScrollというJavaScriptを使うことによって、スマートフォンに搭載されているモバイル用Webkitでもヘッダやフッタなどの要素を固定してやることが出来るようです。

下部固定に拘らなければこんな面倒なことに悩む必要は当然ありませんし、スマホは別に対応しなくていいと言ったらそれまでですが、現状でスマートフォンの対応をするのはWEBデザインをする上で必須になってきていると思うので、気になっている人は、是非試してみてください。

iScroll