前回予定したようなスタイルにページをうまく整えるべく、スタイルシートを再編集する。以下の4点が主なチャレンジだ。
- ページの上部にラインを入れたい
- 背景画像としてビジュアルを配置したい
- 横に並べたリストの間にスラッシュを入れたい
- 全体を中央寄せにしたい
それぞれについて具体的な記述方法と注意点を確認していこう。その中で浮かび上がった注意点についても解説したい。
ページの上部にラインを入れたい
これはレイアウト全体をまとめるDIVのIDであるwrapperに対して以下のスタイルを与え、実現した
------------------------------------------
div#wrapper {
width: 600px;
margin-left: 20px;
background-image: url(top_line.gif);
background-repeat: repeat-x;
background-position: top;
padding-top: 50px;
}
------------------------------------------
Wrapper上部に灰色の四角い画像を横方向に繰り返し貼り付けて、太い線のように見せている。ちなみにCSSにはボーダーというプロパティがある。そちらをDIVのボックスに指定して同じ見かけをつくることは可能だ。しかしながら、ボーダーの太さをDIV全体の高さサイズに換算するブラウザと、そうでないブラウザがある。ボーダープロパティの乱用はレイアウトの崩れに繋がるというわけだ。だからここでは無害な画像で同様の効果を実現した。
背景画像としてビジュアルを配置したい
ワニの写真はXHTML内の空の段落に、背景画像として指定したものだ。
------------------------------------------
p#photo {
width: 600px;
height: 200px;
background-image: url(photo.jpg);
background-repeat: no-repeat;
background-position: left top;
}
------------------------------------------
これは比較的簡単なスタイルの作りであろう。ただし、XHTML側に特殊記号で空白を記述する点がポイントになる
------------------------------------------
<p id="photo"> </p>
------------------------------------------
上記が特殊記号で作った空白を段落タグでマークアップした部分だ。これがないと高さと幅を持つボックスが生成できない。
横に並べたリストの間にスラッシュを入れたい
以外とやっかいなのがリストのスタイル設定だ。HTMLタグの親子関係に従い、先にulタグのスタイルを、次にliタグのスタイルを、最後にリンク設定（a）のあるliタグのスタイを決めていく。この前後関係が入れ替わるとスタイルが思った通りにページに反映しない。
リンクテキストから下線を消して、リストのビュレットを消し、ナビゲーションの最大幅を決める。ナビゲーション共通の書式もここで指定する。
------------------------------------------
ul#Gnav {
display: block;
list-style-type: none;
width: 600px;
margin: 0;
padding: 8px 0;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
font-size: 16px;
font-family: "ＭＳ ゴシック";
font-weight: bold;
}
------------------------------------------
liタグに対しては、項目を横に並べる指定だけ入れておく。
------------------------------------------
ul#Gnav li {
display: inline;
}
------------------------------------------
リンク設定したliタグのスタイル部分だが、HTMLでリンク設定のあるテキストはデフォルトで下線が付き、色がかわる。このリンク要素が持つ本来の振る舞いをCSSで矯正することになるので、リンク付きのliは以下の構成になる。
------------------------------------------
ul#Gnav li a {
text-decoration: none;
color: #2B394A;
}
------------------------------------------
この記述をリンク要素なしのliのスタイルに含めても、下線は消えないし色も変わらないので注意しよう。
で、最大の目的であるスラッシュだが、ここでは左側のリスト要素（クロコダイル）の右端に背景画像として表示させるという方法を採った。なぜこんな面倒なことをするのかというと、リストをインライン表示に指定して横に並べると、本来リストの先頭に付けられる●や■などのビュレットが付けられなくなるからだ。別の方法で何かマークを入れるしかない。というわけで、以下のクラススタイルを作り、リスト要素（クロコダイル）に追記した。
------------------------------------------
.slash{
background-image: url(li.gif);
background-position: right center;
background-repeat: no-repeat;
padding-right: 22px;
}
------------------------------------------
全体を中央寄せにしたい
最後に全体を中央寄せにして終わりだ。中央寄せはWrapperの左右のマージンをautoに指定するとできる。この記述を追加したWrapperのスタイルは以下の通りだ。
------------------------------------------
div#wrapper {
width: 600px;
margin-left: 20px;
background-image: url(top_line.gif);
background-repeat: repeat-x;
background-position: top;
padding-top: 50px;
margin:auto;
}
------------------------------------------
しかし、場合によってはInternet Explorer 6でこの指定が無効になる。つまり中央に寄ってくれない事態が発生する。それはHTML側に以下の記述があるかないかで決まる。
------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
------------------------------------------
上記はXML宣言というXHTMLの先頭に入れるべき記述だ。IE6はDOCTYPEの前に何か文字が入っている場合、レンダリングモードを（後方互換モード）というモードに切り替えてしまう。このモードではmargin:auto;は無視されるため中央寄りにならない。では入れなければ良いかというと、そうでもない。XML宣言はXHTMLをWeb標準技術たらしめる重要な記述なので入れるに越したことはないのだ。もし文書構造の妥当性を優先してXML宣言を入れるのであれば、中央寄せは他の方法で実現することになる。
細かい条件が重なるとどうしてもコントロールするのが難しくなってしまうCSSだが、作例程度のスタイルならここに記載している注意点を守るくらいで比較的簡単に実装までたどり着ける。より複雑な視覚効果を入れるとなると、CSSの行数も増大して整理整頓にも時間が必要になることは
確かだが、やってみれば意外と簡単。という感じもするのではないだろうか。
- borderプロパティは乱用するとレイアウトが崩れる
- ul liなど親子関係のあるタグは親子の順番通りにスタイルを付ける
- IE6はブラウザのレンダリングモードによって簡単に中央寄せできない
------------------------------------------
サンプルページ
sample.html
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）
------------------------------------------
