【HTML】リスト(ul, ol, dl)の使い方まとめ

【HTML】リスト(ul, ol, dl)の使い方まとめ

こんにちは。タケルです。

「箇条書き」は文章を読みやすくするために有効な手段です。

HTMLを使ったリストの作り方についてまとめました。

リストをマスターすることで、より読みやすいブログ構築ができるようになりますよ!

HTMLのリストタグ

 

<ul> 順序のないリスト

ulタグは「unordered list」の略で、「順序のないリスト」を指します。

 

サンプルコード

 

表示結果

  • リスト1
  • リスト2
  • リスト3

 

ulタグでは黒ポチでリストが表示されます。

リストで表示したい内容はliタグに中に書けばOKです。

<ol> 順序のあるリスト

olタグは「ordered list」の略で、「順序のあるリスト」を指します。

 

サンプルコード

 

表示結果

  1. リスト1
  2. リスト2
  3. リスト3

 

olタグにするとリストに番号が振られます。

 

入れ子にする

ulタグとolタグは入れ子にすることもできます。

 

サンプルコード

 

表示結果

    • 入れ子1-1
    • 入れ子1-2
    • 入れ子1-3
    1. 入れ子2-1
    2. 入れ子2-2
    3. 入れ子2-3

 

<dl> 定義リスト

dlタグは「description list」の略で、「定義リスト」を指します。

定義したい用語とその説明文で構成されるリストです。

 

サンプルコード

表示結果

用語1
ここには用語1の説明文が入ります。
用語2
ここには用語2の説明文が入ります。
用語3
ここには用語3の説明文が入ります。

 

dlタグは使い方が少し特殊です。
dtタグに説明したい用語を、ddタグに用語の説明文を書きます。

タグの名前の通り、定義する用語の説明を書きたいときに使えます。 

 

まとめ

HTMLでのリストの作り方についてまとめました。

順序あり・なし、定義リストを状況に応じて使い分けてみて下さい。