CSSによる擬似フレームに潜む落とし穴

まずった。

Opera for Wii(以下Wipera、勝手に略称付け)をダウンロードして早速自分のホームページにアクセス。おお、予想以上にまともっつーか、数ヶ月前にも似たような感覚を覚えたな、とか思いながらカドゥケウスZ攻略ページを開くと・・・上下にスクロールできない。

理由は分かってる。擬似フレームを利用したせいだ。擬似フレームというのはhtmlとbodyにheight:100%とoverflow:hiddenをつけてから中のボックスにoverflow:autoを与えて、さもframeを使っているかのような視覚効果を生み出すCSSウル技の一つ。

この時bodyの高さ=ウインドウの高さになるのだが、そこに問題がある。

基本的に、ブラウザでページを開いた際に真っ先にフォーカスが移るのはbody(htmlかも)要素になる。そして、キーボードの入力はフォーカスされている要素に送られる。

つまり、どういうことかというと、フォーカスを中の要素に移さない限りキーボードでスクロールに関する一切の操作を受け付けなくなる。

OperaかIEで上記のページを開いて適当なチャプターを開いてからPageDownやPageUpやカーソルキーを押してみよう。恐らく一切スクロールしないはずだ。理由は簡単。フォーカスがあるbodyは既にheight:100%でスクロールしようが無いから。

フォーカスを移すには、クリックするのが一番なわけだが、さすがにそれはインターフェース的によろしくない。

各ブラウザともホイールの操作はマウスが乗っている要素に送られるので、幸いにもマウス派には全く問題無いのだが、閲覧者の中にはキーボード派もいるだろう。となると無視するわけにはいかない。

んで、最初に言ったWipera。Aボタンを押してもフォーカスが移動しない。スクロールするにはわざわざスクロールバーを直接弄らなければいけない。他のブラウザならスクロールバーを弄った時点でフォーカスが移るはずなんだが、それも無し。アンカーで移動してもフォーカスは微動だにせず。

ではどうするか。

・・・・・・どうしよう。

PC用ブラウザならJavaScriptを使うことで、ある程度の補助は可能になる。が、JavaScript無効だと手も足も出ない。

Wiperaはフォーカスを移動させることができない。JavaScriptによる補助もたぶん無理。

となると・・・

ざんねん! わたしのちょうせんは これでおわってしまった!

あー、レイアウト作り直すかー。

補足

Firefoxは通常の要素にもfocusが使えるので、上記ページではFirefoxのみフォーカスが中の要素に合っている。元々focusはフォーム要素に使うものなんだが、Firefoxが正しいかどうかは知らん。このうえなく便利だが。