HTML入門：リストで情報をサクサク整理！

リストって何だろう？

ウェブページに情報を並べたいとき、きれいに整理して見せたいですよね？ そんなときに使うのが「リスト」です。

種類1: 無順序リスト

何に使う？

• 買い物リスト
• 休日の予定
• 好きな食べ物

こんな感じで、順番が関係ないアイテムのリストです。

どうやって作る？

<ul>
  <li>リンゴ</li>
  <li>本を読む</li>
  <li>ピザ</li>
</ul>

<ul>タグで始めて、<li>でアイテムを書きます。

• リンゴ
• 本を読む
• ピザ

種類2: 順序付きリスト

何に使う？

• レシピの手順
• 大会の順位
• やることリスト

こんな感じで、順番が大事なアイテムのリストです。

どうやって作る？

<ol>
  <li>目覚める</li>
  <li>ジョギングする</li>
  <li>シャワーを浴びる</li>
</ol>

<ol>タグで始めて、<li>でアイテムを書きます。自動的に番号がつきます。

1. 目覚める
2. ジョギングする
3. シャワーを浴びる

種類3: 説明リスト

何に使う？

• 用語と定義
• 人物とその説明
• アイテムとその詳細

こんな感じで、二つの情報がペアになるリストです。

どうやって作る？

<dl>
  <dt>スマホ</dt>
  <dd>いつでもどこでもインターネットが使える便利なデバイス</dd>
  <dt>コーヒー</dt>
  <dd>朝に飲むと目が覚める飲み物</dd>
</dl>

<dl>タグで始めて、<dt>で用語、<dd>でその説明を書きます。

スマホ

いつでもどこでもインターネットが使える便利なデバイス

コーヒー

朝に飲むと目が覚める飲み物

まとめ

リストを使えば、情報をきれいに見せながら、ウェブページに載せることができます。どんなリストを作るかは、あなた次第です！