ブログのエントリーはここから
リストを利用したナビゲーションの私的な定番（06/10現在）
htmlを正しく書いているとナビゲーションに適切なタグはおそらくリストタグになる事が多いのではないでしょうか。
その場合に私が一番やりやすかった方法を記録しておきます。
htmlはこんな感じ↓
/************html****************/
※「＜」と「＞」は表示の事情により全角です。ご了承下さいm(_ _)m
＜div id="navi"＞
＜ul＞
＜li class="navi-home"＞＜a href="pass"＞home＜/a＞
＜li class="navi-blog"＞＜a href="pass"＞blog＜/a＞>
＜li class="navi-news"＞＜a href="pass"＞news＜/a＞
＜li class="navi-about"＞＜a href="pass"＞about＜/a＞
＜/ul＞
＜/div＞
/************html****************/
CSSはこんな感じです↓
/************css****************/
#header #navi a {
display:block;
overflow: hidden;
width: 100%;
height:0;
padding-top:35px;/*ナビゲーションボタンの高さ分パディングする*/
color:#FFFFFF;
}
#header #navi ul{
width:*****px;/*ナビゲーション全体の幅 liの合計の*/
margin:0 auto;
padding:0;
}
#header #navi li{
display:block;
float:left;
width:****px;/*ナビゲーションボタンの横幅*/
margin:0;
padding:0;
text-align:center;
}
/*ナビゲーションの数だけ用意する*/
#header #navi .navi-about{
background: url("imageのpass") left top no-repeat;
}
#header #navi .navi-about a:hover{
background: url("imageのpass") left top no-repeat;
}
/*ナビゲーションの数だけ用意する*/
/************css****************/
この例はボタンのサイズが全て同じ場合で記述していますがナビゲーションのサイズが
それそれ異なる場合は個別のクラスに横幅を設定すれば良いと思います。
CSSの各自の細かいプロパティはここでは割愛させていただきます。
辞書等を見てもらえればすぐに分かると思います。
このblogのナビゲーションにもこの方法を利用をしてます。
まだ（2006/10/10現在）Homeとblogしかありませんが良かったらご覧ください～
先日のネタのマージンの代わりにテキストインデントで左右のどちらかに飛ばす手法もえますがナビゲーションの場合はクリックすると横に長い線が出てくるブラウザ（Firefox等）があるのでやらない事にしています。
やり方として問題はないですが少しカッコが悪い気がするので～
これらの方法も先日紹介した↓この本にもっと丁寧に書いております。
くどいですが本当に良い本ですｗ
Comment 2
a contributor by R : October 12th ,01:18 AM
ほたるさんコメントありがとうございます！！
（＾＾）
＞「outline : 0px;」
＞これで消えちゃいまーす！
これは知りませんでした！
今度試してみます！！
Comment 1
a contributor by ほたる : October 11th ,02:40 AM
こっちには初コメントですかね。。。
>先日のネタのマージンの代わりにテキスト
>インデントで左右のどちらかに飛ばす手法も
>えますがナビゲーションの場合はクリック
>すると横に長い線が出てくるブラウザ（Fire
>fox等）があるのでやらない事にしています。
その長い線消せますよ～。
↓はこないだ作ったページのCSSの一部です。
/************css****************/
ul.global {
height : 40px;
list-style-type : none;
}
ul.global li.navi1 {
position : absolute;
left : 11px;
top : 50px;
}
ul.global li.navi2 {
position : absolute;
left : 126px;
top : 50px;
}
ul.global li.navi1 a {
display : block;
width : 114px;
height : 40px;
text-decoration : none;
text-indent : -9999px;
outline : 0px;
}
ul.global li.navi2 a {
display : block;
width : 116px;
height : 40px;
text-decoration : none;
text-indent : -9999px;
outline : 0px;
}
/************css****************/
「outline : 0px;」
これで消えちゃいまーす！