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

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

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

DreamweaverでCSSの使い方を習得: スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。; Dreamweaver CS5 CSSデザイン手法

前回は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;
}