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

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

前回の続きでパンくずリストを取り扱っていきます。

前回はcontentプロパティbefore疑似要素を使って、要素の間に記号を入れる方法をご紹介しました。

ただこの方法はブラウザーのバージョンによりCSSの対応に問題があるのがすこしやっかいです。

ということで今回は背景画像、つまりbackground-imageを使って記号を入れていきます!テクニックは第3回「CSSでリストをデザインする」と同じですね。

<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は前回と同じものと使います。

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

.topicpath ol li a {
    /* aの背景画像に記号の画像を指定 */
    background-image: url(../crumb.gif);

    /* 右寄せ&リピート無し */
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 10px;
}

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

前回よりコードがだいぶすっきりしました。しかも画像なので、自由なデザインにすることができ、paddingで間隔調整も楽々です。

ま た、細かい点ですが、セレクターを.topicpath ol liではなく、.topicpath ol li aとしています。サンプルのXHTMLをみるとわかりますが、最後の"CSS"という文字列は<a>でマークアップされていないので、背景画像が入ることはありません。

これならわざわざfirst-childを使う必要もないのでカンタンですね。

ということで前回に続いてパンくずリストの作り方をご紹介しました。パンくずリストを作る方法は他にも数多くありますのでまた機会があればご紹介したいと思います。

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

次のページは…
知らなきゃ損!Dreamweaverのスニペットを使おう!
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

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

CSS 3分コーディング

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