liでメニュー作る
メニューリスト作ってる最中に、そういえばと思ったところがあったので復習かねた自分のためのメモ。
p要素やdiv要素使って作るよりliのほうが簡単で美しい。
項目ごとに線で区切る
サンプル
(X)HTML
<ul id="sample1">
<li><a href="#">項目1</a></li>
<li><a href="#">項目2</a></li>
<li><a href="#">項目3</a></li>
<li><a href="#">項目4</a></li>
<li><a href="#">項目5</a></li>
</ul>
CSS
ul#sample1 {
width: 200px;
border-bottom: 1px #777777 solid; /*一番下の区切り線*/
padding: 0;
margin: 0;
}
ul#sample1 li {
background: #fff8ff;
border-top: 1px #777777 solid; /*各項目の区切り線*/
padding: 2px;
margin: 0;
list-style: none;
}
ul#sample1 li a {
color: #009999;
font-weight: bold;
text-decoration: underline;
}
ul#sample1 li a:hover {
color: #6699ff;
}
li要素の上に1pxのborderを付けて各項目を区切るラインを表示させる。
一番最後のラインだけul要素のborderで表示。
リストマーカーはズレたり位置の細かい修正効かないから、使うとしたら背景画像を使用。
クリック可能範囲を広くする
上の例だとテキストの部分しかリンクとして反応しないからクリック範囲が狭い。
文字数が少なかったりフォントサイズが小さいとクリックし辛いから、リンクの範囲を広げてクリックし易くする。
CSS
ul#sample2 {
width: 200px;
padding: 0;
margin: 0;
}
ul#sample2 li {
border-bottom: 1px #fff8ff solid;
padding: 0;
margin: 0;
list-style: none;
}
ul#sample2 li a {
background: #FF6600;
color: #fff8ff;
font-weight: bold;
text-decoration: underline;
width: 200px;
padding: 2px;
display: block; /*ブロック要素として表示*/
}
ul#sample2 li a:hover {
background: #FFCC00;
}
display:blockをa要素にかましてボックスとして表示させる。
すると項目全体がリンクとして反応するようになってクリックしやすくなる。
カーソルが項目に重なったときに変化をつけるため、:hover擬似要素で異なる背景色を指定。
これで見た目的にも機能的にもよくなる。
IE6はa要素をブロック要素化してもテキスト部分しかリンクとして反応しないので、a要素にもwidthを指定。
項目を横並びにする
項目を横並びにするには、floatかposition:abusoluteを使う。
サンプル
CSS
ul#sample3 {
height: 25px; /*float配置された要素を含むボックスの高さを確保*/
padding: 0;
margin: 0;
}
ul#sample3 li {
text-align: center; /*テキストをセンタリング*/
width: 100px;
padding: 0;
margin-right: 5px; /*項目の間隔*/
float: left; /*左に回りこませて横並びにする*/
list-style: none;
}
ul#sample3 li a {
background: #FF6600;
color: #fff8ff;
font-weight: bold;
text-decoration: underline;
width: 100px;
display: block;
}
ul#sample3 li a:hover {
background: #FFCC00;
}
li要素にfloat:leftをかます。
ul要素よりもfloatされたli要素の方が高さがある場合、li要素はボックスをはみ出して表示されるので、それを防ぐためul要素にheightを指定し高さを確保してはみ出ないようにする。
項目と項目の間は、widthとpadding/borderを同時に指定するとIE6で表示が崩れるのでborderでは無くmarginで調整。
画像を使わずテキストだけなら、li要素にtext-align:centerを指定すると中央に表示してくれる。
横並びにしたリスト自体をセンタリングするには、text-align:centerを指定したdiv要素なんかのボックスで囲ってul要素にwidthとmargin:autoを指定するか、position:abusoluteで配置すればいい。
floatで横並びにさせる方法はテキストを消して画像を配置するナビゲーションを作る場合にお勧め。
ココのナビゲーションバーもfloat。
display:inlineでセンタリングする
横並びにした項目をセンタリングするにはdisplay:inlineを使う。
サンプル
(X)HTML
<ul id="sample4">
<li class="first"><a href="#">項目1</a></li>
<li><a href="#">項目2</a></li>
<li><a href="#">項目3</a></li>
<li><a href="#">項目4</a></li>
<li><a href="#">項目5</a></li>
</ul>
CSS
ul#sample3 {
text-align: center; /*センタリング*/
padding: 0;
margin: 0;
}
ul#sample3 li {
padding: 0 10px; /*項目どうしの間隔調整*/
margin: 0;
border-left: 1px #6699FF solid; /*項目の区切り線*/
display: inline; /*li要素をインライン要素に*/
list-style: none;
}
ul#sample3 li.c1 {
border: 0; /*左側の区切り線消去*/
}
ul#sample3 li a {
color: #009999;
font-weight: bold;
text-decoration: underline;
}
ul#sample3 li a:hover {
color: #6699ff;
}
li要素にdisplay:inlineを指定してインライン要素化。
ul要素にtext-aligen:centerを指定して、li要素をセンタリング。
widthは使えないから項目どうしの間隔はmarginかpaddingで調整。
border-leftを項目の区切りとして指定して、一番初めのli要素にclass="c1"をつけてborder-leftを消去。
floatで横並びさせるときより簡単にリスト自体をセンタリング出来る。
display:inlineで横並びさせる方法は、パンくずリストやフッターメニューや簡単なページャー作る時なんかにオススメ。
テキスト部分しかリンクとして反応しないから、テキストの代わりに背景画像使ったりナビゲーションバー作る時はfloatかposition:absoluteで作ったほうがいい。