HTMLのリスト要素とは？基本の書き方やカスタマイズ方法を解説

HTMLのリストとは

HTMLのリストは、Webページの中で箇条書きをする時などに使われる要素です。リストを使うとユーザがコンテンツを理解しやすくなるため、コーディングでは適切にタグを設定する必要があります。

また、HTMLのリストタグには、いくつか種類があります。本記事ではリストタグの基本的な知識を紹介した後に、実際にリストの作り方や、カスタマイズの方法を詳しく解説します。プログラミングの初心者でも分かりやすいように解説しますので、ぜひ参考にしてください。

【参考】：MDNドキュメント リスト項目について

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

リストの要素は、Webページ上で情報を整理するという重要な役割があります。HTMLのリストを使えば、ユーザが情報を一目で理解しやすくなります。

例えば、下図のようなリストの例を見ると分かるように、箇条書きでコンテンツを紹介する場合は、リスト要素を使用した方がコンテンツを明確化しやすいです。

HTMLリストには、主に順序ありのリストと順序なしのリスト、定義型のリストがあります。

順序ありのリストとは、箇条書きの先頭に番号が振られているリストです。手順や順位付けといった場面でよく利用されます。

一方で、順序なしのリストは、項目の先頭に点や記号が振られているリストです。メニュー項目やサービス一覧など、特に順序が必要ない項目に幅広く活用できます。

また、定義型のリストとは用語と説明を整理するためのリストです。

このように、HTMLリストは用途によって使うべきリストが異なります。ただし、どれも重要なリストですので、HTMLを学習中の方は、これらのタグの使い方もしっかり理解しましょう。

HTMLリストの書き方

HTMLリストの書き方は、順序ありリストと順序なしリストでタグが異なります。順序なしリストは、<ul>タグを使用して作成します。一方で、順序ありリストの場合は<ol>タグを使用します。

また、その他にも定義型リストでは、<dl>・<dt>・<dd>などのタグが使われます。ここでは、それぞれのリストの書き方を解説します。

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！

順序なしリストでは<ul>タグを利用すると解説しましたが、リストの各項目は<ul>タグで囲んだ中に記載します。実際に、順序なしのリストのコードは以下の通りです。

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

コードを記述してブラウザで結果を確認すると下図のようになります。

【参考】：MDNドキュメント　リスト項目について

順序付きリストでは<ol>タグを利用します。基本的な書き方は順序なしリストと同様です。実際のコードは以下の通りです。

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

コードの実行結果は下図の通りです。

どちらのリストでも、閉じタグや記号の書き漏れがあると正しく反映されません。コーディング初心者の方は、記載漏れがないか注意しながらリストを作成しましょう。

【参考】：MDNドキュメント　リスト項目について

<dl>タグは、用語とその説明をリスト化するためのタグです。具体的な使い方は<dt>タグに用語を入れ、<dd>タグにその説明を示します。

このリストは、用語と説明を対にして表示する際に使われることが多いです。例えば、用語集や製品の仕様説明でよく使われます。こちらもサンプルコードを紹介しますので、参考にしてください。

<dl>
    <dt>HTML</dt>
    <dd>ハイパーテキストマークアップ言語。ウェブページやウェブアプリケーションを作成・構造化するために使われる。</dd>
    <dt>CSS</dt>
    <dd>カスケーディングスタイルシート。ウェブページのレイアウトをスタイリングするために使用される。</dd>
    <dt>JavaScript</dt>
    <dd>アニメーション、フォーム検証などのインタラクティブなウェブ機能を可能にするプログラミング言語。</dd>
</dl>

サンプルコードの実行結果は下図の通りです。

【参考】：MDNドキュメント　リスト項目について

HTMLリストでは、リストの中に別のリストをネスト（入れ子）することもできます。例えばメニュー項目を作成する際に、大項目と中項目を区分する時などに使います。

サンプルコードは以下の通りです。

<ul>
   <li>果物
        <ul>
            <li>リンゴ</li>
            <li>バナナ</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>トマト</li>
            <li>キュウリ</li>
        </ul>
    </li>
</ul>

コードの実行結果を見ると、入れ子構造になっていることが確認できます。

HTMLのリストボックスはリスト要素と名称は似ているものの、リストとは異なります。リストボックスとは、ユーザが選択肢の中から項目を選べるインターフェースを指します。

リストボックスはドロップダウンリストという要素とも似ていますが、リストボックスの場合はユーザが複数の項目を選ぶこともできます。ここでは、簡単にリストボックスの概要について解説します。

リストボックスは通常、<select>タグを用いて作成されます。また、その中に<option>タグで個々の選択肢を定義します。

その他にも、size属性を設定すると、リストボックスに常に表示されるオプションの数を指定できます。リストボックスのサンプルコードは以下の通りです。

<select name="fruits" id="fruits">
        <option value="apple">りんご</option>
        <option value="orange">オレンジ</option>
        <option value="banana">バナナ</option>
        <option value="grape">マスカット</option>
        <option value="mango">マンゴー</option>
    </select>

上記のサンプルコードをブラウザ上で見ると、下図のようになります。コーディングを学習中の方は試しに自分のエディターで同じようにコードを記述し、同じ結果になるか確認しましょう。

【参考】：MDNドキュメント　リスト項目について

よくある質問

ここでは、リストに関するよくある質問を紹介します。リストのカスタマイズについても解説していますので、気になる方はぜひ参考にしてください。

Web開発を行うエンジニアの方は、リストタグの互換性が気になるのではないでしょうか。リストタグは主要なタグ要素のため、ChromeやFirefoxをはじめとする主要なブラウザで利用できます。

MDNのドキュメントに、各ブラウザが対応しているバージョンも掲載されていますので、こちらも参考にしてください。また、実際にコーディングを行う時には各ブラウザで実際に動作を確認し、正しく表示されているか確認しましょう。

【参考】：MDNドキュメント　互換性について

リストの先頭にある、点を消したいと考える方も多いでしょう。CSSのプロパティを活用すれば、マーカーがないように見せることができます。ここでは、点なしリストスタイルの1例として、以下のサンプルコードを紹介します。

ul {
    list-style-type: none;
}

このコードでは、「list-style-type」というプロパティを設定しています。このプロパティはリストのマーカーを変更するプロパティですが、ここで「none」という値を設定すれば、リストのマーカーを非表示にできます。

その他にもCSSを使用することで、リストのマーカーのスタイルやインデントなどを調整できますので、さらにカスタマイズしたい方は、リストに関連するプロパティを調べてみましょう。

CSSの設定を正しく行えば、自分の用意した画像をマーカーとして使用できます。オリジナルのマーカーを設定したい時は「list-style-image」というプロパティを使い、画像のパスを設定しましょう。

サンプルコードは以下の通りです。

ul {
    list-style-image: url('path/to/image.png'); /* カスタム画像をマーカーとして使用 */
}

【参考】：MDNドキュメント　list-style-imageについて

リストを正しく使えるエンジニアになろう

Web開発のなかでも、フロントエンドの開発をする方はHTMLの知識が欠かせません。リストタグは、HTML要素のなかでも特に基本的な要素です。

本記事で紹介したサンプルコードや解説を参考にして、基本的な記述方法をマスターしましょう。

HTMLでできることは少ない？できないことやタグも一覧でまとめた

HTMLのdivタグとは？読み方・目的・使い方などを解説！