はじめに
HTML リストは、関連する項目をグループ化し整理するために使用される、ウェブ開発の基本的な要素です。コンテンツの可読性とアクセシビリティを高めます。リストには主に 2 つのタイプがあります。
- 順序なしリスト (
<ul>): 項目の順序が重要でない場合に使用されます。通常、箇条書きで表示されます。 - 順序付きリスト (
<ol>): 項目の順序が重要な場合に使用されます。通常、番号付きで表示されます。
この実験では、両方のタイプのリストを作成し、項目を追加する方法、さらにネストされたサブリストを作成してより複雑な構造を構築する方法を学びます。最終的には、これらのリストタイプを示す単一の HTML ページを作成します。
順序なしリストのために ul タグを作成する
このステップでは、順序なしリストを作成します。順序なしリストは <ul> タグで定義され、順序が重要でない項目に使用されます。
まず、WebIDE の左側にあるファイルエクスプローラーで index.html ファイルを見つけます。それをクリックしてエディターで開きます。
index.html ファイルの <body> の中で、<h1> 見出しのすぐ後に <ul> と </ul> タグを配置して、空の順序なしリストを追加します。
これで、index.html ファイルは以下のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul></ul>
</body>
</html>
コードを追加した後、ファイルを保存します。Web 8080 タブに切り替えることで、変更内容をプレビューできます。現時点では、まだ項目を追加していないため、リスト項目は何も表示されません。
リストアイテムのために ul 内に li タグを追加する
このステップでは、順序なしリストに項目を追加します。リストの各項目は <li> (リスト項目) タグで定義されます。これらの <li> タグは、親の <ul> タグの中に配置する必要があります。
食料品リストに 3 つの項目を追加しましょう。「Milk」、「Bread」、「Cheese」をリスト項目として含めるように index.html ファイルを変更してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</body>
</html>
ファイルを保存し、Web 8080 タブに切り替えて変更を確認してください。これで、3 つの食料品項目が箇条書きリストとして表示されるはずです。
順序付きリストのために ol タグを作成する
このステップでは、順序付きリストを作成します。順序付きリストは <ol> タグで定義され、レシピや ToDo リストのように項目の順序が重要な場合に使用されます。ブラウザは自動的に項目に番号を付けます。
ToDo リストの新しいセクションを追加しましょう。index.html ファイルで、既存の順序なしリストの下に新しい見出し <h2>To-Do List</h2> と空の順序付きリスト <ol></ol> を追加します。
これで、index.html ファイルには両方のリスト構造が含まれるようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<h2>To-Do List</h2>
<ol></ol>
</body>
</html>
ファイルを保存し、Web 8080 タブでプレビューを確認してください。新しい見出しが表示されますが、順序付きリストは今のところ空です。
番号付きアイテムのために ol 内に li タグを追加する
このステップでは、新しい順序付きリストに項目を追加します。順序なしリストと同様に、各項目を定義するには <li> タグを使用します。ブラウザが自動的に番号付けを行います。
ToDo リストに 3 つのタスクを追加しましょう。index.html ファイルを編集し、<ol> タグの中に以下の <li> 要素を配置します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<h2>To-Do List</h2>
<ol>
<li>Pay bills</li>
<li>Walk the dog</li>
<li>Go to the gym</li>
</ol>
</body>
</html>
ファイルを保存し、Web 8080 タブをリフレッシュしてください。これで、3 つのタスクを示す番号付きリストが表示されるはずです。
サブリストのために ol 内に ul をネストする
このステップでは、ネストされたリスト、またはサブリストとも呼ばれるものを作成する方法を学びます。これは、リスト項目をより小さく関連性のあるポイントに分解するのに役立ちます。<li> 要素の中にリスト (<ul> または <ol>) をネストすることができます。
「Go to the gym」タスクに詳細を追加しましょう。ワークアウトのアクティビティを指定するために、ネストされた順序なしリストを追加します。これを行うには、<li>Go to the gym</li> 要素の中に新しい <ul> ブロックを配置します。
index.html ファイルを以下のコードで更新してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lists</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
<h2>To-Do List</h2>
<ol>
<li>Pay bills</li>
<li>Walk the dog</li>
<li>
Go to the gym
<ul>
<li>Treadmill</li>
<li>Weights</li>
</ul>
</li>
</ol>
</body>
</html>
ファイルを保存し、Web 8080 タブで表示してください。「Go to the gym」項目の下に、インデントされた箇条書きのサブリストが表示されるはずです。これにより、より複雑で整理されたコンテンツ構造を作成する方法を示すことができます。
まとめ
実験の完了おめでとうございます！
この実験では、HTML でリストを作成するための基本を学びました。以下のことを成功させました。
- 特定の順序がない項目に対して順序なしリスト (
<ul>) を作成しました。 - 順序が重要な項目に対して順序付きリスト (
<ol>) を作成しました。 - リスト項目タグ (
<li>) を使用して、両方の種類のリストに項目を追加しました。 - ネストされたリストを作成して階層構造を構築しました。
リストは、コンテンツを整理し、ウェブページの可読性を向上させるための重要なツールです。今後は、これらのリストを今後のウェブプロジェクトで効果的に使用できるようになります。
