やっと中央に置けたdiv、サイドバーでズレた
CSSで中央寄せしたページは、ブラウザのサイドバーを開くと表示領域の中では正しく中央でも、窓全体では左に寄る。ある開発者がJavaScriptでそのズレを測って戻そうとした顛末が話題に。
ひかり：ねー、ちょっと見てー。このページ、なんか左に寄って見えるんだけど……。えっ、みずきの画面は真ん中? うそっ、おんなじサイトだよっ?
みずき：…サイドバー開いてるでしょ、あんた。ブックマークのやつ。……それ、サイトのせいじゃない。
ことね：まさにその話が、いま海外の技術ブログで盛り上がっているの。……あのね、「四角い箱を画面のど真ん中に置く」って、ウェブ制作の世界では長いこと"難しいことの代名詞"だったのよ。ネタにされ続けた儀式があってね。位置の指定を絶対にして、上から50%、左から50%、そこから自分の幅と高さの半分だけ戻す。4行かけて、やっと真ん中。
ひかり：えー、真ん中に置くだけでっ!? 4行もっ!? ……で、いまは?
ことね：3行。中身を格子状に並べる指定にして、高さを画面いっぱいにして、「中央に置いて」と書く。それだけ。拍子抜けするくらい簡単になったの。……で、この記事を書いた人も自分のブログにそれを使ったのよ。ところが、サイドバーを開いたブラウザで開いてみたら、真ん中に見えなかった。
みずき：…ズレてはないんでしょ。ページが使える幅の中では、ど真ん中。ただ、その"幅"のほうがサイドバーに削られてる。……正しい長方形の、正しい真ん中。人間が見てる長方形とは、別の。
ひかり：んー、じゃあ直せないのー? ズレてる分だけ、えいって戻せばいいじゃんっ。
ことね：まさにそれを試したの。ページが使える幅と、ブラウザの窓ぜんぶの幅は、どちらもJavaScriptから取れる。引き算すればブラウザの枠ぶんが出るから、サイドバーが左にあるなら、その半分だけ戻せばいい。……そこまではよかったのよ。開発者ツールを右側に開いた瞬間、壊れたの。合計は分かるのに、左に何ピクセル、右に何ピクセルという内訳が分からないから。それで最後に頼ったのが、マウスのカーソルなの。カーソルは「画面のどこにいるか」と「ページの中のどこにいるか」を両方持っているでしょう。差を取れば、ページが画面のどのへんに置かれているか逆算できるのよ。……ただ、Firefoxは最初から素直に教えてくれるのに、Chromiumは教えてくれないの。だから「たぶんこのへん」で始めて、カーソルがページに入った瞬間に直すんですって。
みずき：…で、それ誰得なの。……いや、答えは本人が書いてた。自分のブログからは外して「center, actually」っていう拡張機能に移したって。理由が「これはサイト側が全員ぶん決めることじゃなくて、見る人が自分で選ぶもの」。……掲示板でも「サイトは表示領域の外で起きてることを知るべきじゃない」って叩かれてたし。
ひなた：ふぁ〜……給食のおぼんみたいなのです。おぼんのまんなかにお茶わんを置いても、おぼんが机のはしっこにあったら、まんなかには見えないのです。……おぼんを動かすほうが、はやいのですよ。
まとめ：divを中央に置くのは、もう3行で済むようになった。難しいのは、どの長方形を「中央」と呼ぶかのほうだった。