裏・きぎょうにっき 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

COMMENT

 管理者にだけ表示を許可する

新型ツール? | URL | 2007/01/25(木) 16:42 [EDIT]
はじめまして(^^

しょういちと申します。

Web2.0を考慮した、最新 「ブログ支援ツール」を作ってみました。

その強力さ故に、今月で販売中止に決めました。

無料お試し版も「新規アクセス用」と「巡回用」の2つあります。

良かったら是非試してみてくださいな^^

さちこ@子育て奮闘記 | URL | 2007/01/28(日) 20:05 [EDIT]
うぉぉぉー
レベル高い話やね
ついていけん(>_<)

ここだけの話、ウインドウズビスタもようわからん

ともゆき | URL | 2007/01/29(月) 13:14 [EDIT]
→さちこどん
裏・きぎょうにっきではこれからもマニアックな話満載でお送りします。笑
人に読んでもらうことは前提にしてないからかなりイタイ記事が多くなりそうだけどよろしくね☆
● カジノを選ぶ
オンラインカジノ | URL | 2008/04/18(金) 03:54 [EDIT]
CSSでカジノを選ぶ
● ビデオポーカークラシック
オンラインカジノ | URL | 2008/04/18(金) 04:07 [EDIT]
SEOとポーカーと私
● クラブダイスカジノ
オンラインカジノ | URL | 2008/04/18(金) 04:08 [EDIT]
クラブダイスカジノでレイアウト
● カジノオンネット
オンラインカジノ | URL | 2008/04/18(金) 04:09 [EDIT]
カジノオンネット
● インペリアルカジノ
オンラインカジノ | URL | 2008/04/18(金) 04:11 [EDIT]
ナビゲーション なら インペリアルカジノ
● 労働基準監督官
| URL | 2008/08/27(水) 11:46 [EDIT]
労働基準監督官とは、労働者の生命と健康を守り、人間尊重の基本理念に立脚した法定の労働条件を確保することを職務とする国家資格(管轄は厚生労働省) http://garda.stepuptechnologies.com/
● 承認待ちコメント
| | 2009/04/18(土) 12:46 [EDIT]
このコメントは管理者の承認待ちです

TRACK BACK
TB*URL
● SEO対策セミナー・コンサルティング・塾
SEO対策セミナー・コンサルティング・塾 2007/01/25(木) 12:24
本物のSEO対策!3億2100万件中1位表示の実績!会員制SEOサポート塾が遂に開講!  [続きを読む]
Copyright © 裏・きぎょうにっき powered by 杉田ともゆき. all rights reserved. ページの先頭へ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。