順序リストとCSSを組み合わせる

XHTMLソース

<ol id="topicPath">
 <li><a href="../">ホーム</a></li>
 <li><a href="./">製品情報</a></li>
 <li>製品名</li>
</ol>

CSSソース

ol#topicPath {
     margin: 10px 0;
}
ol#topicPath li {
     display: inline;
     line-height: 110%;
     list-style-type: none;
}
ol#topicPath li a {
     padding-right: 10px;
     background: url(img/glue.gif) no-repeat right center;
}

floatプロパティを使用する

CSSソース

ol#topicPath {
     float: left;
     width: 500px;
     margin: 10px 0;
}
ol#topicPath li {
     float: left;
     line-height: 1.1;
     list-style-type: none;
}
ol#topicPath li a {
     margin-right: 5px;
     padding-right: 10px;
     background: url(img/glue.gif) no-repeat right
     center;
}

alt属性を使用する

XHTMLソース

<p id="topicPath">
 <a href="../">ホーム</a>
 <img src="/img/entry/glue.gif" alt="の中の" />
 <a href="./">製品情報</a>
 <img src="/img/entry/glue.gif" alt="の中の" />
 製品名
</p>

CSSソース

p#topicPath {
     display: inline;
}
p#topicPath img {
     margin: 0 5px;
}

• 第4章 ユーザビリティを向上させるCSSデザインの法則