5.4.ナビゲーション部分を飾り付け

5.4.1.IDセレクタとクラスセレクタ

本題に入る前にCSSを使用する上で重要な二つのセレクタ、IDとクラスについて解説します。

まずはクラスセレクタから。HTMLの要素のほとんどはclass属性を持っています。この値を利用してスタイルを適用することができます。書き方は「.」(ピリオド)に続けてクラス名を書きます。と言われてもよくわからないと思うので、とりあえず例を示しますね。

.example{
font-size:smaller;
}

この例の場合、class属性値にexampleを持つすべての要素の文字サイズが1段階小さくなります。もう一つ見てみましょう。

p.example{
font-size:smaller;
}

この場合、さっきの例と違って属性値がexampleであるp要素のみにスタイルが適用されます。このようにクラスセレクタを用いると同じ要素でも違うスタイルを適用できます。

次にIDセレクタについて説明します。IDセレクタもスタイルの適用先の絞り込みに使います。書き方は「#」(ハッシュ)に続けてID名を記述します。「なんだ、クラスと同じじゃん」と思う人もいるかもしれませんが、当然のことながら同じじゃないです。最大の違いは同じ文書中に同じIDは一度しか使えないという点です。さらに優先順位がクラスよりも上です。例を示しましょう。

.example1{
font-size:12px;
}
#example2{
font-size:36px;
}

上記のCSSを下記のHTMLに適用してみます。

<p class="example1">本文1</p>
<p id="example2" class="example1">本文2</p>
</div>

さて「本文1」と「本文2」の文字はどの大きさで表示されるでしょうか。サンプルをダウンロードして実際に見てみてください。「本文2」の文字は36pxで表示されるはずです。

サンプル5.4.1：sample5_4_1.zip

5.4.2. HTMLの修正

IDセレクタとクラスセレクタが分かったところで、6.1で作成したHTMLを今後に備えて修正しておきます。具体的には、div要素を使ってブロック分けします。div要素は複数のブロック要素をまとめて一つの部分を作るために使用します。インライン要素で同じような役割をするのはspan要素です。早速やってみます。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>サンプルサイト</title>
</head>
<body>
<h1>サンプルサイト</h1>
<ul>
<li><a href="sample5_1html">自己紹介</a></li>
<li><a href="sample5_1.html">日記</a></li>
<li><a href="sample5_1.html">リンク集</a></li>
</ul>
<div>
<h2>2005年9月2日</h2>
<p>日記を書こうと思ってもネタがないとどうにもならない訳です。只今、ネタがなくて非常に困っております。サンプルなのであまり変なことを書く訳にもいかないし。Yahooのニュースの文章でもコピペしようかと思いましたが、それじゃ日記になりませんよね。</p>
<p>ってことで仕方なくネタがないことをネタにしてしまいました。</p>
</div>
</body>
</html>

このように分割したい部分をdiv要素にします。さらに必要な要素にID名またはクラス名をつけます。この時class="red"とかclass="right"といった指定はやめましょう。例えばclass="right"とクラス名を指定した場合、その部分が左に配置されたとき意味が分からなくなります。よってクラスやIDはその部分の色や位置で名前をつけるのではなく、役割で名前をつけるようにしましょう。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<title>サンプルサイト</title>
</head>
<body>
<h1>サンプルサイト</h1>
<ul id="menu">
<li><a href="sample5_1html">自己紹介</a></li>
<li><a href="sample5_1.html">日記</a></li>
<li><a href="sample5_1.html">リンク集</a></li>
</ul>
<div id="contents">
<h2>2005年9月2日</h2>
<p>日記を書こうと思ってもネタがないとどうにもならない訳です。只今、ネタがなくて非常に困っております。サンプルなのであまり変なことを書く訳にもいかないし。Yahooのニュースの文章でもコピペしようかと思いましたが、それじゃ日記になりませんよね。</p>
<p>ってことで仕方なくネタがないことをネタにしてしまいました。</p>
</div>
</body>
</html>

5.4.3. ナビゲーションバーの作成

ブロック分けの作業が終わったのでナビゲーションバーの作成に取りかかります。6.2で作成したCSSファイルに続けて書き込んでいきましょう。まずはa要素に背景色をつけます。「#menu a」というのはmenuというID内にあるa要素という意味です。これにより、ID contents内のa要素には効果が及びません。だって日記の中のリンクがボタンになったら困るでしょ？

#menu a{
background-color:#FF9900;
}

文字の後ろのみがオレンジ色に変化
図5.13. リンクの背景色を設定

