裏・きぎょうにっき powered by 杉田ともゆき
起業→成長→上場までの過程を日々更新していきます。 ※公式ブログのサーバーが重いため裏・きぎょうにっきを始めました。

きぎょうにっきは引っ越しました。
http://blog.fruitmail.net/vshare/
裏・きぎょうにっきは引き続き不定期更新をしていきます。

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
page top
CSSレイアウトでfloatは危険
SEOと相性がいいのでCSSレイアウトが流行ってますが、慣れない人には本当に難しい!
せっかくできたと思ったのに、ブラウザによって表示がずれてしまったり。。。
たいていfloatでスタイル指定してるのが原因ですね。
float指定のレイアウトには未知のバグが大量にあるようです。
って事でこれからCSSレイアウトはposition:absoluteが主流ですね。

[html]
<div id="container">

<div id="header">ヘッダー</div>

<div id="contents">
<div id="content">コンテンツ</div>
<div id="navigation">ナビゲーション</div>
</div>

<div id="footer">フッター</div>

</div>

#contentを#navigationよりも前に書くのが今風。
ようは携帯で見たときにこっちの方が便利だから。

[CSS]例:左ナビゲーション、幅780px
*{ margin: 0; padding: 0}
body{ width: 100%}
#container{ position: relative; width: 780px}
#header{ width: 100%; height: 150px}
#contents{ position: absolute}
#content{ margin-left: 200px}
#navigation{ position: absolute; top: 0px; left: 0px; width: 200px;}
#footer{ width: 100%; clear: both}

CSSのleftをrightに書き換えるだけで右ナビゲーションのレイアウトができあがる。
超お手軽でブラウザやウィンドウサイズに影響を受けないCSSレイアウトの完成です。
ただし、コンテンツよりナビゲーションの方が長い場合フッターにナビゲーションが重なることがあります。
そんな危険性を回避するためには、#content内にフッターを入れてしまうか、#contentのmin-height:を指定するか(実はIEだと上手く動作しないみたい)#contentのmargin-bottomに余裕を持たせるかすれば解決できます。
面倒臭いけど、float指定をして未知のバグを連鎖誘発するよりは効率的です。


参考文献:
Css Cookbook (Cookbooks (O'Reilly))
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
スポンサーサイト
[ TB*1 | CO*10 ] page top
Copyright © 裏・きぎょうにっき powered by 杉田ともゆき. all rights reserved. ページの先頭へ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。