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

パンくずリスト2



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

このサンプルでは、「 > 」記号を画像で作成し、それを区切りの部分に表示させています。


表示例
  1. Home
  2. Webテンプレート
  3. メニュー
  4. パンくずリスト
  • display: inline を指定して、li要素を横に並べています。
  • 区切りの記号は、li要素内のa要素の背景に設定されています。

使用している画像

topic_path2.gif topic_path2.gif

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

コード

CSSコード


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

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

/* --- リンク --- */
ol.topicPath li a {
padding-right: 12px; /* リンクエリアの右パディング */
background: url(topic_path2.gif) no-repeat right; /* 区切りの記号 */
}

HTMLコード


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

備考

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

メニュー

ページの先頭へ