【list】リストを表示したい!!HTMLで表現できるリスト3種類の記述方法

こんにちは。ヒロユキです。

情報をまとめるためには「リスト化」するのが効果的です。見やすくて伝わりやすい「リスト」は、いろんな場面で活躍します。

今回は、HTMLで表現できる「リスト」を3種類紹介しますね。

タグで表現できる3種類のリスト

小松田くん

Webページに「リスト」を追加したいんですけど、つかうタグはulとliでいいですか?

尾地ヒロユキ

正解だね!でもリストには他にも種類があるんだぞ!

  • 箇条書きのリスト
  • 順番付きのリスト
  • 説明付きのリスト

箇条書きのリスト

箇条書きリストは、項目の順番に決まりがない時につかいます。例えば「買い物リスト」とか「おすすめの映画5選」とかですね。

リストの作り方1

コードはこんな感じ。↓

<ul>
 <li>じゃがいも</li>
 <li>にんじん</li>
 <li>たまねぎ</li>
</ul>

使うタグは、ul(!)タグとli(!)タグの2つ。

ulタグ(ユーエルタグ)

箇条書きリストを表現する要素。「unordered list」の頭文字をとってulタグ。

liタグ(リストタグ)

リストに追加したい項目を表現する要素。「list item」の頭文字をとってliタグ。

まずは、<ul></ul>を記述します。↓

<ul></ul>

次に、<ul>タグの中に<li></li>を記述します。

<ul>
<li></li>
</ul>

最後に、<il>タグの中にリストにしたい項目名を記述しましょう。

<ul>
<li>じゃがいも</li>
</ul>

あとは必要な分だけ<li>を増やします。

尾地ヒロユキ

ひとつひとつ書くのは大変だよね。こんな時はショートカットキーが役に立つぞ!

図解_04

VSコードショートカットキー(複製)
「⬆shift」+「⌥option」+「矢印キー↑or↓」

<ul>
<li>じゃがいも</li>
<li>にんじん</li>
<li>玉ねぎ</li>
</ul>

リストはページの内容だから、<body>の中に記述します。

<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
   <h1>つみきのーと</h1>
   <p>箇条書きリスト</p>
   <ul>
     <li>じゃがいも</li>
     <li>にんじん</li>
     <li>たまねぎ</li>
  </ul>
</body>
</html>

はい!!

これで完成ですね。装飾はCSSで変更できます。

あくまで基本の形としておぼえておきましょう。

順番付きのリスト

順番付きリストは、中身の順番が決まっている時につかいます。例えば「料理の手順」とか「好きな芸能人ランキング」とかですね。

リストの作り方2

コードはこんな感じ。↓

<ol>
 <li>6時に起きる</li>
 <li>顔を洗う</li>
 <li>朝ごはんを食べる</li>
</ol>

使うタグは、ol(!)タグとliタグの2つ。

olタグ(オーエルタグ)

順序付きリストを表現する要素。「ordered list」の頭文字をとってolタグ。

まずは、<ol></ol>を記述します。↓

<ol></ol>

次に、<ol>タグの中に<li></li>を記述します。

<ol>
<li></li>
</ol>

最後に、<il>タグの中にリストにしたい項目名を記述しましょう。

<ol>
<li>6時に起きる</li>
</ol>

あとは、ショートカットキーをつかって<li>を増やします。

小松田くん

「⬆shift」+「⌥option」+「矢印キー↑or↓で複製ですね。

説明付きのリスト

説明付きリストは、項目ごとの説明を入れたい時につかいます。Q&Aを作ることもできます。

リストの作り方3

コードはこんな感じ。↓

<dl>
 <dt>Q.好きな食べ物は?</dt>
 <dd>A. 油淋鶏です</dd>
 <dt>Q.好きな歌手は?</dt>
 <dd>A. King Gnuです</dd>
 <dt>Q.好きな雑誌は?</dt>
 <dd>A. BRUTUSです</dd>
 </dl>

使うタグは、dl(!)タグとdt(!)タグとdd(!)タグの3つ。

dlタグ(ディーエルタグ)

説明付きリストを表現する要素。「description list」の頭文字をとってdlタグ。

dtタグ(ディーティータグ)

説明付きリストの「項目」または「質問」を表現する要素。「description term」の頭文字をとってdtタグ。

ddタグ(ディーディータグ)

説明付きリストの「説明」または「回答」を表現する要素。「description detail」の頭文字をとってddタグ。

まずは、<dl></dl>を記述します。↓

<dl></dl>

次に、<dl>タグの中に<dt></dt>と<dd></dd>を記述します。

<dl>
<dt><dt> ←項目or質問
<dd></dd> ←説明or答え
</dl>

最後に<dt>タグの中に項目名か質問を記述して、<dd>タグの中に<dt>に対する説明や答えを記述しましょう。

<dl>
<dt>Q.好きな食べ物は?<dt> ←項目or質問
<dd>A. 油淋鶏です</dd> ←説明or答え
</dl>

あとは、ショートカットキーをつかって<dt>と<dd>をセットで増やしていきます。

尾地ヒロユキ

説明付きリストのタグは全部似てるから間違いやすいぞ。順番や意味も含めておぼえておこう。

タグで作れる3種類のリストを紹介のまとめ

ここまで用途別に3種類のリストを紹介してきました。種類ごとにまとめてみましょう。

箇条書きのリスト

項目の順番に決まりがない時のリスト

リストの作り方1
<ul>
 <li>じゃがいも</li>
 <li>にんじん</li>
 <li>たまねぎ</li>
</ul>
順番付きのリスト

項目に決まった順番がある時のリスト

<ol>
 <li>6時に起きる</li>
 <li>顔を洗う</li>
 <li>朝ごはんを食べる</li>
</ol>
説明付きのリスト

項目ごとに説明が必要な時のリスト
(Q&Aにもつかえる)

リストの作り方3
<dl>
 <dt>Q.好きな食べ物は?</dt>
 <dd>A. 油淋鶏です</dd>
 <dt>Q.好きな歌手は?</dt>
 <dd>A. King Gnuです</dd>
 <dt>Q.好きな雑誌は?</dt>
 <dd>A. BRUTUSです</dd>
 </dl>

リストを表現するタグは、どれも名前が短くて間違いやすいので注意が必要です。

少し大変ですが何の略なのかを理解しておいたほうがいいですね

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