文字が読みにくいので色を変えます。さらにtext-decorationプロパティを使って文字の下線を消します。

#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
}

下線が消えて文字が黒色に
図5.14. 文字色を黒にして下線を消した

a要素はインラインボックスを生成するのでこのままだと文字のある部分しか背景色がつきません。またmarginやpaddingもうまく働きません。「じゃあブロックボックスを生成するli要素に背景色つければいいじゃん」って思ったそこのあなた。それも悪くはないです。その方法をとった場合、文字の部分にしかリンクが機能しません。ボタンっぽく見えるのに文字以外は反応なしってちょっとナンセンスですよね。

そこでdisplayプロパティを使って、a要素でブロックボックスを生成します。

#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
display:block;
}

a要素がブロック化され文字以外の部分にも背景色がついた
図5.15. a要素をブロック化

a要素なのに文字のない部分にも色がついたでしょ？

さて今回はナビゲーション部分をリストで作ったので文字の前に箇条書きの変な点がついています。邪魔なのでとっちゃいます。これにはul要素にlist-style-typeプロパティを使います。値をnoneとすればマークが消えます。ついでなのでul要素にwidthプロパティを指定してナビゲーションバーの幅を決めてしまいましょう。

ul#menu{
list-style-type:none;
width:150px;
}
#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
display:block;
}

マークが消えて幅が150pxに
図5.16. リストのマークを消して幅を調節

幅はちょうど良くなりましたが、文字が左寄りというのは個人的にどうかと思うのでセンタリングします。それとボタンの左側に妙な余白がありますね。これはul要素のpaddingです。後々邪魔になるのでこれを0にしておきます。

ul#menu{
list-style-type:none;
width:150px;
text-align:center;
padding:0;
}
#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
display:block;
}

ナビバーの左の余白がなくなり文字がセンタリングされた
図5.17. ナビバーの左鵜の余白を消去

次にボタンだと分かるように枠線でもつけましょう。枠の制御にはborderプロパティを使います。「border:スタイル 幅 色」というように記述します。スタイルにはsolidやdotted、dashedなどがあります。またborder-topプロパティやborder-leftプロパティなどを使用して上下左右で別の表示が可能です。詳しくはリファレンスを参照してください。

ul#menu{
list-style-type:none;
width:150px;
text-align:center;
padding:0;
border-top:solid 1px #000000;
}
#menu li{
border-right:solid 1px #000000;
border-bottom:solid 1px #000000;
border-left:solid 1px #000000;
}
#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
display:block;
}

各ボタンに枠線が表示された
図5.18. ボタンに枠線をつけた

「なんで細かく分けて枠線を設定してるの？」って思った人もいるかもしれません。li要素にborderプロパティですべての枠線を設定した場合、真ん中の2本の枠線が重なって図5.19のようになってしまいます。なんか太くなってカッコワルいですよね。


図5.19. 枠が二重になって太く見える

次にボタン自体の高さを調節します。このままでもいいんですけど、もう少し高さが欲しいところ。そういうわけでa要素のpaddingを調節して枠線と文字の間隔を広げます。

ul#menu{
list-style-type:none;
width:150px;
text-align:center;
padding:0;
border-top:solid 1px #000000;
}
#menu li{
border-right:solid 1px #000000;
border-bottom:solid 1px #000000;
border-left:solid 1px #000000;
}
#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
display:block;
padding:7px;
}

枠線と文字の間隔が開いてボタンの高さが大きくなった
図5.20. ボタンの高さを調節

このままだとマウスカーソルがボタンの上にきてもカーソルが変化するだけで、ボタン自体は何も変わりません。ボタンだと分かりにくいので、マウスカーソルがボタンの上に乗ったときに背景色が変化するようにしてみます。これにはダイナミック疑似クラスのhoverを使います。書き方は「要素名:hover{宣言}」です。

ul#menu{
list-style-type:none;
width:150px;
text-align:center;
padding:0;
border-top:solid 1px #000000;
}
#menu li{
border-right:solid 1px #000000;
border-bottom:solid 1px #000000;
border-left:solid 1px #000000;
}
#menu a{
color:#000000;
background-color:#FF9900;
text-decoration:none;
display:block;
padding:7px;
}
#menu a:hover{
background-color:#FFFFFF;
}

カーソルがボタン内に入ると背景色が変化する
図5.21. カーソルがボタンの上に乗ると背景が白くなる

これでナビゲーションバーの基本形は完成です。サンプルをにリンクしておくのでダウンロードしてアレンジしてみてください。

サンプル5.4.2：sample5_4_2.zip