<OL>

順序リスト(Ordered List)を作成します。順序リストとは、リスト項目の先頭に数字またはアルファベットが付くリストである。リスト項目は<LI>タグで追加します。

リストは字下げ(インデント)して表示されるが、字下げ幅はブラウザによって異なる。どのブラウザを使うかに関わらず同じように表示するようスタイルシートで指定することもできるが、その方法はブラウザによって異なる。例えば、Internet Explorer 6.0はマージンの指定によって字下げを行っているので、スタイルシートmargin-leftで指定する。Firefox 2.0はパディングの指定によって字下げを行っているので、スタイルシートpadding-leftで指定する。つまり、Internet Explorer 6.0とFirefox 2.0で同じように表示させるためには、スタイルシートmargin-leftとpadding-leftの両方に同じ値を指定する必要がある。実際の例を次に示す。

<ol style="margin-left: 5px; padding-left: 5px">

書式

<OL [attribute=value ...] content-model </OL>

開始タグと終了タグは省略できません。 開始タグと終了タグの間にはLI要素タイプが1回以上出現します。

属性

属性は全て省略可能です。

type
リスト項目の先頭に付ける数字の形式を指定します。スタイルシート属性 list-stylelist-style-typeでも指定することができます。
意味
1アラビア数字(1, 2, 3, ...)
a英小文字 (a, b, c, ...)
A英大文字 (A, B, C, ...)
iローマ数字 (i, ii, iii, ...)
Iローマ数字 (I, II, III, ...)

HTML の各要素は DTD によって定義されています。 OL 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

<ol>タグの使用例と表示サンプル

HTMLタグ <ol> の使用例と表示サンプルを次に示します。

<ol>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
<ol type="a">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
<ol type="A">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
<ol type="i">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
<ol type="I">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

関連CSS

<UL>

非順序リスト(Unordered List)を作成します。非順序リストとは、リスト項目の先頭に記号が付くリストである。リストに項目(List Item)を追加するには<LI>タグを使用します。

リストは字下げ(インデント)して表示されるが、字下げ幅はブラウザによって異なる。どのブラウザを使うかに関わらず同じように表示するようスタイルシートで指定することもできるが、その方法はブラウザによって異なる。例えば、Internet Explorer 6.0はマージンの指定によって字下げを行っているので、スタイルシートmargin-leftで指定する。Firefox 2.0はパディングの指定によって字下げを行っているので、スタイルシートpadding-leftで指定する。つまり、Internet Explorer 6.0とFirefox 2.0で同じように表示させるためには、スタイルシートmargin-leftとpadding-leftの両方に同じ値を指定する必要がある。実際の例を次に示す。

<ul style="margin-left: 5px; padding-left: 5px">

<ul>タグの書式

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
</ul>

開始タグと終了タグは省略できません。 開始タグと終了タグの間にはLI要素タイプが1回以上出現します。

<ul>タグの属性

属性は全て省略可能です。

type
リスト項目の先頭に付ける記号の形を指定します。 HTML 4.01 transitional の属性で、HTML 4.01 strict や XHTML では廃止されました。 代わりにスタイルシート属性 list-stylelist-style-typeで指定することができます。 また、スタイルシート属性 list-stylelist-style-image では画像を指定することもできます。
type属性
意味
disc黒丸
square四角
circle白丸

HTML の各要素は DTD によって定義されています。 UL 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例

HTMLタグ <ol> の使用例と表示サンプルを次に示します。

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
<ul type="square">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
<ul type="circle">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

関連CSS

<LI>

HTMLタグ<li>は、順序リストや非順序リストにリスト項目(List Item)を追加します。

書式

<LI [attribute=value ...] content-model </LI>

OL要素タイプおよびUL要素タイプの内容モデルであり、<OL> と </OL> の間、または <UL> と </UL> の間に記述します。

開始タグ

開始タグは省略できません。

終了タグ

HTMLでは終了タグを省略できます。

内容モデルを持つため、XHTMLでは終了タグを省略できません。

内容モデル

開始タグと終了タグの間にはブロック要素またはインライン要素が任意回数表れます。

属性

属性は全て省略可能です。

type
リスト項目の先頭に付ける記号の形または数字の形式指定します。HTML 4.01 Strict や XHTML では廃止されたため、スタイルシート属性 list-stylelist-style-type で指定します。
意味
disc黒丸(順序なしリストの規定値)
square四角
circle白丸
1アラビア数字(順序つきリストの規定値)
a英小文字 (a, b, c, ...)
A英大文字 (A, B, C, ...)
iローマ数字 (i, ii, iii, ...)
Iローマ数字 (I, II, III, ...)
value
順序付きリスト(<OL>)の場合、リスト項目の先頭に順序番号が付きます。順序番号は1から始まり、順番にひとつづつ増えていきます。value 属性は、このリスト項目の先頭に付ける番号を指定します。HTML 4.01 strict や XHTML 1.0 では廃止されました。

HTML の各要素は DTD によって定義されています。 LI 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ<li>の使用例と表示サンプルを次に示します。

<ul>
  <li type="disc">first</li>
  <li type="square">second</li>
  <li type="circle">third</li>
</ul>
<ol>
  <li type="a">first</li>
  <li type="a">second</li>
  <li type="a">third</li>
</ol>
  1. first
  2. second
  3. third
<ol>
  <li type="A">first</li>
  <li type="A">second</li>
  <li type="A">third</li>
</ol>
  1. first
  2. second
  3. third
<ol>
  <li type="i">first</li>
  <li type="i">second</li>
  <li type="i">third</li>
</ol>
  1. first
  2. second
  3. third
<ol>
  <li type="I">first</li>
  <li type="I">second</li>
  <li type="I">third</li>
</ol>
  1. first
  2. second
  3. third
<ol>
  <li value="3">first</li>
  <li value="2">second</li>
  <li value="1">third</li>
</ol>
  1. first
  2. second
  3. third

関連CSS

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送