コンテンツにスキップ

HTML/リスト

出典: フリー教科書『ウィキブックス(Wikibooks)』

リストの基本

[編集]

HTMLのリストは、関連するアイテムをグループ化して表示するための要素です。リストは情報を整理しやすくし、ユーザーが内容を理解しやすくするために役立ちます。リストには主に3種類があります。

  1. 順序なしリスト(<ul>
  2. 順序付きリスト(<ol>
  3. 定義リスト(<dl>

順序なしリスト(UL要素)

[編集]

順序なしリストは、項目に順序がない場合に使用します。各項目はリストアイテム(<li>)要素で囲まれます。

構文

[編集]
<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

[編集]
<ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

上記の例では、順序なしリストとして果物のリストを示しています。デフォルトでは、各項目は黒い点(ディスク)で表示されます。

順序付きリスト(OL要素)

[編集]

順序付きリストは、項目に順序がある場合に使用します。各項目はリストアイテム(<li>)要素で囲まれます。

構文

[編集]
<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

[編集]
<ol>
    <li>朝食を作る</li>
    <li>メールをチェックする</li>
    <li>仕事を始める</li>
</ol>

上記の例では、順序付きリストとして朝のルーチンを示しています。デフォルトでは、各項目は数字で表示されます。

定義リスト(DL要素)

[編集]

定義リストは、項目とその説明をペアにして表示する場合に使用します。各項目は定義用語(<dt>)と定義内容(<dd>)で囲まれます。

構文

[編集]
<dl>
    <dt>用語1</dt>
    <dd>用語1の定義</dd>
    <dt>用語2</dt>
    <dd>用語2の定義</dd>
</dl>

[編集]
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Languageの略で、ウェブページを作成するための標準言語です。</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheetsの略で、ウェブページのスタイルを定義するための言語です。</dd>
</dl>

上記の例では、定義リストとしてHTMLとCSSの用語とその定義を示しています。

リストのネスト

[編集]

リストは他のリスト内にネストすることができます。これにより、階層的な情報の表示が可能です。

[編集]
<ul>
    <li>フルーツ
        <ul>
            <li>リンゴ</li>
            <li>バナナ</li>
            <li>オレンジ</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>キャベツ</li>
            <li>にんじん</li>
            <li>ブロッコリー</li>
        </ul>
    </li>
</ul>

この例では、フルーツと野菜というカテゴリの下に、それぞれの具体的な項目がネストされています。

リストのスタイル

[編集]

CSSを使用して、リストのスタイルをカスタマイズすることができます。例えば、順序なしリストのマーカーの種類を変更したり、順序付きリストのカウンタのスタイルを変更することができます。

[編集]
<style>
    ul.custom-list {
        list-style-type: square;
    }

    ol.custom-list {
        list-style-type: upper-roman;
    }
</style>

<ul class="custom-list">
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

<ol class="custom-list">
    <li>朝食を作る</li>
    <li>メールをチェックする</li>
    <li>仕事を始める</li>
</ol>

この例では、順序なしリストのマーカーを四角形に、順序付きリストのカウンタをローマ数字に変更しています。

まとめ

[編集]

リストは情報を整理し、視覚的にわかりやすく表示するための強力なツールです。順序なしリスト、順序付きリスト、定義リストの3種類を適切に使い分けることで、ユーザーにとって読みやすく、ナビゲートしやすいウェブページを作成することができます。また、CSSを使用してリストのスタイルをカスタマイズすることで、デザインに合わせたリスト表示が可能です。