トップ ＞ スキル ： Web ＞ 要素解説

Web

リストに関する要素

<ul>　（Unordered List：順不同リスト）

意味 箇条書きやリスト項目の集合を定義します。各項目は、li要素でマークアップします。
分類 ブロックレベル要素
包括可能要素 li要素のみ
スタイル 行頭文字は黒丸「list-style-type:disc;」、外余白は「margin:1em 40px;」となります。
一般属性 id、class、style、title
使用上の注意 ul要素の子要素はli要素のみです。
li要素はブロックレベル要素を包括できるので、2重リストを作ることが可能ですが、その場合は必ず2段目以降のul要素の親要素はli要素にする必要があります。
ul要素のすぐ下にul要素を記述することはできません。

■ サンプルコードと結果

HTML

    	<body>
        	<p>ul要素は以下のようになります。</p>
            <ul>
            	<li>これは１項目のリストです。</li>
                <li>これは２項目のリストです。</li>
                <li>これは３項目のリストです。</li>
            </ul>
    	</body>
ul結果

<ol>　（Ordered List：順序リスト）

意味 項目の順番に特別な意味を持つリストを定義します。各項目は、li要素でマークアップします。
分類 ブロックレベル要素
包括可能要素 li要素のみ
スタイル 数字で順番「list-sytle-type:decimal」と上下左右の外余白「margin:1em 40px」となります。
一般属性 id、class、style、title
使用上の注意 順序リストを使うのは項目順に特別な意味があり、順番を入れ替えてしまうと間違って伝わってしまうケースの時に使用します。
順番が違っても、特に問題のないのであればul要素を使います。
項目の先頭の番号などの印は、スタイルシートで指定します。

■ サンプルコードと結果

HTML

    	<body>
        	<p>ol要素で小説の書き方の順番を表示します。</p>
            <ol>
            	<li>起</li>
                <li>承</li>
                <li>転</li>
                <li>結</li>
            </ol>
    	</body>
ol結果

<li>　（List Item：リスト）

意味 各種リスト（定義リストは除く）のリスト項目を定義します。
分類 ul、ol、menu、dir要素の子要素
包括可能要素 ブロックレベル要素、インライン要素
スタイル リストスタイルの位置が外側「list-style-position:outside」となります。
一般属性 id、class、style、title
使用上の注意 終了タグは省略しても表示される場合がありますが、必ず終了タグを書くようにします。
リストは複数の入れ子状態を作ることができますが、複雑なものであれば、見出しに置き換えた方が構造的に簡潔に記述できます。

■ サンプルコードと結果

HTML

    	<body>
            <ul>
            	<li>リスト１</li>
                <li>リスト２
                	<ul>
                    	<li>リスト２－１</li>
                        <li>リスト２－１</li>
                    </ul>
                </li>
                <li>リスト３</li>
            </ul>
    	</body>
li結果

<dl>　（Definition List：定義リスト）

意味 定義リストを表します。定義リスト（dl要素）は、定義する語（dt要素）とその語の解説（dd要素）を一対にして作成します。用語の説明に限らず、対話文での話し手の名前をdt要素、会話内容をdd要素でマークアップしていくような使い方もできます。
分類 ブロックレベル要素
包括可能要素 dt要素、dd要素
スタイル なし
一般属性 id、class、style、title
使用上の注意 厳密にdt要素とdd要素を交互に使う必要はありませんが、段落を変えるためにdd要素を連続記述することはやめたほうが良いです。
dl要素はリストを形成するので、dt要素を見出し要素で置き換えられるのであれば、無理にdl要素を使う必要はありません。
dl要素は、ある用語とその説明が対になるようなものが複数存在する時に使用するのが得策です。

■ サンプルコードと結果

HTML

    	<body>
            <dl>
            	<dt>Word</dt>
                <dd>ワープロソフトである。</dd>
                <dt>Excel</dt>
                <dd>表計算ソフトである。</dd>
                <dt>Access</dt>
                <dd>データベースソフトである。</dd>
            </dl>
    	</body>
dl結果

<dt>　（Definition Term：定義用語）

意味 定義リスト（dl要素）内における定義された用語を表します。定義リストの中に複数並べることができます。
分類 dl要素の子要素
包括可能要素 インライン要素
スタイル なし
一般属性 id、class、style、title
使用上の注意 dt要素はdd要素とは異なり、インライン要素しか含むことはできません。
dt要素とdd要素は兄弟関係なので、並列に書いていきます。

<dd>　（Definition Description：定義説明）

意味 定義リスト（dl要素）内の定義語（dt要素）の説明を表します。定義リストの中に複数並べることができます。
分類 dl要素の子要素
包括可能要素 ブロックレベル要素、インライン要素
スタイル インデント（text-indent:40px）
一般属性 id、class、style、title
使用上の注意 dd要素はインデントのために用いるべきではありません。
dd要素は、あくまでもdt要素の定義語の意味を解釈する場合に用います。

【リストに関する要素】