メモ：ツリーをＣＳＳと画像で
当ホームページの「Site Map」で使っているツリーは以下のように作られています。
・該当個所のスクリーンショット
ツリー用の画像１：
と２：
と３：
XHTML
<div class="main-pane">
<ul>
<li class="dir"><span>main</span>
<ul>
<li><a href="main/bamboo2p.html">2 Piece Rod</a></li>
<li><a href="main/bamboo3p.html">3 Piece Rod</a></li>
<li><a href="main/bamboo45p.html">4-5 Piece Rod</a></li>
<li><a href="main/bamboo_thumb_idx.html">Bamboo Rod Index</a></li>
<li><a href="main/handmade_rseat.html">Reel Seat</a></li>
<li><a href="main/case.html">Case</a></li>
<li><a href="main/seleguide.html">Selection Guide</a></li>
<li class="end"><a href="main/faqs.html">FAQ</a></li>
</ul>
</li>
</ul>
</div>
CSS
#main-pane ul li.dir span
{
font-family : Verdana, Arial, Sans-Serif;
color : #696969;
background : url(../image_theme/folder_14.gif)〔１の画像〕 left center no-repeat;
font-size : 1.2em;
font-weight : bold;
padding-left : 23px;
}
#main-pane ul li ul
{
margin-left : 8px;
}
#main-pane ul li ul li a ,
#main-pane ul li ul li.end a
{
font-family : Verdana, Arial, Sans-Serif;
font-weight : normal;
padding-left : 15px;
}
#main-pane ul li ul li
{
background : url(../image_theme/dir_sub.gif)〔２の画像〕 left center no-repeat;
}
#main-pane ul li ul li.end
{
background : url(../image_theme/dir_end.gif)〔３の画像〕 left center no-repeat;
}
入れ子にしたリスト<li>の行頭に画像をバックグラウンドで読み込ませているわけです。２と３の画像は破線にするといいかも。
更新：2005-4-04
２と３の画像に当たる#main-pane ul li ul li a と #main-pane ul li ul li.end a から「a」を削除しました。こうするとツリーが途切れることなく表示されます。透過gifは面白いです。
