継続は力なり！なのか？

下記の3つのページは全く同じHTMLファイルを使っています。（CSSを読み込むリンク、タイトルはもちろん違いますが・・・。）。TABLEも使わないでCSSでレイアウトしています。Safariにて表示の確認をしてますが、こちらにはWIN環境がないのでWIN+IEの組み合わせでの確認ができません。>致命的？多分大丈夫でしょう・・・。>本当か？

CSSの設定の違いでサイトのデザインを全く変えることができます。CSSを使ってレイアウト等をしておくと、何十ページもあるサイトでも、CSSファイルだけ変更すれば一気ににサイトのデザインを変更することができます。ただし、最初にHTMLファイルを作る時、HTMLの書き方に工夫が必要になるかもしれませんが・・・。

CSSファイルは以下のようになっています。まだまだ、勉強中なのでCSSの書き方については正しいのかは不明です。実際、書き方は何種類かあると思います。

サンプルCSS 01

body{
margin: 0px;
}

.header h1{
margin-top:0px;
width:700px;
margin-bottom:20px;
}

.navi{
position:absolute;
float:left;
width:150px;
top:85px;
left:0px;
font-family:impact;
}

.list{
list-style-type:none;
margin-left:0px;
line-height:2em;
}

.contents{
margin-left:170px;
width:500px;
line-height:1.5em;
border-left-style:solid;
border-left-width:4px;
border-left-color:#666666;
padding-left:40px;
}

.footer{
margin-top:20px;
clear:left;
width:700px;
padding-top:5px;
text-align:right;
color:#666666;
border-top:solid 2px #666666;
}

サンプルCSS 02

body{
margin: 0px;
}

.header h1{
margin-top:0px;
width:700px;
margin-bottom:20px;
}

.navi{
width:150px;
top:85px;
margin-left:540px;
padding-left:10px;
font-family:serif;
}

.list{
list-style-type:none;
margin-left:0px;
line-height:2em;
}

.contents{
float:left;
width:500px;
top:85px;
line-height:1.5em;
border-right-style:solid;
border-right-width:4px;
border-right-color:#666666;
padding-left:40px;
margin-bottom:20px;
}

.footer{
clear:left;
width:700px;
padding:5px;
text-align:right;
color:#666666;
border-top:solid 2px #666666;
}