HTMLリスト
HTMLには、順序リスト（ordered list）、無順序リスト（unordered list）、および定義リスト（definition list）があります。これらのリストは、構造化された情報を整理するために使用されます。
HTMLリストの種類
順序リスト（Ordered List）
順序リストは、リスト項目が特定の順序で並べられているリストです。通常、数字やアルファベットでリスト項目がマークされます。
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h2>順序リストの例</h2>
<ol>
<li>最初のリスト項目</li>
<li>二番目のリスト項目</li>
<li>三番目のリスト項目</li>
</ol>
</body>
</html>
ブラウザでの表示:
- 最初のリスト項目
- 二番目のリスト項目
- 三番目のリスト項目
無順序リスト（Unordered List）
無順序リストは、リスト項目が特定の順序に依存しないリストです。通常、点（黒い円）でリスト項目がマークされます。
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>無順序リストの例</h2>
<ul>
<li>コーヒー</li>
<li>ミルク</li>
<li>紅茶</li>
</ul>
</body>
</html>
ブラウザでの表示:
- コーヒー
- ミルク
- 紅茶
定義リスト（Definition List）
定義リストは、用語とその定義を対にして表示するリストです。
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h2>定義リストの例</h2>
<dl>
<dt>コーヒー</dt>
<dd>- 黒い熱い飲み物</dd>
<dt>ミルク</dt>
<dd>- 白い冷たい飲み物</dd>
</dl>
</body>
</html>
ブラウザでの表示:
コーヒー
- 黒い熱い飲み物
ミルク
- 白い冷たい飲み物
HTMLリストの実例
順序リストの実例
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h4>順序リスト:</h4>
<ol>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ol>
</body>
</html>
無順序リストの実例
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h4>無順序リスト:</h4>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
</body>
</html>
定義リストの実例
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h4>定義リスト:</h4>
<dl>
<dt>HTML</dt>
<dd>- ハイパーテキストマークアップ言語</dd>
<dt>CSS</dt>
<dd>- カスケーディングスタイルシート</dd>
</dl>
</body>
</html>
リストのカスタマイズ
リスト項目にカスタムスタイルを適用する
CSSを使用して、リスト項目のスタイルをカスタマイズできます。
<!DOCTYPE html>
<html>
<head>
<title>Styled List Example</title>
<style>
ul.custom-list {
list-style-type: square;
padding-left: 20px;
}
ol.custom-list {
list-style-type: upper-roman;
padding-left: 20px;
}
</style>
</head>
<body>
<h2>カスタムスタイルのリスト</h2>
<ul class="custom-list">
<li>カスタムアイテム1</li>
<li>カスタムアイテム2</li>
<li>カスタムアイテム3</li>
</ul>
<ol class="custom-list">
<li>カスタムアイテム1</li>
<li>カスタムアイテム2</li>
<li>カスタムアイテム3</li>
</ol>
</body>
</html>
HTMLリストのタグ
以下の表は、HTMLリストに使用されるタグを示しています。
|
タグ |
説明 |
|
<ol> |
順序リストを定義 |
|
<ul> |
無順序リストを定義 |
|
<li> |
リスト項目を定義 |
|
<dl> |
定義リストを定義 |
|
<dt> |
定義リストの用語を定義 |
|
<dd> |
定義リストの定義を定義 |
よくある質問（QA）
Q1: 順序リストと無順序リストの違いは何ですか？
A1: 順序リスト（<ol>）はリスト項目が特定の順序で並べられ、通常は数字やアルファベットでマークされます。無順序リスト（<ul>）は順序に依存しないリストで、通常は点（黒い円）でマークされます。
Q2: リスト項目にカスタムスタイルを適用する方法は？
A2: CSSを使用してリスト項目のスタイルをカスタマイズできます。例えば、list-style-typeプロパティを使用して、リストマーカーの種類を変更できます。
Q3: 定義リストはどのように使用しますか？
A3: 定義リスト（<dl>）は用語とその定義を対にして表示するために使用します。用語は<dt>タグで定義され、定義は<dd>タグで定義されます。
以上が、HTMLリストの基本的な使い方とカスタマイズ方法についてのガイドです。これでHTMLリストを効果的に利用できるようになるでしょう。