HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLリストの基本を徹底解説！ul・ol・dlタグの使い分けと書き方

HTMLリストとは？

HTML文書では、情報を見やすく整理するために「リスト」を使用します。HTMLのリストには主に以下の3種類があります。

  • 順序なしリスト（番号なしリスト）
  • 順序ありリスト（番号付きリスト）
  • 記述リスト（定義リスト）

それぞれの特徴と書き方を詳しく見ていきましょう。

1. 順序なしリスト（<ul>タグ）

順序なしリストは、<ul>タグで定義します。各リスト項目は<li>タグで囲みます。ブラウザ上では箇条書きとして表示され、項目の先頭に黒丸（ビュレット）が自動的に付きます。順番に意味がない項目を並べる際に最適です。

構文

基本的な構文は次のとおりです。

<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

2. 順序ありリスト（<ol>タグ）

順序ありリストは、<ol>タグで定義します。こちらも各項目は<li>タグで囲みますが、項目には自動的に番号が振られます。手順の説明やランキングなど、項目の順番に意味がある場合に使用します。

構文

基本的な構文は次のとおりです。

<ol>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ol>

3. 記述リスト（<dl>タグ）

記述リストは、<dl>タグで定義します。「用語」とその「説明」をセットで表現するリストで、用語は<dt>タグ、説明は<dd>タグで囲みます。用語集やFAQ（よくある質問）などを作成する際に便利です。

構文

基本的な構文は次のとおりです。

<dl>
  <dt>定義する用語</dt>
  <dd>用語の説明</dd>
  <dt>定義する用語</dt>
  <dd>用語の説明</dd>
</dl>

HTMLリストの実装例

それでは、3種類のリストをすべて使った具体的なコード例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
</style>
<body>
<h1>HTML Lists Demo</h1>
<h3>Unordered List</h3>
<ul>
<li>Physics Subject</li>
<li>Chemistry Subject</li>
<li>Economics Subject</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Physics Book Part 1</li>
<li>Physics Book Part 2</li>
<li>Physics Book Part 3</li>
</ol>
<h3>Description List</h3>
<dl>
<dt>Physics Book</dt>
<dd>- It covers modern physics and quantum physics</dd>
<dt>Chemistry Book</dt>
<dd>- It covers organic, inorganic and physical chemistry</dd>
</dl>
</body>
</html>

出力結果

HTMLリストの基本を徹底解説！ul・ol・dlタグの使い分けと書き方

まとめ

HTMLのリストは、用途に応じて3種類を使い分けることが重要です。

  • <ul>：順序に意味がない項目の箇条書きに使用
  • <ol>：手順や順位など、順序に意味がある項目に使用
  • <dl>：用語とその説明をセットで表現したい場合に使用

正しくリストを使い分けることで、文章の構造が明確になり、読者にとっても検索エンジンにとっても理解しやすいコンテンツになります。

  1. HTML DOMスタイルのlistStylePositionプロパティとは？使い方と設定値を徹底解説

    HTML DOMのlistStylePositionプロパティは、リスト項目（li要素）のマーカー（箇条書きの記号）の位置を設定または取得するために使用されるスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的にリストマーカーの表示位置を変更できます。 listStylePositionプロパティの構文 listStylePositionプロパティを設定する場合の構文は以下の通りです。 object.style.listStylePosition = outside|inside|initial|inherit 指定できる値は次の通りです。 値説明 outs

  2. HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

    HTML DOMのOlオブジェクトは、HTMLにおける<ol>（順序付きリスト）要素を表します。JavaScriptを使えば、順序付きリストの開始番号や番号の種類などを動的に操作できます。 Ol要素の作成方法 JavaScriptで<ol>要素を新しく作成するには、document.createElement()メソッドを使用します。 var olObject = document.createElement(OL) ここで作成した「olObject」は、以下のプロパティを持っています。 プロパティ説明 reversedリストの順序を降順にするか、昇順（デフォル