はじめに
HTML のリストは、項目をリストとして表示するために使用され、Web 開発において重要な役割を果たします。HTML の li タグは、リスト内の項目を定義するために使用されます。li タグは ul または ol タグとともに使用され、順序なしリストと順序付きリストを作成するのに最適です。この実験では、li タグを使用して HTML リストを作成する方法について段階的なガイダンスを提供します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
順序なしリストを作成する
HTML の ul タグを使用して順序なしリストを作成することができます。リストに項目を追加するには、li タグを使用します。3 つの項目を持つ順序なしリストを作成しましょう。
<!-- index.html -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
上記のコードでは、順序なしリストを作成するために ul タグを使用し、リスト内の各項目を定義するために li タグを使用しています。
順序付きリストを作成する
順序付きリストを作成する方法は、順序なしリストを作成する方法と非常に似ています。唯一の違いは、ul タグの代わりに ol タグを使用することです。3 つの項目を持つ順序付きリストを作成しましょう。
<!-- index.html -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
上記のコードでは、順序付きリストを作成するために ol タグを使用し、リスト内の各項目を定義するために li タグを使用しています。
li タグに属性を追加する
li タグは、リスト項目のバレットのスタイルを変更するために使用できるいくつかの属性をサポートしています。よく使用される属性は、リスト項目のバレットを変更するために使用できる type 属性です。手順 1 の順序なしリストを type 属性を使用して更新しましょう。
<!-- index.html -->
<ul>
<li type="circle">Item 1</li>
<li type="disc">Item 2</li>
<li type="square">Item 3</li>
</ul>
上記のコードでは、type 属性を使用してリスト項目に異なるバレットを追加しています。バレットを中空の円にするには circle 値を、実心の円にするには disc 値を、実心の四角にするには square 値を使用しています。
リストのネスト
1 つのリストの中に複数のリストをネストすることができます。順序付きリストを作成し、その順序付きリストの 2 番目の項目の中に順序なしリストを追加しましょう。
<!-- index.html -->
<ol>
<li>Item 1</li>
<li>
Item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ol>
上記のコードでは、順序なしリストを作成するために ul タグを使用し、リスト内の各項目を定義するために li タグを使用しています。また、順序付きリストの 2 番目の項目の中に順序なしリストをネストしています。
まとめ
この実験では、li タグを使用して HTML リストを作成する方法を学びました。まず、ul タグと li タグを使用して順序なしリストを作成しました。次に、ol タグと li タグを使用して順序付きリストを作成しました。また、リスト項目のバレットのスタイルを変更するために li タグに属性を追加する方法も学びました。最後に、1 つのリストの中に複数のリストをネストする方法を学びました。
