読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

footer下部固定で痛い目を見た

HTML&CSS pitfalls

 ウェブサイトをリニューアルしようとしたのだけれど、リモートに設置してタブレットや手持ちのバキバキに画面が割れているiPhone 4sでテストをしたらなぜかモバイルのときだけ画面がスクロールしなくなる現象がおこったために、断念してしまった。
 いままで作ったことの無かったサーバー側でのテスト環境を用意して対策を行った。
 原因を考えてみると、いろいろとプラグインを入れたこともあって、当初は専らパフォーマンスの問題に思われた。チューニングのインプットをして対策をしたり、いらないHTTPをできるかぎり減らしたりした。が、大きな変化は無い。
 まったく予想がつかなかったので、適当に検索をかけまくっていたところ、以下の記事に出会った。

 厳密には違うものの似たようなケースだと思って読んでいくと、bodyのoverflowが云々というのが目に入ってピンと来た。
 footerの下部固定というのは、stack overflowなどを見ていてもこれという解が定まっていないように思えるCSSの中でも微妙な部分だ。自分のケースでは、『Web Standards Design』のp378からの記述に従っている。
 該当の箇所を見てみると、やはり怪しい記述があった。

html,
body {
    height: 100%;
    overflow: auto; /* Opera 9.5x以降向け*/
}

 ここのoverflow:auto;が全ての元凶だった。これをスマホの時に適用されないようにして解決(今回のサイトはモバイルファーストに作られていないので、後からメディアクエリでoverflowの初期値であるvisibleで上書き)。

 おかげでデザインのリニューアルが遅れてしまったのだけれど(他にも問題が見つかってしまってまだできていない。あと、テスト環境を作る中でコピーを繰り返してしまい、どれがメインなのかがややあやふや。Gitの出番か……)、このoverflow:auto;のおかげで、サーバーでのテスト環境の作り方やiPhoneMac Bookをつないだ検証のやり方などが身に付くことになった(あとはチューニングへの関心)ので、結果オーライだと思いたい。

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

この本は2009年の年明けに改訂版が出たのだけれど、今なおその記述は有効であると言うWeb関連書では稀有な本です。