第11回　複雑なタグはCSSでおさらば

こういうスタイルのレイアウトをテーブルタグを使って再現していた人は多かろう。しかし、CSSを使えば、もうあんなに複雑なタグを書かなくてもいいのだ。これから解説するテクニックを活用して、この手のスタイルをどんどん使ってもらいたい。

各リンクテキストには下線を付けている。これはデフォルトでリストの先頭にビュレットを付けないから。ビュレットが付いていないとリンクしているかどうかがちょっと分かりにくい。また、ひらがなや漢字など、異なるフォルムを含む日本語を横組みにして縦に並べると、意外と頭が揃っていないように見えがち。下線があったほうが整然として見える。もちろんビュレットが付いていれば下線が無くてもちゃんと揃って見える。サンプルが【図1】だ。

 

 

スタイルを付けない状態で閲覧しても、ちゃんとリストのタイトルと項目一覧が構造的に表示される。もしテーブルタグで組んでいたら、不要なセルのボーダーなどがやかましくみえるところが、【図2】である。

CSSはまずナビゲーション全体の大きさと背景の定義から設定する。「h2」と「ul」群をひとまとめにするために使った「div」タグのサイズ設定と背景画像の配置を定義したのが、【ソース1】だ。

次に見出し部分のスタイルを設定する。見出し部分は他の箇所と異なる背景を表示させたいので、ここでも背景画像を指定している。テキストサイズと色の指定、テキストの位置調整となる「padding」設定も忘れずに!!

これだけではつまらないので、マウスオンしたテキストだけ行頭にビュレットを表示させる効果を付けたい。ところで「li」にビュレットを付けるには、「list-style-image」というCSSプロパティを使うが、これだと「a:hover」に反応してくれない。仕方がないのでここは「li」の「a:hover」に背景画像を指定することにした。とりあえずできあがったソースが【ソース3：修正前のソース】以下の状態だ。

しかし、これではテキストにきっちりカーソルを合わせないと効果が見えないうえに、画像を表示したときテキストと画像が被ってしまうことが発覚した。その例が、【図3】だ。

そこで下記のようにソースを【ソース3：修正後のソース】のように直した。そうすると、【図4】のように修正される。

 

 

div#Nav ul li aにpaddingを設定してカーソルに反応する範囲を広げたことと、div#Nav ul li a:hoverにpadding-left: 16px;で、マウスが乗ったら右方向に16ピクセルずれること、という設定を下し、やっとスタイルが完成した。

Unordered Lists（順不同リスト）タグは、CSSレイアウトの主役のようなものだ。ulはナビゲーションをタグ付けする目的で使われる。体裁を問わず基本的にはこのタグでマークアップしておき、横一列に配置するか縦方向に列挙するかは後にCSS側で決める手順になる。

ところでCSSレイアウトはベースとなるHTMLが理論的な文書構造を持っていないと成立しない。文書構造。ちょっと難しい言葉だ。逆説的なアプローチとして単語の羅列をbrで改行した体裁をイメージして欲しい。それでもリストと同じ形になることには変わりない。しかし電子文書を扱うシステムから見れば、このデータはあくまでも「改行した文字列」でしかなく、いくらスタイルがナビゲーションっぽくてもナビゲーションとはみなされない。正しい文書構造とは、目的に適ったタグを情報に対して与えてやることで実現できること、と考えよう。