パンくずリスト2

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

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

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

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

  1. ホーム
  2. テンプレート
  3. リスト
  4. パンくずリスト
  • display: inline を指定して、li要素を横に並べています。
  • 区切りの記号は、li要素内のa要素の背景に設定されています。
使用している画像

topic_path2.gif topic_path2.gif

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

コード

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

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

/* --- リンク --- */
.topicPath li a {
padding-right: 12px; /* リンクエリアの右パディング */
background: url(topic_path2.gif) no-repeat right; /* 区切りの記号 */
}
HTMLコード
<ol class="topicPath">
<li><a href="#">ホーム</a></li>
<li><a href="#">テンプレート</a></li>
<li><a href="#">リスト</a></li>
<li>パンくずリスト</li>
</ol>
inserted by FC2 system