リストタグの種類と使い方について

目次

1. 1. リストタグの種類
2. 2. ul、liタグ（順不同のリスト）
3. 3. ol、liタグ（順序性のあるリスト）
4. 4. dl、dt、ddタグ（用語の定義リスト）
5. 5. まとめ

1. リストタグの種類

リストタグには下記の3種類があり、それぞれ意味が異なります。

• ul
• ol
• dl

2. ul、liタグ（順不同のリスト）

■用途

箇条書きのような順序の決まっていないリストに使用します。

■使用例

  HTML
  
<ul>
  <li>リストの項目A</li>
  <li>リストの項目B</li>
  <li>リストの項目C</li>
</ul>
  

■表示結果

3. ol、liタグ（順序性のあるリスト）

■用途

1番目、2番目、のように順序が決まっているリストに使用します。

■使用例

  HTML
  
<ol>
  <li>リストの1番目</li>
  <li>リストの2番目</li>
  <li>リストの3番目</li>
</ol>
  

■表示結果

4. dl、dt、ddタグ（用語の定義リスト）

■用途

「説明する言葉」と「説明文」のように、言葉と説明がセットになっているようなリストに使用します。

■使用例

  HTML
  
<dl>
  <dt>言葉1</dt>
  <dd>言葉1の説明文</dd>
  <dt>言葉2</dt>
  <dd>言葉2の説明文</dd>
  <dt>言葉3</dt>
  <dd>言葉3の説明文</dd>
</dl>
  

■表示結果

5. まとめ

リストタグの種類と使い方についてについて解説してきました。

リストタグには3種類あり、それぞれの用途は下記の通りです。

ul、liタグ

箇条書きのような順序の決まっていないリストに使用

ol、liタグ

1番目、2番目、のように順序が決まっているリストに使用

dl、dt、ddタグ

「説明する言葉」と「説明文」のように、言葉と説明がセットになっているようなリストに使用

リストタグは用途にあわせて適切な使い方をしましょう！

あなたのコーディング力、実務で通用しますか？

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

• 模写はできるようになってきたけど、実務に通用するか不安
• ポートフォリオに悩んでいる・載せる実績がない
• 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

コーディングを仕事にしていきたい方へ

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

• ポートフォリオに載せる実績がない・・・
• 実務経験がゼロ・・・
• 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。