第17回 XHTMLの設計～状況に合った要素選び（2）～

益子貴寛

2007.03.02

　XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。

ナビゲーションはul要素でマークアップ

　ナビゲーションはul要素（順不同リスト）でマークアップするのが基本だ。項目（ボタン）それぞれを縦に並べるか横に並べるかはCSSで自由にコントロールできる。大切なのは、「並列的に列挙するコンテンツにはul要素を使う」という判断が先にあり、見栄えをどうするか考えるのは後の話ということだ。

中部大学はナビゲーション類をul要素で適切にマークアップしている
[画像のクリックで拡大表示]

　ひとくにナビゲーションといっても、さまざまなコンテンツが考えられる。たとえば以下のようなものがある。

　・グローバルナビゲーション（サイト内の主要カテゴリーのリンクリスト）
　・ローカルナビゲーション（カテゴリー内またはページ内のリンクリスト）
　・ユーティリティ（サイトのご利用方法、アクセス、サイトマップ、お問い合わせなどのリンクリスト）
　・ポリシー（個人情報保護方針、セキュリティ方針、著作権・免責事項などのリンクリスト）

　たとえば「ポリシー」を考えてみると、ページの最下部、つまりフッター部分に含められることが多い。フッター部分では、コピーライト表記をあわせて示すのが一般的といってよいが、どちらも含めた場合のマークアップ例を以下に示そう。

<div id="footer">
  <ul>
    <li><a href="...">個人情報保護方針</a></li>
    <li><a href="...">セキュリティ方針</a></li>
    <li><a href="...">著作権・免責事項</a></li>
  </ul>
  <address>
    Copyright &copy; xxx, Inc. All Rights Reserved.
  </address>
</div>

ポリシーとコピーライト表記のマークアップ例

ナビゲーションに見出しをつける場合

　もう一歩踏み込んで、ナビゲーションをul要素で示すだけでなく、その直前に見出しをつけておく方法も利用される。たとえばグローバルナビなら「主なカテゴリー」といった文言を見出に含めておく（ターゲットユーザーのリテラシーレベルによっては、丁寧な言い回しでよりわかりやすく書く）。マークアップ例を示すと次のとおりだ。

<div id="globalnav">
  <h2>主なカテゴリー</h2>
  <ul>
    <li><a href="...">ホーム</a></li>
    <li><a href="...">製品</a></li>
    <li><a href="...">サービス</a></li>
    <li><a href="...">サポート</a></li>
    <li><a href="...">会社情報</a></li>
  </ul>
</div>

グローバルナビに「主なカテゴリー」という見出しをつけた例

　このように示した見出しは、ビジュアルブラウザで見える状態にしておく必要はないケースがほとんどであるから（つまり音声ブラウザやテキストブラウザなどCSSが利用できない環境で利用できればよいため）、CSSで不可視化しておく。

　なお、「パンくずリスト」（トピックパス。ホームからそのページまでの軌跡を示したもの）にul要素を利用しているケースもよく見受けられる。個人的には、必ずしもul要素を使う必要はないと考えるが、もし使うのであれば次のようにマークアップする。

<div id="topicpath">
  <h2>サイト内でのこのページの位置</h2>
  <ul>
    <li><a href="...">ホーム</a> &gt;</li>
    <li><a href="...">サポート</a> &gt;</li>
    <li>ビジネスサポート</li>
  </ul>
</div>