制作者の活動(PR)。

堀北真希ちゃんにうさぎの耳を付けたら可愛いだろうなと思って作った創作キャラクタ
主な作品

制作者の創作キャラクタのイラスト例とアニメーション動画

多重リストのリストアイテムを横に並べる方法。

CSSの小技として、多重リスト構造になっているリストのアイテムを横に並べる方法です。

リストアイテムを横に並べる方法と大体同じですが、入れ子になっているリストをどうするかと言う問題があります。

多重リストのリストアイテムを横に並べる方法・目次。

問題点。

今、以下のような多重リストがあるとします。

<ul class="navi">
    <li><a href="index.html">HTML 4/XHTML 1 リファレンス</a></li>
    <li>
        <ul>
            <li><a href="index-inline.html">インライン要素</a></li>
            <li><a href="index-block.html">ブロックレヴェル要素</a></li>
            </ul>
        </li>
    <li>&lt;del&gt;要素</li>
    </ul>

このリストは、外側リストの二番目の項目(<li>要素)にもう一つの<ul>要素が含まれ、多重リスト構造になっております。

リストアイテムを横に並べる方法で紹介した方法を用いた場合、内側の<ul>要素のdisplayプロパティを変更していない限り、外側リストの二番目の項目の前後で改行されるでしょう。

また、このような形式の場合、外側リストの三つの項目は横に並べ、二番目の項目内のリストは通常のリストのように縦に並べた方が分かり易いと思われます。

目的を果たせる仕様は策定中です。

つまり、インラインボックスの中に前後を改行しないブロックレヴェルボックスを入れられるようにしたいと言う訳です。

しかしながら、これを簡単に行うための仕様は、現在策定中であるもののまだ正式に勧告されておりません。

当面の代替策。

では、当面どうしたら良いでしょうか。

代替策 1・無理せずに構造が分かるような代わりのスタイルを考える。

一番無難な選択肢は、無理矢理実現しようとしないと言う事でしょう。

ただ、それだと、二番目のリスト項目が分かり難くなってしまいます。

いろいろな方法が考えられますが、その対策の一つとして、外側のリストの各項目には、背景色を付ける事で対応する事を考えて見ましょう。

例えば、以下のようなスタイルを当てます。

ul.navi {
    background: #fff;
    }

ul.navi li {
    background: #ddd;
    display: inline;
    margin: 0 0.25em;
    list-style-type: none;
    }

ul.navi li ul {
    background: transparent;
    display: inline;
    margin: 0;
    padding: 0;
    }

ここでは、外側のリストの各項目の背景を、薄いねずみ色で表現します。

内側のリストそのものは背景を透明とし、外側のリスト項目の背景(ねずみ色)をそのまま反映させます。

こうする事で、外側のリストの構造は見えるようになります。

尚、内側のリストの項目も横に並びますが、背景の色が変わっているため、外側のリストの一つの項目内と分かるようになるという訳です。

この他にも、外側の項目をボーダで囲むなどの方法もあるでしょう。

代替策 2・フローティングでアイテムを並べる。

CSS第二水準の仕様に即さない面があるため好ましいと言えませんが、フローティングで代用する事も出来ます。

現状、幅が不定のブロックレヴェルボックスをインラインボックスのように並べられる唯一の方法がフローティングとなっております。

つまり、floatプロパティで外側のリストの項目を左フロートしていきます。

外側のリストの項目内にある内側のリストは、通常のリストと同様縦に並べます。

CSS第二水準の仕様では、floatプロパティでフロートされる非置換要素は、特にwidthプロパティ幅を指定しない場合、幅は零、すなわち当該要素は空と見なされる事となります。

しかしながら、実際にはCSS第二水準準拠のユーザエージェントの殆どすべてに於いて、適切に幅が取られます。

そこで、これを活用する事で外側のリスト項目を並べていく事が可能になると言う訳です。

具体的には以下のようにします。

ul.navi {
    margin: 適切な余白;
    padding: 適切なパディング;
    }

ul.navi li {
    float: left;
    margin: 0 0.25em;
    padding: 0;
    list-style-type: none;
    }

ul.navi li ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

ul.navi li ul {
    background: transparent;
    display: inline;
    margin: 0;
    padding: 0;
    }

ul.navi li ul li {
    float: none;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

尚、この方法は、フロートされる各項目が幅を持ったボックスとなり、入り切らない場合には折返しになるため、右側に異様に大きな余白が出来てしまう場合もあります。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com