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

HTMLリストの種類を解説！ul・ol・dlの違いと使い分け方

HTMLリストの3つの種類

HTMLには、用途に応じて使い分けられる3種類のリストがあります。

  • 順序なしリスト <ul>

    箇条書き形式のリストです。項目同士に特定の順序関係がなく、デフォルトでは黒丸（ビュレット）が先頭に表示されます。

  • 順序付きリスト <ol>

    番号付きのリストです。手順やランキングなど、項目に順序がある場合に使用します。

  • 定義リスト <dl>

    用語とその定義（説明文）をセットで表示するためのリストです。用語は<dt>タグ、説明は<dd>タグで記述します。

これらのリストは互いに入れ子（ネスト）にできるほか、CSSのlist-styleプロパティを使えば、マーカーの形状や位置などを自由にスタイリングできます。

基本構文

HTMLリストの基本的な記述方法は以下のとおりです。

<リストの種類>
<li>リスト項目</li>
</リストの種類>

それでは、具体的な使用例を見ていきましょう。

サンプル1：順序付きリストと順序なしリストの組み合わせ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    background-color: papayawhip;
    list-style-type: square;
    font-style: italic;
}
ol {
    background-color: azure;
}
</style>
</head>
<body>
<ol>
<li>項目1</li>
<li>
項目2
<ul>
<li>項目a</li>
<li>項目b</li>
</ul>
</li>
<li>項目3</li>
</ol>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

HTMLリストの種類を解説！ul・ol・dlの違いと使い分け方

この例では、順序付きリスト（<ol>）の中に順序なしリスト（<ul>）を入れ子として配置しています。CSSにより、<ul>側にはパパイヤホワイトの背景色・四角形のマーカー・斜体フォントが適用され、<ol>側にはアジュール色の背景が適用されているのがわかります。

サンプル2：定義リスト（<dl>）の使い方

<!DOCTYPE html>
<html>
<head>
<style>
dt {
    font-weight: bold;
    font-style: italic;
}
dd {
    border: thin dotted;
}
</style>
</head>
<body>
<h2>プログラミング言語とデータベース</h2>
<dl>
<dt>Java</dt>
<dd>James Goslingによって開発されたプログラミング言語。</dd>
<dt>C++</dt>
<dd>Bjarne Stroustrupによって開発されたプログラミング言語。</dd>
<dt>MySQL</dt>
<dd>MySQLはオープンソースのリレーショナルデータベース管理システム。</dd>
</dl>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

HTMLリストの種類を解説！ul・ol・dlの違いと使い分け方

定義リストでは、太字かつ斜体で表示された用語（<dt>）の下に、点線の枠で囲まれた説明文（<dd>）が並びます。用語集やFAQなど、「語句と説明」を対にして示したい場面で特に活躍します。

まとめ

  • 順序のない項目には<ul>、順序のある項目には<ol>、用語と定義のペアには<dl>を使う
  • リストは入れ子にすることで階層構造を表現できる
  • CSSのlist-style-typeプロパティを使えば、disc・circle・square・decimalなど好みのマーカーに変更可能

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

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

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