HTML - 非順序リスト

こんにちは、未来のウェブ開発者たち！今日は、HTMLの非順序リストの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。信じてください、このチュートリアルが終わる頃には、プロのようにリストを作成できるようになります！

HTML - Unordered Lists

非順序リストとは？

コードに飛び込む前に、まず非順序リストとは何かを理解しましょう。HTMLでは、非順序リストは特定の順序を持たない関連アイテムのコレクションです。ショッピングリストを思い浮かべてください - パンをミルクの前に買う必要はなく、リンゴをバナナの前に買う必要もありません。順序は重要ではありませんが、すべて同じリストの一部です。

HTMLでは、非順序リストは<ul>タグを使って作成し、リストの各アイテムは<li>タグでラップされます。簡単な例を見てみましょう：

<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>

このコードは以下のようにレンダリングされます：

リンゴ
バナナ
オレンジ

簡単ですね！ブラウザは自動的に各アイテムにbulletsを追加します。でも、bulletsを変更したい場合はどうしたらいいのでしょうか？それが次のセクションで役に立つんです！

非順序HTMLリスト - リストアイテムマーカーの選択

少しスパイスを加えましょう。HTMLでは、bulletsのスタイルを変更することができます。ビジネスでは「リストアイテムマーカー」と呼びます。以下の3つの主要なオプションがあります：

disc（デフォルト）
circle
square

マーカーを変更するには、<ul>タグのtype属性を使います。どのように動作するか見てみましょう：

<ul type="disc">
<li>このリストはデフォルトのdiscマーカーを使用しています</li>
</ul>

<ul type="circle">
<li>このリストはcircleマーカーを使用しています</li>
</ul>

<ul type="square">
<li>このリストはsquareマーカーを使用しています</li>
</ul>

このコードは以下のようにレンダリングされます：

• このリストはデフォルトのdiscマーカーを使用しています

○ このリストはcircleマーカーを使用しています

■ このリストはsquareマーカーを使用しています

クールですね？リストにミニリニューアルを施すようなものです！

非順序リストの例

基本を抑えたので、もっと複雑な例を見てみましょう。練習は完璧の鍵ですので、これらの例をコピーして自分で試してみてください！

ネストされた非順序リスト

時々、リストの中にリストを作成したいすることがあります。これをネストリストと言います。以下のようにやります：

<ul>
<li>コーヒー</li>
<li>茶
<ul>
<li>ブラックテー</li>
<li>グリーンテー</li>
<li>ハーブティー</li>
</ul>
</li>
<li>ミルク</li>
</ul>

これは以下のようにレンダリングされます：

コーヒー
茶
ブラックテー
グリーンテー
ハーブティー
ミルク

ネストリストがインデントされていることに注意してください。これはHTMLがこれらのアイテムが「茶」のサブカテゴリーであることを示す方法です。

リンク付きの非順序リスト

リストは単純なテキストだけでなく、他のHTML要素を含めることもできます。例えば、お気に入りのウェブサイトのリストを作成してみましょう：

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

これはクリック可能なリストを作成します：

画像付きの非順序リスト

さらに凝って、リストに画像を追加してみましょう：

<ul>
<li><img src="apple.jpg" alt="リンゴ"> リンゴ</li>
<li><img src="banana.jpg" alt="バナナ"> バナナ</li>
<li><img src="orange.jpg" alt="オレンジ"> オレンジ</li>
</ul>

このコードは各果物の名前の隣に小さな画像を表示します。リストを視覚的に魅力的にするのに最適です！

非順序リストメソッドのまとめ

ここまで学んだ非順序リストの作成とカスタマイズの方法を簡単な表にまとめました：

メソッド	シンタックス	説明
基本非順序リスト	`<ul><li>アイテム</li></ul>`	基本的な非順序リストを作成します
リストマーカーの変更	`<ul type="circle">`	リストアイテムマーカーのスタイルを変更します
ネストリスト	`<ul><li><ul><li>ネストされたアイテム</li></ul></li></ul>`	リストの中にリストを作成します
リンク付きリスト	`<ul><li><a href="url">リンク</a></li></ul>`	クリック可能なリンクのリストを作成します
画像付きリスト	`<ul><li><img src="image.jpg"> アイテム</li></ul>`	リストアイテムに画像を追加します

そして、皆さん！非順序リストを作成し、カスタマイズするためのスキルをしっかりと身につけました。これらのスキルをマスターする鍵は練習です。それでは、これらの例を試してみて、クリエイティブに遊んでください！

最後に、少しコードのジョークをどうぞ：開発者が仕事を辞めた理由は何ですか？アレイがなかったからです！? 心配しないでください、次回はアレイについて学びます。今はリストを作成し、コードを書き続けてください！

Credits: Image by storyset