WEBデザインを勉強中 - デザイナーを目指して - | <ul>タグの横並びメニューのカスタマイズ

<ul>タグの横並びメニューのカスタマイズ

前回、上のように<ul>タグの横並びメニューの作成方法を紹介させていただきました。
しかし、このままでは、ちょっと寂しいので、下のようにしてみました。

こうしてみると、メニューにオンマウスされればテキストリンクの色と背景色が変わるので、ユーザーが
今どのメニューを選択しているのか、分かりやすいですよね。

こんな、表現もCSSで簡単にできちゃいます。<a>タグと擬似クラスである:hoverをCSSで表現を指定することで、このようにみせることができます。

記述は、以下のようにします。これは、一例です。

HTMLファイル

CSSファイル

ul#menu {
list-style-type: none;
color: #333;
margin: 0;
padding: 0;
border: 0;
}

ul#menu li {
float: left;
padding: 0;
margin-right: 1px;;
}

ul#menu a {
text-decoration: none;
color: #00F;
padding: 0 10px;
display:block;
}

ul#menu a:hover {
color: #FFF;
background-color: #999;
}