[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

パンくずリスト（トピックパス）をリスト要素でマークアップすると？

　以下のようなページ構成のサイトがあると仮定して、「Dreamweaver」のページに表示するパンくずリスト（トピックパス）をリスト要素でマークアップする場合の一例をご紹介します。

  • ハードウェア
  • ソフトウェア
    • ウィンドウズ
      • ユーティリティ
      • セキュリティ
      • ホームページ作成
        • ホームページビルダー
        • Dreamweaver
        • GoLive
      • ゲーム
    • マッキントッシュ
  • 周辺機器
  • サプライ

　上のサンプルでは、<ul>要素にボーダーを付け、<ul>要素が入れ子になっている状態を分かりやすくしています。

パンくずリストの完成例（リスト要素を使用）

　リスト要素は前後に改行が入るブロックレベル要素なので、ＣＳＳのディスプレイプロパティをインラインにして横一列に並ぶようにします。

サンプルＨＴＭＬソースコード

　内容の順番に意味がある場合は順序付きリスト要素<ol>を使用することも考えられます。また、リスト要素を使わずに<p>要素等でパンくずリストを記述しても問題はありません。

<ul class="topicpath">
<li><a href="#">ソフトウェア</a></li>
<span>&gt;</span>
　　 <ul>
　　 <li><a href="#">ウィンドウズ</a></li>
　　 <span>&gt;</span>
　　　　 <ul>
　　　　 <li><a href="#">ホームページ作成</a></li>
　　　　 <span>&gt;</span>
　　　　　　 <ul>
　　　　　　 <li>Dreamweaver</li>
　　　　　　 </ul>
　　　　 </ul>
　　 </ul>
</ul>

サイトトップページへ戻る