1. Home
  2. Webテンプレート
  3. メニュー
  4. パンくずリスト1

パンくずリスト1



パンくずリスト(Topic Path)を作成するサンプルコードです。


表示例
  1. Home>
  2. Webテンプレート>
  3. メニュー>
  4. パンくずリスト
  • display: inline を指定して、li要素を横に並べています。
  • 「 > 」記号は、文字実体参照で「 > 」と記述しています。

コード

CSSコード


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

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

/* --- リンク --- */
ol.topicPath li a {
margin-right: 6px; /* リンクエリアの右マージン */
}

HTMLコード


<ol class="topicPath">
<li><a href="#">Home</a>&gt;</li>
<li><a href="#">Webテンプレート</a>&gt;</li>
<li><a href="#">メニュー</a>&gt;</li>
<li>パンくずリスト</li>
</ol>

備考

  • 階層を表すリストなので、ul要素ではなくol要素を使用しています。

メニュー

ページの先頭へ