ホームページ作成ビギナーズガイド：CSS(スタイルシート)

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS(スタイルシート)レイアウト:2カラム 1で紹介したソースとサンプルの解説です。

body内のテキストをセンタリング。marginを上下0、左右autoに指定、これもセンタリングの意味です。
両方やるのはブラウザの解釈による違いを回避するため。

#outerに幅750ピクセルと指定し、テキストを左寄せに指定。marginを上下0、左右autoに指定。
#outerブロック自体はセンタリングして、中のテキストは左寄せ、ということです。

そして<div id="outer">～</div>というブロックの中にコンテンツ全体を入れます。

これはブラウザの表示幅によってレイアウトが崩れるのを防ぐのと、ページ全体が中央に表示されるようにするためです。

上にヘッダー、右にメインコンテンツ、左にメニューブロック、下にフッター、の2段組レイアウト。
divタグとCSS(スタイルシート)のfloatプロパティを使って作る方法を紹介します。

body {text-align:center; margin:0 auto;}

#outer {width:750px; text-align:left; margin:0 auto;}

#header {width:750px;}

#right {float:right; width:550px;}

#left {float:left; width:200px;}

#footer {clear:both; width:750px;}

例えば、背景画像を変えたいと思ったときに、CSS(スタイルシート)を外部ファイル化している場合は、CSSファイルだけを書き換えれば、全ページの背景画像を一括で変えることができます。そうでない場合は1ページずつ書き換えなければなりません。

HTMLファイルをスリム化して、検索エンジンがコンテンツを読み易くします。例えば当サイトのCSSファイルはW3Cのバナーをクリックすると見られますが、こんな大量の記述がhead内にあったら、なかなかコンテンツまでたどり着いてくれないわけです。