2007/07/23

[技術系]   これじゃダメじゃん>天地中央

at 15:50JST
 
別に「Webヒョウジュン」のようなバカの好きなことばとは関係なく、これってうまく使えないことが多い気がする。

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU
http://blog.creamu.com/mt/2007/07/cssdivlocate_div_at_the_center.html

ミニマルモデルで示すと、
<html> 
<body>
<div
style="
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
width: 400px;
height: 200px;

border: 1px solid black;
"
>
aaaa
</div>
</body>
</html>


こういうことなんだけど、これって
「ウインドウサイズが天地左右中央にしたいボックスより小さいと、
 そのボックスの上辺・左辺が消えてしまう」
よね。

具体的に
http://blog.creamu.com/
で示すと(XP+IE7使用。Firefox系も同じ)、ウインドウサイズが十分に大きい場合は
20070723cssmage1.png

となって期待通りだが、小さくしてみると
20070723cssmage2.png

といったように上辺・左辺が欠ける。というか四辺全部が欠けるということなんだけどね。

欠けるのが下辺・右辺だけならいいのだが、上辺・右辺が欠けると
・違和感がある
・ナビゲーションバーなど上辺・右辺に配することが多いパーツが消える
という問題点がある。特に後者が致命的。

「こまけーこといってんじゃねーよ。
 こんなウインドウサイズにして見るヤツいねーよぼけー」
とか言う? いや、そうじゃなくて…天地左右中央にボックスを配置したいのって、
「描画領域をXGA(1024×768ドット)決め打ちで作っているサイトを
 SXGA・WXGAディスプレイで見たとき、
 描画領域を中央にもってくることでつじつまを合わせたい」
場合が多いじゃない? そういうケースで描画領域がスクロールバーなどの分量を計算に入れていないとき、XGAディスプレイでフルスクリーン表示しても上辺・左辺が欠けてしまうんだよね。

おまけに、スクリーンショットを見てもわかるように、上辺・左辺に向かって消えてしまった領域はスクロールバーの操作で呼び出すこともできないので、万一VGA環境なんかで見たら死ぬほど悲惨なことになる。

ということなので、この手法は使う場所を考えないといけないと思う。

めんどくさいねー。もっと簡単に天地中央にしたいよねー。…はっ! いま、誰もが納得するうえにインターオペラビリティ豊かな解決策を思いついたよ!! それはtabl(以下Web標準原理主義者による検閲で削除)
関連しそうな過去記事:
さらに過去の記事
2009/04 (1)   2008/12 (3)   2008/11 (9)   2008/10 (10)   2008/09 (20)   2008/08 (2)   2008/07 (23)   2008/06 (16)   2008/05 (22)   2008/04 (11)   2008/03 (21)   2008/02 (20)   2008/01 (21)   2007/12 (32)   2007/11 (37)   2007/10 (46)   2007/09 (63)   2007/08 (33)   2007/07 (41)   2007/06 (81)   2007/05 (173)   2007/04 (168)   2007/03 (113)   2007/02 (123)   2007/01 (92)   2006/12 (111)   2006/11 (185)   2006/10 (20)  
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。