0から目指すWebマスター Web制作に関する備忘録
検索

CSS

リストとナビゲーション「縦」編

(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。

xhtmlソース
<div>
<ul>
<li>navi1</li>
<li>navi2</li>
<li>navi3</li>
<li>navi4</li>
<li>navi5</li>
</ul>
</div>

CSSソース
ul{
list-style:none;
margin:0;
padding:0;
}
li{
margin:0;
padding:0;
background:マウスオーバー時の表示設定;
}
a{
background:常時の表示設定;
display:block;
width:○○px;
}
a:hover{
background-image:none;
background-color:transparent;
}

ナビゲーションをリストで作成するポイント

この記事の動作確認環境(2007年12月15日追加)

Windows XP
IE7 IE6 Firefox2.x Opera9.x Netscape7.1
Mac OS 10.4
Safari3 IE5.2 Firefox2.x Opera9.x Netscape7.1

xml宣言

バージョン
1.0

html宣言

バージョン
xhtml1.0 strict
公開識別子
-//W3C//DTD XHTML 1.0 Strict//EN
システム識別子
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd