箇条書き

Revised: 2nd/June/2002; Since: 29th/May/2002

HTML では、文書を作成するに当たって、高度な意味を持つ要素タイプが多数用意されています。その一つが箇条書きであり、順番付き箇条書き／順番なし箇条書き／説明付き箇条書きの三つが存在し、それぞれを表す要素タイプは、 ol, ul, dl になります。本節では、これら三つの箇条書きを記述します。

サンプルの準備

本節でも、前節で編集した index.html を引き続いて使います。用意ができていない方は、ソースをテキストエディタに貼り付けて、ファイル名を index.html にして保存してください。文字コードが選べる場合は、シフトＪＩＳ (Shift_JIS) を選んでください。

次のように表示されれば成功です：

順番無しリスト： ul 要素 - Unordered List

1. index.html をテキストエディタで開きましょう。
2. address 要素の説明の項の次に、次のソースを挿入します。

   <h3>ul 要素</h3>
   
   <p>順番なし箇条書きは、次の要素で構成されます。</p>
   
   <ul>
   	<li>ul 要素</li>
   	<li>li 要素</li>
   </ul>
   

   記述できたら、「上書き保存」してください。
3. index.html をブラウザで開いて確認しましょう。

次のように表示されれば成功です：

順番付き箇条書き： ol 要素 - Ordered List

1. index.html をテキストエディタで開きましょう。
2. ul 要素の説明の項の次に、次のソースを挿入します。

   <h3>ol 要素</h3>
   
   <p>順番付き箇条書きは、次のように記述します。</p>
   
   <ol>
   	<li>ol 要素を記述する</li>
   	<li>ol 要素の内容に li 要素を記述する</li>
   	<li>li 要素の内容に任意の要素を記述する
   		<ul>
   			<li>テキストレベルの内容が書ける</li>
   			<li>ブロックレベルの内容が書ける</li>
   		</ul>
   	    テキストレベルの内容には、普通の文字も含まれます。</li>
   </ol>
   

   記述できたら、「上書き保存」してください。
3. index.html をブラウザで開いて確認しましょう。

次のように表示されれば成功です：

説明付きリスト要素： dl 要素 - Definition List

1. index.html をテキストエディタで開きましょう。
2. ol 要素の説明の項の次に、次のソースを挿入します。

   <h3>dl 要素</h3>
   
   <p>箇条書きには次の三つがあり、全てブロックレベル要素です。</p>
   
   <dl>
   	<dt>ul 要素</dt>
   		<dd>順番なし箇条書きを表現する</dd>
   	<dt>ul 要素</dt>
   		<dd>順番付き箇条書きを表現する</dd>
   	<dt>dl 要素</dt>
   		<dd>説明付き箇条書きを表現する</dd>
   </dl>
   

   記述できたら、「上書き保存」してください。
3. index.html をブラウザで開いて確認しましょう。

次のように表示されれば成功です：