≪ 目次　＜ 名前順要素一覧　［ 戻る ］　使用例 ↓

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

OL要素 - 順序リスト / UL要素 - 順不動リスト

Ordered List
OL要素は、LI要素の内容を順序リストとして表示する、ブロック要素。
  • 要素の内容は、１個以上のLI要素です。
Unordered List
UL要素は、LI要素の内容を順不動リストとして表示する、ブロック要素。
  • 要素の内容は、１個以上のLI要素です。

LI要素 - リストの内容

List Item
LI要素は、UL/OL要素の子要素で、リストの内容を記述します。
  • 要素の内容は０個以上ブロック/インライン要素（Flow）ですが、
    <li></li>
    では意味がありません。１個以上の要素が必要です。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!ELEMENT ul (li)+>
<!ATTLIST ul
  %attrs;  >
<!ELEMENT ol (li)+>
<!ATTLIST ol
  %attrs;  >
<!ELEMENT li %Flow;>
<!ATTLIST li
  %attrs;  >

使用例

　XXXX　　はHTMLサンプルです。

　XXXX　　はHTMLサンプルの表示例です。

順不動リスト順序リスト
HTML記述
<ul>
<li>キーボード</li>
<li>CPU</li>
<li>CRT</li>
</ul>
表示例
  • キーボード
  • CPU
  • CRT
HTML記述
<ol>
<li>1番目の内容</li>
<li>2番目の内容</li>
<li>3番目の内容</li>
</ol>
表示例
  1. 1番目の内容
  2. 2番目の内容
  3. 3番目の内容


IE での表示


少し古いバージョンのSleipnir での表示

ブラウザによりマーカーが要素内に表示されるのか要素外に表示されるのかは統一されていないようです。

スタイルシートの list-style-position プロパティを使用する事により、ブラウザによる表示の違いをなくす事ができます。

リストの中にリストを加える。

HTML記述
<ol>
<li>１番目の内容
<ol>
<li>1-1の内容</li>
<li>1-2の内容</li>
</ol>
</li>
<li>２番目の内容</li>
<li>３番目の内容</li>
</ol>
表示例
  1. １番目の内容
    1. 1-1の内容
    2. 1-2の内容
  2. ２番目の内容
  3. ３番目の内容

≪ 目次　＜ 名前順要素一覧　［ 戻る ］　Top ↑

Created：Jun 01, 2005 Updated：Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新