制作ブログ 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;
}

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

  • ulとliにmargin,paddingの設定をする(ブラウザによる解釈の違いを統一させるため)。
  • aの「display:block」はかなり重要(インライン要素をブロック要素にすることで幅を決めることができる)。
  • aのwidthの指定はIE対策。必要に応じてハックを利用する。

    参考:ブラウザによるwidthプロパティの解釈の違い

  • マウスオーバー時の設定は「a:hover」に書き込むのではなく(単に透明にするだけ)、「li」に書き込む(もたつきのない動作を提供できる)。

この記事の動作確認環境(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