プログラミング

【HTML】リストを使ってページの見た目を整えよう!【タグの使い方】

【HTML】リストを使ってページの見た目を整えよう!【タグの使い方】

 

HTMLでWebページを作成するときにリストタグを使うと、そのページを見やすくさせることができます。

リストは「箇条書きリスト」「順序付きリスト」「説明リスト」の3種類があり、それぞれで使い方が異なってきます。

 

よると
よると
今回、リストタグの「意味と使い方・どう表示されるか」まとめていきます。

 

HTMLで使うリストは3種類ある

HTMLで使うリストは3種類

HTMLで使うリストは3種類あり、それぞれに適したリストタグを使う必要があります。

 

【リストの種類と使用タグ】

・箇条書きリスト : ulタグを使う

・順序付きリスト : olタグを使う

・説明リスト : dlタグを使う

これらのリストは、それぞれ使い方の意味が異なっているので注意する必要があります。

 

リストをマークアップする【書き方と見え方】

HTMLリストをマークアップする【書き方と見え方】
よると
よると
HTMLのリストは3種類あります。それぞれ書き方と使い方をまとめていきます。

3種類のリスト

  • 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」の略で、詳細説明。

 

リストでページを見やすくさせよう!【まとめ】

HTMLのリストでページを見やすくさせよう!

「箇条書きリスト」「順序付きリスト」「説明リスト」の3種類をどうやって使っていくかが大事になってきます。

 

3種類リストの使い方まとめ

【箇条書きリスト】

・項目をリスト化したいときに使う

【順序付きリスト】

・項目を順番通りにリスト化したいときに使う。

【説明リスト】

・リスト化した項目に説明を入れたいときに使う。

 

よると
よると
それぞれ3つのリストを上手に使って見やすいページ作っていきましょう!