さて、スタイルシートでレイアウトするとHTMLを簡単にでき、様々なメリットがあることはわかりましたね。では、スタイルシートには何が書かれているでしょうか？
div#header_menu ul {
background-image: url(image/header_menu_bg.gif);
background-repeat: no-repeat;
margin: 0px;
height: 40px;
padding: 0px;
padding-left: 20px;
}
div#header_menu ul li {
display: inline;
margin: 0px;
}
div#header_menu ul li a {
color: #333333;/*リンクの文字の色*/
text-decoration: none;
height: 26px;
float: left;
padding-top: 14px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 12px;
}
* html div#header_menu ul li a {
height: 39px;
}
div#header_menu ul li a:hover {
background-image: url(image/header_menu_bg_a.gif);
background-repeat: repeat-x;
}
一応日本語でコメントが入れていますが、ちょっと見ただけでは何のことが書かれているか良くわかりませんね。テンプレートにもよりますが、こんなことがこのファイルには1000行近くにわたって書かれています。
基本的にはこのファイルは編集することはありません。ある程度理解が出来るようになってきたら編集することもあると思いますが…まずはこういう感じで書かれているということだけ見ておきましょう。不用意にいじるとレイアウトが崩れてしまいますので。
ホームページを見てみよう
さて、こんなスタイルシートでデザインしたホームページがどんなものかもう少し見てみましょう。
 |
 |
 |
 |
 |
 |
いかがでしょうか？よくご覧になるとわかりますが、HTMLの記述方法が詳しく書かれていますね。この記述方法に基づいていけば上のようなレイアウトのホームページが出来上がります。どのページもきちんとレイアウトされていますがかかれているHTMLだけで見るとすべてこんな感じのページです。それを全てスタイルシートでレイアウトしているだけなのです。
