スタイルシートの技
エクスプローラーのような表示をul要素のみで作る
CGIなどを配布しているサイト様などは、パーミッションなどの説明の際には、 エクスプローラーのような階層構造を用いて綺麗に作れたら便利だと思います。 これをテーブルで強引に作ったりしないでシンプルにul要素とスタイルシートのみで作る方法を紹介します。 ul要素はリスト用に使うものですが、実際は次のように階層構造を作る事ができます。
<ul>
<li>1階
<ul>
<li>紳士洋品・紳士雑貨</li>
<li>ドレスシャツ・ネクタイ</li>
<li>メンズアクセサリー</li>
</ul>
</li>
<li>2階
<ul>
<li>インテリア 寝具 家具</li>
<li>ギフトサロン</li>
<li>アートギャラリー</li>
</ul>
</li>
</ul>- 1階
- 紳士洋品・紳士雑貨
- ドレスシャツ・ネクタイ
- メンズアクセサリ
- 2階
- インテリア 寝具 家具
- ギフトサロン
- アートギャラリー
このように入れ子にする事も可能です。 つまり、応用すればエクスプローラーのような階層構造もul要素のみで作れるという訳ですね。 ここで、リスト項目の横にある●や○の変わりに画像を一括で指定する を見た方は気づいたかも知れません。この●や○をファイルのアイコンに変えてしまえば良い訳ですね。 ちょっとやってみましょう。
このアイコンの左端から「folder.gif」「text.gif」「image.gif」として下さい。 ダウンロードした時から名前はそうなっていると思います。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>エクスプローラ</title>
<style type="text/css">
ul.dir li
{
font-size: 11px
padding-left: 20px;
list-style-type: none;
background-repeat: no-repeat;
background-position: 0px 2px;
}
li.folder
{
background-image: url('folder.gif');
}
li.image
{
background-image: url('image.gif');
}
li.text
{
background-image: url('text.gif');
}
</style>
</head>
<body>
<h1>Explorer</h1>
<ul class="dir">
<li class="folder">www
<ul class="dir">
<li class="folder">main
<ul>
<li class="text">main.txt</li>
<li class="image">main.gif</li>
</ul>
</li>
<li class="text">sample.txt</li>
<li class="image">sample.gif</li>
</ul>
</li>
</ul>
</body>
</html>
- www
- main
- main.txt
- main.gif
- sample.txt
- sample.gif
- main
このようにすると、エクスプローラーのような階層構造もul要素だけで感覚的に分かりやすく操作できます。 私のCGIダウンロードページのパーミッション設定などはこのスタイルシートが使われています。
スタイルシートの説明なのですが、すべて16×16ピクセルの画像を使っているので、 共通部分を作ります。ul要素のクラスdirを作成してその子要素のliに対してすべて共通のスタイルシートをかけます。 ここで、「list-style-type: none;」はリストの●を無くすという意味になります。 これが無いと画像の横に●がついたままになります。 また初期状態だと画像が少しずれているので、 「background-position」で微妙に画像の位置を調整しています。