CSSとは～CSSについて学ぼう

第6回　CSSでリストをパンくずリストにする【1】：CSS 3分コーディング

前々回の応用編ということで再びリスト、<ol>と<li>を扱っていきます。

前々回は<li>を横並びに表示するテクニックをご紹介しましたが、これをちょっと応用すればパンくずリストがさくっと作れます。

パンくずリストとはトピックパスとも言われ、Webサイトの構造を表すリストのことで、

「今、自分がサイト内のどこを閲覧しているか」

を簡単に確認できるというメリットがあります。

こういうやつですね。

どの要素でマークアップするのが適当かという議論もありますが、ここでは<ol>と<li>でやってみたいと思います。

<div class="topicpath">
    <ol>
        <li><a href="#">トップページ</a></li>
        <li><a href="#">講座一覧</a></li>
        <li><a href="#">Dreamweaver</a></li>
        <li>CSS</li>
    </ol>
</div>

XHTMLの構造は前々回とほとんど同じですが、<ul>ではなく、<ol>を使っている点が少し違います。<ol>は、順番ありのリストです。サイトの構造を表すという意味では順番がないよりはあったほうがしっくりする気がします（やや弱気）。

横並びにするだけであればdisplayプロパティをinlineにするだけで解決ですが、今回はパンくずリストなので要素と要素の間に「 > 」こういう記号を入れたいわけです。

XHTML文書内に単純に記述してしまう方法もありますが、記号自体には何ら意味がないので、できればCSSで実現したほうがいいと思います。

ということで今回のポイントは、

『contentプロパティとbefore疑似要素を使って、要素の間に記号を入れる！』

です。

contentプロパティは、要素の前か後に文字や画像（つまりコンテンツ）を追加する、という役割を持っており、beforeまたはafter疑似要素と組み合わせて使います。そのまんまですが、

• beforeであれば要素の前
• afterであれば要素の後

となります。

こうしたい場合、単純に考えると要素の後に「 > 」を加えてやればよさそうなのでやってみます。

.topicpath ol li {
	/* liを横並び＆ブレットを消す */
	display: inline;
	list-style-type: none;
}
.topicpath ol li:after {
	/* liの後に記号追加 */
	content:" > ";
}

するとだいたいこんな感じになるはずです。問題は最後の要素にも「 > 」が入ってしまう点です。これはヘンなので消したいところですが、残念ながらCSS2.1のセレクタでは「最後の要素だけ」というのが指定できないので す。（CSS3ではできるようになります。）

しかし、「最初の要素だけ」というのはCSS2.1でも指定できるので、先ほどとは逆に要素の前に「 > 」を加えて、先頭のみ消す、という方法をやってみます。

.topicpath ol li {
        /* liを横並び＆ブレットを消す */
        display: inline;
        list-style-type: none;
}

.topicpath ol li:before {
        /* liの前に記号追加 *
        content: " > ";
}

.topicpath ol li:first-child:before {
        /* 最初のliだけcontentを消す */
        content: none;
}

このfirst-childというのは疑似クラスの1つで、ある要素内の最初の要素のみを指します。つまり今回は<ol>の中の一番最初 の<li>を指しています。そしてcontentプロパティをnoneとして、「 > 」を消しているわけです。

が、一見スマートなこの方法、実は現状では問題だらけです。

• before疑似要素はIE6およびIE7が未対応
• first-child疑似クラスはIE6が未対応（IE7はOK）
• contentプロパティnoneはFirefox3、IE8以外未対応

ということで「使えない！」という結論が出てしまいそうですが、とりあえず最新のブラウザーだけでも何とかするのであれば、

.topicpath ol li {
        /* liを横並び＆ブレットを消す */
        display: inline;
        list-style-type: none;
}

.topicpath ol li:before {
        /* liの前に記号追加 *
        content: " > ";
}

.topicpath ol li:first-child:before {
        /* 最初のliだけcontentを消す */
        content: none;
}

ちょっとかっこわるい？かもしれませんがこのように空白を入れてしまうのが手っ取り早いかもしれません。これで、下記のブラウザーは対応できます。

• Firefox 3
• Internet Explorer 8
• Safari 3
• Google Chrome
• Opera 9

ただIE6とIE7が対象外なのはちょっと厳しいですね。ということで次回は他の方法をご紹介します。

では次回もお楽しみに。

（こう）