Tweet

リファレンスインデックスへ

CSSで“リスト”をきれいに見せる6つのXHTMLタグ

ナビゲーションやサイトマップなどでよく使われる、順不同リスト・序列リスト・定義リストをXHTMLで正しく表現するタグを紹介します

リスト（個条書き項目）を表現するタグ

　今回はナビゲーションやサイトマップのページなどでよく使われる、リストとなる部分をHTMLで表現するタグを紹介していきます。HTMLでのリスト表現は、大きく分けて以下の3つに分けられます。

• 順不同リスト
  並べ方に一定の基準がない番号なしリストでul要素を使って構成していく
• 序列リスト
  順序が決まっている番号付きリストに使われ、ol要素に使って構成していく
• 定義リスト
  dl要素で構成していくリストで「用語」「説明」のセットで構成していく

　それぞれ文書の構造を意識したうえで、適切にマークアップを行いましょう。

ul要素

　ul要素は順不同リストを表す際、各リスト項目のコンテナとして機能します。ブロックレベル要素として機能し、子要素としてli要素を持ちます。

　ul 順不同リストのコンテナとなるul要素

li要素

　li要素はリスト項目を表す要素です。親要素としてul要素やol要素を持ち、li要素の入れ子として表現することもできます。

　li リスト項目を表すli要素

ol要素

　ol要素は序列リストを表す際、各リスト項目のコンテナとして機能します。ブロックレベル要素として機能し、子要素としてli要素を持ちます。

　ol 序列リストのコンテナとなるol要素

dl要素

　dl要素は定義リストを表す際、dt要素とdd要素のコンテナとして機能します。ブロックレベル要素として機能し、子要素にdt要素とdd要素を持ちます。

　dl 定義リストのコンテナとなるdl要素

dt要素

　dt要素は定義リストの用語を表す際に使います。dl要素の子要素として、インライン要素を内包できます。

　dt 定義リストの用語を表すdt要素

dd要素

　dd要素は定義リストの説明を表す際に使います。dl要素の子要素として、インライン要素とブロックレベル要素を内包できます。

　dd 定義リストの説明を表すdd要素

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

1/7

INDEX
Web標準HTMLタグリファレンス（3） CSSで“リスト”をきれいに見せる6つのXHTMLタグ リスト
	ul 順不同リストのコンテナとなるul要素
	li リスト項目を表すli要素
	ol 序列リストのコンテナとなるol要素
	dl 定義リストのコンテナとなるdl要素
	dt 定義リストの用語を表すdt要素
	dd 定義リストの説明を表すdd要素

【関連記事】

デザイナーのためのWeb学習帳 Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう！ 「デザインハック」コーナー

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード