HTMLのリストタグを学ぼう！箇条書き・番号付きリスト・定義リストの使い方

Webページで項目をリストとして並べたいときに使うのがリストタグです。リストを使うことで、情報を見やすく整理できます。 HTMLには、3種類のリストタグがあります。

• 箇条書きリスト（<ul>）
• 番号付きリスト（<ol>）
• 定義リスト（<dl>）

1. 箇条書きリスト（<ul>）

   <ul>（unordered list）タグは、順番のないリスト（箇条書き）を作るときに使います。

   			<ul>
   			  <li>りんご</li>
   			  <li>みかん</li>
   			  <li>ぶどう</li>
   			</ul>
   		

   表示結果

   

   <ul> タグの中に <li>（list item）タグ を入れることで、リストの項目を作成できます。

---

2. 番号付きリスト（<ol>）

   <ol>（ordered list）タグを使うと、番号付きのリストが作れます。

   			<ol>
   			  <li>HTMLを学ぶ</li>
   			  <li>CSSを学ぶ</li>
   			  <li>JavaScriptを学ぶ</li>
   			</ol>
   		

   表示結果

   

   このように、<ol> を使うと 自動で番号が振られたリストになります。

   番号の種類を変更する

   list-style-typeで、番号のスタイルを変更できます。

   			ol.upper-alpha {
   				list-style-type: upper-alpha;
   			}
   		

   			<ol class="upper-alpha">
   			  <li>りんご</li>
   			  <li>みかん</li>
   			  <li>ぶどう</li>
   			</ol>
   		

   表示結果

   

   list-style-typeには、次のような値が使えます。

   type の値	表示形式
   "decimal"	1, 2, 3, ... （デフォルト）
   "upper-alpha"	A, B, C, ...
   "lower-alpha"	a, b, c, ...
   "upper-roman"	I, II, III, ...
   "lower-roman"	i, ii, iii, ...

---

3. 定義リスト（<dl>）

   <dl>（definition list）タグを使うと、用語の説明や辞書のようなリストを作れます。

   			<dl>
   			  <dt>HTML</dt>
   			  <dd>Webページを作るためのマークアップ言語</dd>
   			
   			  <dt>CSS</dt>
   			  <dd>Webページのデザインを整えるスタイルシート言語</dd>
   			</dl>
   		

   表示結果

   

   各タグの意味

   • <dt>（definition term）：用語を定義するタグ
   • <dd>（definition description）：用語の説明を書くタグ

---

4. リストの入れ子構造（リストの中にリストを作る）

   リストの中に別のリストを入れることも可能です。

   		<ul>
   			<li>フルーツ
   				<ul>
   					<li>りんご</li>
   					<li>みかん</li>
   					<li>ぶどう</li>
   				</ul>
   			</li>
   			<li>野菜
   				<ul>
   					<li>にんじん</li>
   					<li>じゃがいも</li>
   				</ul>
   			</li>
   		</ul>
   		

   表示結果

   

   リストの階層を作ることで、より見やすく整理できます。

まとめ

• <ul>（箇条書きリスト）：順番なしのリストを作る
• <ol>（番号付きリスト）：順番のあるリストを作る
• <dl>（定義リスト）：用語の説明や辞書形式のリストを作る
• リストの中にリストを入れて階層化できる

リストを使いこなせば、情報を整理して見やすいWebページが作れます！ぜひ実際に試してみてくださいね