パンくずリスト1

無料・有料 レンタルサーバー比較

パンくずリスト（Topic Path）を作成するHTMLとCSSのサンプルコードです。

［テンプレートのご利用について］

  1. ホーム>
  2. テンプレート>
  3. リスト>
  4. パンくずリスト
  • display: inline を指定して、li要素を横に並べています。
  • 「 > 」記号は、文字実体参照で「 > 」と記述しています。
  • 「 > 」記号の代わりに、URL風に「 / 」を使用してもいいかもしれません。

コード

CSSコード
/* --- リストエリア --- */
.topicPath {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 80%;
}

/* --- リスト項目 --- */
.topicPath li {
display: inline;
}

/* --- リンク --- */
.topicPath li a {
margin-right: 6px; /* リンクエリアの右マージン */
}
HTMLコード
<ol class="topicPath">
<li><a href="#">ホーム</a>&gt;</li>
<li><a href="#">テンプレート</a>&gt;</li>
<li><a href="#">リスト</a>&gt;</li>
<li>パンくずリスト</li>
</ol>
inserted by FC2 system