はじめに
HTML の ul タグは、項目が通常箇条書きリストとしてレンダリングされる順序なしリストを作成するために使用されます。この実験では、HTML を使用して順序なしリストを作成する方法を案内し、ul タグの構文と使用例を示します。
注：「index.html」でコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
HTML ドキュメント構造を設定する
新しいプロジェクト フォルダに index.html ファイルを作成し、コード エディタでそのファイルを開きます。
html、head、および body タグを追加することで、HTML ドキュメントの基本構造を作成します。head タグの中に、title タグを追加して、ドキュメントのタイトルを「HTML 順序なしリスト実験」に設定します。
<!doctype html>
<html>
<head>
<title>HTML Unordered List Lab</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
ul タグを使って順序なしリストを作成する
body タグの中で、ul タグを使って順序なしリストを作成します。リスト項目を追加するには、ul タグの中で li タグを使います。
<ul>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
ul タグに属性を追加する
ul タグには特定の属性はありませんが、グローバル属性とイベント属性をサポートしています。ここでは、ul タグに class 属性を追加する例を示します。
<ul class="my-list">
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
ul タグに CSS スタイルを適用する
ul タグにスタイルを付けるには、CSS を使用できます。次の例では、リスト スタイル タイプを「正方形」に設定し、マージンを追加しています。
<style>
ul {
list-style-type: square;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
}
</style>
<ul class="my-list">
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>
順序なしリストのネスト
<li> タグの中に別の <ul> タグを配置することで、順序なしリストの中に別の順序なしリストをネストすることができます。以下は、ネストされた順序なしリストの例です。
<ul>
<li>This is the first item in the parent list</li>
<li>
This is the second item in the parent list
<ul>
<li>This is a nested item</li>
<li>This is another nested item</li>
</ul>
</li>
<li>This is the third item in the parent list</li>
</ul>
まとめ
この実験では、HTML の ul タグを使って順序なしリストを作成する方法を学びました。また、ul タグに属性と CSS スタイルを追加する方法も学びました。ul タグは項目の箇条書きリストを作成するために使用されることを忘れないでください。ul タグには開始タグと終了タグが必要であり、リスト項目は ul タグの中で li タグを使って追加する必要があります。<li> タグの中に別の <ul> タグを配置することで、順序なしリストの中に別の順序なしリストをネストすることができます。
