はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
3種類のリスト
HTMLにリストは、ul 、ol 、dl の3種類があります。
ul （Unordered List）：順序が関係ないリスト
これは、「順序不同のリスト」です。順番を入れ替えても意味が変わらないものに使います。
- 例：買い物リスト
- 例：サイトのナビゲーションメニュー
ol （Ordered List）：順序が重要なリスト
ul とは逆に、「順番が重要なリスト」です。順番が入れ替えると意味が通じなくなってしまうものに使います。
- 例：料理のレシピ手順
- 例：人気ランキング
dl （Description List）：用語と説明のリスト
ul や ol とは少し毛色が違い、これは「用語」と「その説明」がペアになったリストです。辞書やQ&Aのような形式で使います。
-
<dt>（Description Term）：用語や質問 -
<dd>（Description Details：用語の説明や回答
作成した回答
<ul>（順序のないリスト）は、関連する項目を並列に並べるなど、「順序」が重要でない場合に使い、通常、黒丸などの記号付きで表示されます。
<ol>（順序のあるリスト）は、手順やランキングなど、項目の「順序」が重要な場合に使い、数字付きのリストで表示されます。
<dl>（説明リスト）は、用語とその説明、Q&Aのように、「見出しと説明」がペアになった情報を記述する場合に最適なリストです。
（193文字）
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0006</title>
</head>
<body>
<main>
<h1>3種類のリストの例</h1>
<h2>買い物リスト</h2>
<ul>
<li>パン</li>
<li>牛乳</li>
<li>卵</li>
</ul>
<h2>カレーの作り方</h2>
<ol>
<li>野菜を切る</li>
<li>肉と野菜を炒める</li>
<li>煮込む</li>
</ol>
<h2>Web用語集</h2>
<dl>
<dt>HTML</dt>
<dd>ウェブページの構造を作るための言語。</dd>
<dt>CSS</dt>
<dd>ウェブページの見た目を装飾するための言語。</dd>
</dl>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>