リスト要素の簡単リスト|HTMLタグ

HTMLタグの”list要素”に関するリストです。その名の通りタグで囲まれたテキストを一覧にして表示します。
標準は行頭に”●”が付きインデントされて表示されます。使い方も多種多様でSEOの観点から見ても重要なタグです。

HTMLタグのリスト要素に関するリスト

マークリスト(UL)の基本構成

  • <ul>(マークリスト)
  • <li>(リスト項目)

連番リスト(OL)の基本構成

  • <ol>(連番リスト)
  • <li>(リスト項目)

定義リスト(DL)の基本構成

  • <dl>(定義リスト)
  • <dt>(リスト見出し)
  • <dd>(リスト内容)

マークリスト(ul要素)の基本構成

<ul>

マーク付のリストボディを作成する。この<ul></ul>の中にリスト項目を任意の数だけ追加する。

<li>

行を作成する。この<li></li>の中に表示させたいブロック要素/インライン要素を記述。デフォルトでは行頭に”●”が付けられる。
この要素の中に入れ子でリストを含めていくことで複雑なリストを作成することもできる。

CSSで扱える属性
type(マークの種類)
disc(●)
circle(○)
square(■)
その他のテーブルに関するスタイルシートはこちら:
CSSプロパティ リストに関してのシート

サンプルリスト|UL要素

  • 項目1
  • 項目2
  • 項目3
<ul>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ul>

連番リスト(ol要素)の基本構成

<ol>

連番付のリストボディを作成する。この<ol></ol>の中にリスト項目を任意の数だけ追加する。

<li>

行を作成する。この<li></li>の中に表示させたいブロック要素/インライン要素を記述。デフォルトでは行頭に”1″が付けられる。
この要素の中に入れ子でリストを含めていくことで複雑なリストを作成することもできる。

CSSで扱える属性
type(マークの種類)
decimal(1)
lower-alpha(a)
upper-alpha(A)
upper-roman(ⅰ)
lower-roman(Ⅰ)
start
数値(開始番号)
value
数値(途中の番号を変更)
その他のテーブルに関するスタイルシートはこちら:
CSSプロパティ リストに関してのシート

サンプルリスト|OL要素

  1. 項目1
  2. 項目2
  3. 項目3
<ol>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ol>

定義リスト(dl要素)の基本構成

<dl>

定義のリストボディを作成する。この<dl></dl>の中にリスト項目を任意の数だけ追加する。<dt>見出し</dt>の説明は<dd>内容</dd>となる。

いくつもの見出し(dt要素)と内容(dd要素)を含めることができる。ただし<dt>のみを記述することは避けたほうが良い。

<dt>

見出しを定義する。この<dt></dt>の中に表示させたいインライン要素を記述。
この要素はインライン要素のためブロック要素は含めることができない

<dd>

見出しを定義する。この<dd></dd>の中に表示させたい要素を記述。
ブロック要素/インライン要素ともに記述できる。

CSSで扱える属性
type(マークの種類)
disc(●)
circle(○)
square(■)
その他のテーブルに関するスタイルシートはこちら:
CSSプロパティ リストに関してのシート

サンプルリスト|DL要素

見出しA
内容1
内容2
見出しB
内容1
<dl>
	<dt>見出しA</dt>
		<dd>内容1</dd>
		<dd>内容2</dd>
	<dt>見出しB</dt>
		<dd>内容1</dd>
</dl>