第7章 メインメニューのスタイリング
| リンクの背景色と文字色を指定する
|
前回は、メインメニュー部分のリンク範囲を広くしました。 しかし、リンク領域の背景色がそれ以外の部分と同じで、どこからどこまでがクリック出来る範囲なのか判然としません。
そこで、リンク範囲が視覚的に分かりやすくなるように、背景色を指定しましょう。
base.cssに以下の記述を追加してください。
CSSソース（base.css）
@charset "utf-8";
body {
font-size:95%; /* フォントサイズを95%にする */
font-family: "ＭＳ ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#333333; /* 文字色を濃い目のグレーにする */
}
/*============================================
メインメニュー
============================================*/
ul#menu {
width:960px; height:50px; /*メインメニュー部分の幅と高さ*/
}
#menu li {
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
float:left; /*リスト項目を横に並べる*/
}
#menu li a {
background-color:navy; /*背景色*/
color:#ffffff; /*文字色*/
display:block; /*リンク部分をブロック表示にする*/
width:240px; height:35px; /*幅と高さ*/
}保存をしたらブラウザで表示してみましょう。リンク領域の背景色がネイビーに、リンクのテキスト色が白くなれば成功です。
▶︎ 変更前を確認する
|
| カラーネームと16進法による色指定
|
第4章で文字色を指定した際に、「ウェブにおける色の指定方法」を紹介しましたが、 色の値はカラーネームと16進法のどちらでも指定できます。
上記のCSSソースでは、背景色はカラーネームでnavy 、文字色は16進法で#ffffffと指定しています。 カラーネームのnavyは#000080と同じ、whiteは#ffffffと同じです。 今回はどちらでも指定できることを説明するために、あえて使い分けてみました。
背景色をネイビー、文字色をホワイトにしたい場合、以下のいずれの書き方でも指定することができます。
background-color:navy; color:#ffffff; /*今回の書き方*/ background-color:navy; color:white; /*表示は同じ*/ background-color:#000080; color:#ffffff; /*表示は同じ*/ background-color:#000080; color:white; /*表示は同じ*/ |
まとめ
- 背景色は、background-colorプロパティで指定する
- 色の値は、カラーネームと16進法のどちらでも指定できる
- 例えば、navyと#000080は同じ、whiteと#ffffffは同じ
