2009年09月11日

縦で区切るリストの表現(上下にボーダーがある場合)

こんにちは、馬場です。


webページ内で、
メニューの表示や新着の表示等、
1行ずつ枠線で区切って表示することが
良くあるかと思います。


少し簡単ですが、
縦で区切るリストの表現について
上下にボーダーがある場合と、
上下にボーダーが無い場合を
2回に分けて、ご紹介します。


ちなみに横で区切る場合の対応は
以前のページをご確認ください。
(以前のものを見れば、ほぼ解決してしまいそうですが・・・)
フッタ部分リンクメニューのリストタグによる実現方法




▼縦で区切るリストの表現(上下にボーダーがある場合)


縦で区切るリストの表現で
リストの上下にもボーダーがある場合は、
比較的簡単にできてしまうかと思います。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrapper">
<ul>
<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>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
#wrapper {

width:200px;
margin:auto;
padding:10px;

}
#wrapper ul {

list-style-type:none;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
#wrapper li {

padding:10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left bottom;

}


上記サンプルのように
liの下にボーダーを表示し、
ulの上へボーダーを表示すれば
問題無く対応できます。
(liの上とulの下でも問題ありません。また、borderでも対応可能です。)

・・・今回は簡単でしたが、
「上下にボーダーが無い場合」では
少しひねりを加えていますので、
ご安心を。

ホントに少しなので、
過度の期待は厳禁です。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 20:22 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。