スタイルシートを採用したサイトでは、簡単なHTML表現に始終することで、細かなデザインが実現できなくなるわけではありません。むしろ、スタイルシートを採用することで、強力なデザインの向上が期待できます。

ヘッダーに関連するスタイルシートの例

div.header980 {
 width: 940px;
 height: 100px;
 padding: 10px 20px 10px;
 background-image: url(/img/theme/-name-/980_tpbg.png);
 background-repeat: no-repeat;
}

ul#topMenu {
 margin: 0;
}
ul#topMenu li {
 margin: 0 5px 0 0;
 float: left;
 overflow:hidden;
 font-size:xx-small;
 padding:0;
}
ul#topMenu li a,ul#topMenu li a:link,ul#topMenu li a:visited {
 width: 100px; /*メニューは共通*/
 height: 28px; /*メニューは共通・高さは常に共有が適当*/
 display: block;
 background-position: 0 0;
}
ul#topMenu li#top1 a {
 background-image: url(/img/mn/0.gif);
}
ul#topMenu li#top2 a {
 background-image: url(/img/mn/1.gif);
}
ul#topMenu li#top3 a {
 background-image: url(/img/mn/2.gif);
}
ul#topMenu li#top4 a {
 background-image: url(/img/mn/3.gif);
}
ul#topMenu li#top5 a {
 background-image: url(/img/mn/4.gif);
}
ul#topMenu li#top6 a {
 background-image: url(/img/mn/5.gif);
}
ul#topMenu li#top7 a {
 background-image: url(/img/mn/6.gif);
}
ul#topMenu li a:focus,ul#topMenu li a:hover,ul#topMenu li a:active {
 background-color: transparent;
 background-position: 0 28px; /*縦幅に注意*/
}
ul#topMenu li a span {
 display: none;
}

　上述以外にも細かな指定はありますが、大事なものだけを抜粋してみました。

header980

　横幅が980pxになるように設計された指定を含めるようにしています。スタイルシートに付与されるべき名称としては、決して適切とは言えないのですが、便宜上、980という数値が見た目も分かりやすいために採用しています。

　指定は、横幅、縦幅の他、文字の流し込みがそれぞれ上下左右で余裕が出るように指定しています。また、背景の読み込み指定もあります。

topMenu

　たくさんあるので混乱しそうですが、細かな部分は似たものばかりなので安心してください。唯一、間違えの元となるのが、1〜7までの番号がついた、各項目に付与される画像の指定部分です。

　一番難しい点は、メニューの登録された番号が割り当てられるものなので、番号は「top」と「番号」の組み合わせになり、例えば、100番に登録されたものは、「top100」のような記述になります。登録状況に応じて、実際の制作では番号を修正しなければなりません。

標準的な変更の余地

　通例的には、画像によるメニュー項目画像を制作することに始終することになるので、多くの場合、画像に関連する項目になります。

　先に紹介したtopMenuにおける、メニュー登録したものに対応する番号への変更の他、ボタンの大きさを変更する際には、他にもいくつかの修正が必要になります。

ボタン画像の大きさを変更するとき

　横幅の指定は、「width」を変更します。

修正前の例
width: 100px;

修正後の例
width: 120px;

　縦幅の指定は、「height」を変更します。

修正前の例
height: 28px;

修正後の例
height: 36px;

　また、縦幅の変更の際は、別途、「background-position」の変更も必要になります。「height」で設定した値と同じ数値に変更します。

修正前の例
background-position: 0 28px;

修正後の例
background-position: 0 36px;