スタイルシートの技

エクスプローラーのような表示を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要素のみで作れるという訳ですね。 ここで、リスト項目の横にある●や○の変わりに画像を一括で指定する を見た方は気づいたかも知れません。この●や○をファイルのアイコンに変えてしまえば良い訳ですね。 ちょっとやってみましょう。

16ピクセルアイコンリスト
フォルダ用サンプル画像  テキスト用サンプル画像  イメージ用サンプル画像

このアイコンの左端から「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

このようにすると、エクスプローラーのような階層構造もul要素だけで感覚的に分かりやすく操作できます。 私のCGIダウンロードページのパーミッション設定などはこのスタイルシートが使われています。

スタイルシートの説明なのですが、すべて16×16ピクセルの画像を使っているので、 共通部分を作ります。ul要素のクラスdirを作成してその子要素のliに対してすべて共通のスタイルシートをかけます。 ここで、「list-style-type: none;」はリストの●を無くすという意味になります。 これが無いと画像の横に●がついたままになります。 また初期状態だと画像が少しずれているので、 「background-position」で微妙に画像の位置を調整しています。