第6回
CSSでリストをパンくずリストにする【1】テーブルレイアウトを卒業しよう

CSSでリストをパンくずリストにする【1】

前々回の応用編ということで再びリスト、<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疑似要素と組み合わせて使います。そのまんまですが、

となります。

パンくずリスト(トピックパス)

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

.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として、「 > 」を消しているわけです。

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

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


.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:"";
}

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

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

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSSでリストをパンくずリストにする【2】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読