コーディング時、よく使う「li」タグ。

CSSの組み方によってはかなり使いどころがたくさんのタグですよね？

いままで私が使ったTipsをこの際まとめたいと思います。

１．目次のような表現

以下のようにHTML内でリストを設定。（CSS側も同時に変えるならもちろんolでもOKですよ）

<div id="Menu">
  <ul>
    <li><a href="#"><strong>最近の記事１</strong><em>2009/06/01</em></a></li>
    <li><a href="#"><strong>最近の記事２</strong><em>2009/06/01</em></a></li>
    <li><a href="#"><strong>最近の記事３</strong><em>2009/06/01</em></a></li>
  </ul>
</div>

以下のようにCSSを設定。

ポイントは文字の行間設定とbackground-imageのポジションとfloatの使いどころかな？？


#Menu ul{
 margin:0;
 padding:0;
}
#Menu ul li{
 clear:both;
 list-style:none;
 text-align:right;
 background:url(../images/line.gif) repeat-x 0 0.6em;
 margin:0 0 5px;
 padding:0;
 line-height:1.2em;
 font-size:1em;
}
#Menu ul li a{
 display:block;
 text-decoration:none;
}
#Menu ul li strong{
 float:left;
 font-weight:normal;
 background:#fff;
 display:block;
 padding-right:5px;
}
#Menu ul li em{
 font-style:normal;
 background:#fff;
 padding-left:5px;
}

私的には、難しく考え過ぎるとどんどんはまっていくタイプのTipsですかね。

２．backgroundで指定したlistイメージだけが左に飛び出る

まずHTML側

<div class="Navi">
  <ul>
    <li><a href="#">test 2段目</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
  </ul>
</div>

そうしてCSS側


.Navi ul{
 margin:0;
 padding:0;
}
.Navi ul li{
 list-style:none;
 margin:0 0 5px 0;
 padding:0 0 5px 15px;
 text-indent:-15px;
 background:url(../images/line.gif) repeat-x bottom;
}
.Navi ul li a{
 text-decoration:none;
 background:url(../images/ul_li.jpg) no-repeat 0 3px;
 padding-left:15px;
}

3.リストでボタンを表現

この使い方がまぁ一番多いんでしょうけど、枠一杯までリンク範囲を広げる手っ取り早い方法です。

HTML側

<ul class="menuLink">
  <li><a href="#">Top</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Access</a></li>
</ul>

続いてCSS側。
ポイントはaタグでのline-heightと枠の大きさを決めるheightのpxを同じにすること。これだけだったんだねぇ・・・って感じのTipsです。

ul.menuLink li a{
	display:block;
	line-height:30px;
	height:30px;
	text-decoration:none;
}
ul.menuLink li a:hover{
	background:#F39803;
	color:#fff;
}
タグ:, , , , ,