HTMLでWebページを作成するときにリストタグを使うと、そのページを見やすくさせることができます。
リストは「箇条書きリスト」「順序付きリスト」「説明リスト」の3種類があり、それぞれで使い方が異なってきます。
HTMLで使うリストは３種類ある
HTMLで使うリストは3種類あり、それぞれに適したリストタグを使う必要があります。
【リストの種類と使用タグ】
・箇条書きリスト : ulタグを使う
・順序付きリスト : olタグを使う
・説明リスト : dlタグを使う
これらのリストは、それぞれ使い方の意味が異なっているので注意する必要があります。
リストをマークアップする【書き方と見え方】
３種類のリスト
- 1.「箇条書きリスト」<ul>
- 2.「順序付きリスト」<ol>
- 3.「説明リスト」<dl>
1. 「箇条書きリスト」<ul>
箇条書きリストは項目を並べたもののリストのことで、順番を入れ替えても意味が変わらないリストに使います。
【書き方】
ulタグを使い、個々の項目をliタグで囲います。
<ul>
<li> 項目 </li>
<li> 項目 </li>
<li> 項目 </li>
</ul>
【表示のされ方】
・項目
・項目
・項目
・ulタグは「unordered list」の略で、順序がついていないリスト。
・liタグは「list item」の略で、リスト項目=並び項目。
2. 「順序付きリスト」<ol>
順序付きリストは、項目を順番通りに並べたいときに使います。
【書き方】
olタグを使い、個々の項目をliタグで囲います。
<ol>
<li> 項目 </li>
<li> 項目 </li>
<li> 項目 </li>
</ol>
【表示のされ方】
1.項目
2.項目
3.項目
・olタグは「ordered list」の略で、順序リスト=番号付きリスト。
3. 「説明リスト」<dl>
説明リストは、項目に説明を入れたいときに使います。
【書き方】
dlタグを使って項目にはdtタグ、説明にはddタグで囲います。
<dl>
<dt> 質問1 </dt>
<dd> 回答1 </dd>
<dt> 質問2 </dt>
<dd> 回答2 </dd>
</dl>
【表示のされ方】
質問1
回答1
質問2
回答2
・dlタグは「description list」の略で、説明リスト。
・dtタグは「description term」の略で、 説明する用語(言葉)。
・ddタグは「description detail」の略で、詳細説明。
リストでページを見やすくさせよう！【まとめ】
「箇条書きリスト」「順序付きリスト」「説明リスト」の3種類をどうやって使っていくかが大事になってきます。
３種類リストの使い方まとめ
【箇条書きリスト】
・項目をリスト化したいときに使う
【順序付きリスト】
・項目を順番通りにリスト化したいときに使う。
【説明リスト】
・リスト化した項目に説明を入れたいときに使う。
