• 締切済み

ulを使ったパンくずリストの使い方で困っています

ulを使ったパンくずリストの使い方で困っています パンくずリスト初めに現在位置という見出しを付けたいんですが <div id="pankuzulist"> <h3>現在位置</h3>もしくは<spna>現在位置</span> <ul> <li>1_page</li> <li>2_page</li> <li>3_page</li> <ul> </div> と <ul> <li>現在位置 <ul> <li>1_page</li> <li>2_page</li> <li>3_page</li> </ul> </li> </ul> という書き方を考えたんですけどこれはタグの使い方等々などから考えた場合どちらを使うべきでしょうか?

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

現在位置が他のナビゲーションリンクと同じ位置づけなら、わざわざ<h3></h3>という見出し要素でマークアップするのはおかしいです。  パンくずリストは、文字通りたどってきた道順を示すための物で、本来のナビゲーションリンクとは異なります。  ですら、 <p class="breadcrumbList"><a href="/">ホーム</a>&nbsp;&gt;&nbsp;<a href="/book">書籍</a>&nbsp;&gt;&nbsp;<a href="/book/sea/">海</a>&nbsp;&gt;&nbsp;2ページ</p>  でよいはずです。 CSS: p.breadcrumbList{ font-weight:bold;} p.breadcrumbList a{font-weight:normal;}  これは、パンくずリストが # パス型 : そのページにどういう経路でたどり着いたのかを示す。動的。 # 位置型 : そのページがウェブサイトの階層構造のどこに位置しているかを示す。静的。 # 属性型 : そのページがどんな属性で分類されているかを示す。  のいずれでもよいはずです。 パンくずリスト - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88 )  こればパンくずリストではなく、サイトナビゲーションリストでしたら、 <ul>  <li><a href="/">ホーム</a></li>  <li><a href="/book">書籍</a>   <ol>    <li><a href="/book/sea">海     <ol>      <li><a href="P1.html">1ページ</a></li>      <li>2ページ</li>      <li><a href="P3.html">3ページ</a></li>     </ol>    </li>   </ol>  </li>  <li><a href="/diary">日記</a></li> </ul>  とかになるかもしれませんし・・・・。各テーマのホームだけ示す <ul>  <li><a href="/">ホーム</a></li>  <li><a href="/book">書籍</a></li>  <li><a href="/diary">日記</a></li> </ul>  をサイトナビゲーションとしてもよい。  できれば、そのサイトの樹構造に従って書いておくとよいです。  

回答No.3

HTML4/XHTMLではこのタグを使えと言う指定はありませんので、 スタイルシートを外した状態でパンくずリストと判断できるのであれば、どんな方法でもいいと思います。 これは私の書き方ですが、普段はスタイルシートで<h3>を隠しています。 <style> .topic-path h3 {display:none;} </style> <div class="topic-path"> <h3>現在地</h3> <ol> <li>Top</li> <li>カテゴリー</li> <li>ページ</li> </ol> </div> HTML5でのリンクメニューは<div>の代わりに<nav>を使うように規定されています。 それに項目一覧を表示するサンプルとして<ul>が使われていますが、パンくずリストであれば<ol>の方が良いと思います。

回答No.2

パンくずリストという名前ですが、内容自体は階層構造を記すものなので、私ならリストは使いません。 <p>現在位置は<em>1_page</em>の<em>2_page</em>の<em>3_page</em>です。</p>

  • zeff
  • ベストアンサー率69% (137/198)
回答No.1

自分なら定義リスト使ってddにulを入れますね。 <dl id="pankuzulist"> <dt>現在位置</dt> <dd> <ul> <li>1_page</li> <li>2_page</li> <li>3_page</li> </ul> </dd> </dl>