トップ > スキル : Web > HTML5

Web

各要素のリファレンス6

グループ化要素(2/3)

ol要素(順序付きリスト)

カテゴリ フロー・コンテンツ
コンテンツモデル 0個以上のli要素
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 reversed(指定があれば降順、指定がなければ昇順)
start(最初の項目の順番を表され、指定の番号から順に各項目に番号を付与)
デフォルトスタイル ol{
    display:block;
    margin-top:1em;
    margin-bottome:1em;
    padding-left:40px;
    list-style-type:decimal;
}

ol要素は、順序に意味を持つリストを表します。もし、リストの順序が変わってしまうと、意味が変わってしまいます。もし、順序に意味のないリストであれば、ol要素を使います。

リストの項目は、li要素を使ってマークアップします。

■利用例
  <h3>オリンピックメダル獲得数(2008年まで)</h3>
  <ol>
  	<li>アメリカ</li>
  	<li>ドイツ</li>
  	<li>ロシア</li>
  </ol>
    

利用例をブラウザで表示すると次の図のようになります。

ol要素

ol要素の順序は1番から順番に表示されます。もし、途中の番号から始めたいのであれば、start属性を使って番号を指定します。次の利用例がサンプルコードです。

■利用例
  <h3>オリンピックのメダル獲得数4位以降</h3>
  <ol start="4">
  	<li>フランス</li>
  	<li>イギリス</li>
  	<li>イタリア</li>
  </ol>
    
ol要素

start属性の値は、負の値も利用できます。もし、start="-3"と指定した場合は、-3、-2、-1、0、1・・と表示されます。
また、論理属性であるreversed属性を使うと、項目の表示順は変わりませんが、順番を降順にすることができます。しかし、現時点(2011年7月)でreversed属性をサポートしているブラウザはありません。

ul要素(非順序リスト)

カテゴリ フロー・コンテンツ
コンテンツモデル 0個以上のli要素
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル ul{
    display:block;
    margin-top:1em;
    margin-bottome:1em;
    padding-left:40px;
    list-style-type:disc;
}

ul要素は項目のリストを表します。この要素は、項目の順序を変えても、意味が変わらないようなリストに使います。

■利用例
  <h3>日本の中心都市</h3>
  <ul>
  	<li>東京</li>
  	<li>名古屋</li>
  	<li>大阪</li>
  </ul>
    

利用例でいうと、どの都市が先になろうとも、後になろうとも特に構わないリストとなります。順序に意味を持たない箇条書きリストとして使います。

li要素(リスト項目)

カテゴリ なし
コンテンツモデル フロー・コンテンツ
利用可能な場所 ol要素、ul要素、menu要素の中
開始タグ 必須
終了タグ 該当のli要素の次に別のli要素が続く場合、または該当のli要素がその親要素の最後の子要素となる場合に省略できます。
要素固有のコンテンツ属性 この要素がol要素の中にある場合だけ、value属性を使えます。
デフォルトスタイル li{
    display:list-item;
}

li要素は、リストの項目を表します。
この要素は、ol要素の中にある場合は、valueコンテンツ属性を使うことができます。次の利用例のように使えます。

■利用例
  <h3>ボーリング大会結果</h3>
  <ol>
  	<li>田中 仁</li>
  	<li>森田 さやか</li>
  	<li value="2">砂山 道人</li>
  	<li value="4">佐藤 優華</li>
  	<li>森 晃志郎</li>
  </ol>
    

利用例をみると、2位が二人いるような場合の使い方になります。結果は次のようにブラウザ上に表示されます。

li要素

valueコンテンツ属性を使うことによって、順番の値を変えることができますが、これはol要素内にあるli要素だけに利用できます。

dl要素(記述リスト)

カテゴリ フロー・コンテンツ
コンテンツモデル 0個以上のdt、およびdd要素のグループ
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル dl{
    display:block;
    margin-top:1em;
    margin-bottom:1em;
}

dl要素は、名前と値がセットになったリストを表します。dl要素の項目として使う名前と値は、それぞれ対応付けられたものでなければいけません。なお、名前と値は1対1である必要はなく、1対多、多対1、多対多でも良いです。

■利用例
  <dl>
  	<dt>本のタイトル</dt>
  	<dd>初心者入門HTML</dd>
  	<dt>出版社</dt>
  	<dd>日本印刷JP</dd>
  	<dt>著者名</dt>
  	<dd>名無しの権兵衛</dd>
  </dl>
    

利用例をブラウザで表示すると次の図ようになります。

dl要素

もし、出版社名が分からなくて、そのdd要素をマークアップしなかったら、その記述方法は誤ったものになります。不明であれば、dd要素内に「不明」と表示されるように内容を書くようにします。

dt要素(用語)

カテゴリ なし
コンテンツモデル フレージング・コンテンツ
利用可能な場所 dl要素の中に記述するが、dd要素より前に来る必要がある。
開始タグ 必須
終了タグ 該当のdt要素の次にdt要素またはdd要素が来るなら省略できる。
要素固有のコンテンツ属性 なし
デフォルトスタイル dt{
    display:block;
}

dt要素は、dl要素の中で使い、その記述リストの項目名を表します。なお、用語定義の用語にdt要素を使うことがありますが、dt要素だけでは用語定義の用語を表すわけでなく、dfn要素を使う必要があります。

dd要素(用語の説明)

カテゴリ なし
コンテンツモデル フロー・コンテンツ
利用可能な場所 dl要素の中に記述するが、dt要素またはdd要素より後に来る必要がある。
開始タグ 必須
終了タグ 該当のdd要素の次にdt要素またはdd要素が来るなら省略できる。
要素固有のコンテンツ属性 なし
デフォルトスタイル dd{
    display:block;
    margin-start:40px;
}

dd要素は、dl要素の中で使い、その記述リストの項目の値を表します。

【各要素のリファレンス6】