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

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が正しいかどうかは知らん。このうえなく便利だが。

Info

Navigation

関連のあるエントリ: 2006-01-20 枠付きグラデで四角い角を丸くする - Nifty++; 2007-06-18 ニコニコ動画視聴補助CSS; 2007-05-16 あの素晴らしいCSSを二度三度; 2008-04-20 Stylishで快適にユーザースタイルシートを書くための覚書; 2008-04-20 Stylishで偏執的なレイアウトを作成するための覚書
新しいエントリ（日付順）: カドゥケウスZ タイムアタック
古いエントリ（日付順）: 風来のシレンDSの出来がひどい

SBM Comments

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2006
1223

Tagscss