基本的な縦型リストの作り方

基本のHTMLソースコードは以下のとおりです。divでリストを囲まなくてもよいですが、メニュー部分ということがわかりやすいですし、デザインに幅が広がります。 class名は｢section｣でなくて、｢menu｣や｢submenu｣などでもよいです。

(X)HTMLコード

<div class="section">
<h2>メニュー</h2>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">最新情報</a></li>
<li><a href="#">事業内容</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /section -->

デザイン案１

ではデザインです。まずは基本ということで、リストマークを画像化、テキスト部分がアンカーになっているデザインにします。

サンプル

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   color:#fff;
   line-height:3.0;
   padding:2px 5px 0px 5px;
   background:#3C3C3C;
}

div.section ul{
   margin:5px 0 0 0;
   padding:0;
   list-style:none;
}

div.section li{
   margin:0 0 0 5px;
   padding-left:10px;
   font-size:12px;
   line-height:2.0;
   border-bottom:1px solid #fff;
   background:url(bg_list.gif) 0 50% no-repeat;
}

div.section a {
   color:#5A5D00;
   text-decoration:none;
}

div.section a:hover {
   color:#7B8200;
   border-bottom:1px solid #7B8200;
}

リストマークを画像化するためには、ulでlist-style(-type)をnoneにし、liの背景画像でリストを表示するのが一般的です。リストの位置は、background-posionで指定（今回は一括指定しています。）、リストとテキストの余白はliのpadding-leftで調整します。

デザイン案２

上記の場合、アンカー領域がテキスト部分のみなので、人によってはクリックしにくい場合もあるかもしれません。そういう場合は、リスト部分をアンカー領域にしてクリックしやすくします。

サンプル

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   text-align:center;
   background:#295DAD url(bg_h2.gif) 0 0;
   line-height:3.0;
   color:#fff;
}

div.section ul {
   margin:0;
   padding:0;
   list-style-type:none;
}

div.section li {
   margin:0;
   padding:0;
   font-size:12px;
   color:#333;
   padding-bottom:1px;
   background:#fff url(bg_dotline.gif) 0 100% repeat-x;
}

div.section li a {
   display:block;
   color:#7C9C2D;
   padding:10px 0 10px 20px;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

div.section li a:hover {
   color:#9CC23D;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

ポイントは、a要素を｢display:block;｣でブロック要素にすることです。そして、リストの画像をli要素ではなくa要素に指定する事です。こうすることで、リストマークのところまでクリックできるようになります。