HTMLで「リストを作成」。番号付き・箇条書きみたいなやつができるよ

番号付きのリスト

ネット上の記事で番号付きで並んだやつや、箇条書きみたいなやつありますよね。

✔️好きな雲

  1. 入道雲
  2. うろこ雲
  3. 飛行機雲

とか、こんなやつ

✔️好きな惑星(太陽などの恒星の周りを回る天体)

  • 地球
  • 火星
  • 木星

HTMLで、これを作ります。

「リスト」と言いますが、見やすくて良いですよね。HTMLの基本をおさらいするのにちょうどいい感じ。

私はドットインストールでHTML基礎文法入門を終わらせようとしています。おさらいがてら、まとめました。

HTMLには、大きく3種類のリストがある

番号付きのもの・箇条書き項目と詳細の3パターン。以下にそれぞれ詳しく書いています。

番号付きのリスト

番号付きのリスト

こんな感じ。コードは以下。

<p>好きな雲</p>
<ol>
<li>入道雲</li>
<li>うろこ雲</li>
<li>飛行機雲</li>
</ol>

<ol>というのは、ordered list。「番号付きのリスト」という意味になります。

<li>は、list item。「表の項目」です。

<ol>で、「番号付きのリスト」作りますよって感じで囲って、<li>で表の項目を一つ一つ囲っていく。意味を理解していけば忘れにくいです。

箇条書きのリスト(番号なしリスト)

箇条書きのリスト

こんな感じ。コードは以下。

<p>好きな惑星</p>
<ul>
<li>地球</li>
<li>火星</li>
<li>木星</li>
</ul>

<ul>というのは、unordered list。「順番が付いていないリスト」という意味。

<li>は、list item。先ほどと同じ「表の項目」ですね。

<ul>で、「番号が付いていないリスト」作りますよって感じで囲い、<li>で項目を作る。意味を理解していくことで分かりやすい。

説明と詳細のリスト(説明リスト)

説明と詳細のリスト

こんな感じですが、上2つに比べてコードがイレギュラー。気をつけないと。

<p>よくある質問</p>
<dl>
<dt>質問1:なぜ入道雲が好きなの?</dt>
<dd>回答1:でかいからです。夏の象徴って感じで、生命力を感じますね。</dd>
<dt>質問2:うろこ雲の良さは?</dt>
<dd>回答2:空の色に映える。青空にも似合うし、夕方の空の色をうまくぼかす感じも良いよね。
<dt>質問3:飛行機雲って良いですよね?</dt>
<dd>回答3:良いよね。飛行機雲が崩れかかっているところが意外と萌え</dd>
</dl>

<dl>というのは、description list。「説明のリスト」です。

<dt>は、description term。「説明の用語」で、左側にぴょこっと出てくるので、「質問」の項目で使っています。

<dd>は、description detail。「説明の詳細」で、右側にひっこむので、「回答」として使っています。

✔️手順

  1. まず、<dl>で説明のリスト作りますよっていう意味で全体を囲う
  2. <dt>でこの言葉について書くよって感じで、説明する用語を囲う
  3. <dd>は言葉の説明ですね。言葉の説明部分を囲えばOK

まとめ:HTMLでのリスト作成は大きく3種類

リストのコードが書けた

番号付きのもの・箇条書き・項目と詳細の3パターンでしたね。

HTMLでのリスト作成を理解すれば、基本中の基本に自信が持てます。長いコードが書けたっていう気持ちになれるので笑

ドットインストールでの学習おすすめです。以上となります、では!