HTML4.01とCSSによるWeb標準のホームページ作成入門。
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
CSS(スタイルシート)レイアウト:2カラム 1で紹介したソースとサンプルの解説です。
body内のテキストをセンタリング。marginを上下0、左右autoに指定、これもセンタリングの意味です。
両方やるのはブラウザの解釈による違いを回避するため。
#outerに幅750ピクセルと指定し、テキストを左寄せに指定。marginを上下0、左右autoに指定。
#outerブロック自体はセンタリングして、中のテキストは左寄せ、ということです。
そして<div id="outer">～</div>というブロックの中にコンテンツ全体を入れます。
これはブラウザの表示幅によってレイアウトが崩れるのを防ぐのと、ページ全体が中央に表示されるようにするためです。
このように書けば、body {text-align:center; margin:0 auto;}は不要なのでは？と思われるかもしれません。その通りです。
しかし、text-align:centerでセンタリングされるけど、margin:autoでセンタリングされない、またはその逆など、ブラウザによる違いがあるので、それを回避するために、bodyと#outerで同じようなことを書いてます。
ページのヘッダー部分です。ここは特に説明することもなし。
ここがポイント。floatプロパティのrightとleftでそれぞれのブロックを回り込ませます。
気をつけなければならないのが幅(width)。 当然ながら#rightと#leftの合計が#outerの幅を超えないこと。
#right、#leftにmargin・padding・borderを指定すると、ブラウザによって幅の解釈が違うのでレイアウトが崩れやすくなります。
「指定しない」または「margin:0; padding:0; border:0; で0を指定する」で回避できます。
margin・padding・borderは#right、#leftの中に入れる要素に指定します。
ボックスモデルハック(Box Model Hack)というCSSハックで回避する方法もありますが、ここではボックスモデルハックを使わない方法で回避しています。
個人的にはボックスモデルハックを使わないほうが確実だと思います。
これも重要。clear:both;で左右の回り込みを解除します。clearを忘れるとレイアウトが崩れます。
右側にメニューバーを作りたい場合は#right、#leftの幅を変えて、HTMLソースの記述順序を逆にして下さい。
outer、right、leftというid名は好ましくないかもしれませんが、便宜上。(divタグご参照)
リンクはご自由にどうぞ。
最終更新2008/07/09
