【完全版】HTMLのliタグでさまざまなリスト作成の実例を紹介

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLでのリスト項目（li）はどのように作るのだろうか？」
「HTMLのliタグの使い方を学びたい」
「HTMLでのliタグの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

HTMLでのliタグの基本的な使い方
liタグを活用するためのテクニック
HTMLでのliタグを用いた具体的な使用例

この記事では、HTMLでのliタグの基本的な使い方から、順序付きリストや非順序付きリストの作成、ネストされたリストの作成など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

HTML入門とliタグの概要

こちらでは、HTML入門とliタグの概要についてお伝えします。

このセクションでは以下の内容を説明します。

ウェブ開発とHTMLの基本
HTMLタグの一部としてのliタグ
liタグの意味と機能

ウェブ開発とHTMLの基本

ウェブ開発は、ウェブページやウェブアプリケーションの設計と構築を含む広範な活動です。

HTML（HyperText Markup Language）は、ウェブ開発の基本的な要素で、ウェブページの骨格を形成します。

HTMLでは、ウェブ上に表示されるさまざまな要素が定義可能です。

テキスト
画像
リンク
フォーム

HTMLタグの一部としてのliタグ

HTMLは多くの異なるタグを使用しますが、その中でも<li>タグは特に重要な役割を果たします。

なぜなら<li>タグは、リストアイテムを表現するために使用されるからです。

リストで表示することで、可読性が格段に上がります。

主に<ol>（順序付きリスト）と<ul>（順序なしリスト）の内部で使用され、リスト内の各アイテムを表すのです。

liタグの意味と機能

liタグは”list item”の略で、その名の通りリストの各アイテムを表現します。

親リスト（<ol>または<ul>）内部で使用されることで、ブラウザは自動的にその要素を、リストアイテムと判断できるのです。

通常、順序付きリストでは各アイテムの前に数字が付けられ、順序なしリストでは各アイテムの前にマーカー（通常は点）が付けられます。

これらのビジュアルな表現はCSSを用いて変更が可能です。

liタグの詳細と属性

このセクションでは、liタグの詳細と属性について解説します。

以下の内容について説明します。

liタグの基本的な属性
type属性とその各種値
liタグで設定可能な他の属性
liタグの使用に際しての注意点

liタグの基本的な属性

HTMLのliタグは、HTML5では特に属性を必要としません。

ただし、より古いHTML仕様では、以下のような属性が存在します。

“value”
“type”

type属性とその各種値

“type”属性は、順序付きリスト<ol>内の、リストアイテム<li>のマーカースタイルを指定するために使用されることがありました。

この属性に設定できる値には、以下のようなものあり、それぞれ異なるマーカーのスタイルを指定します。

“disc”
“circle”
“square”
“1”
“A”
“a”
“I”

liタグで設定可能な他の属性

HTML5では”type”属性や”value”属性は非推奨とされていますが、”class”や”id”などのグローバル属性は使用可能です。

これらの属性を使用すると、特定のliタグにスタイルを適用したり、JavaScriptで操作したりすることが可能になります。

liタグの使用に際しての注意点

liタグは通常、olタグやulタグの子要素として使用されます。

他の場面では使用を控えましょう。

また、liタグの中に直接テキストを記述することも可能ですが、通常はさらに子要素を持つことが一般的です。

これにより、リストアイテムがより複雑な内容（例えば、リンクや画像など）を含むことが可能になります。

リストの作成とユーザーエクスペリエンス

このセクションでは、リストの作成とそれがユーザーエクスペリエンスに与える影響について掘り下げていきます。

リストの重要性
リストの種類とそれぞれの使い方（ulタグ、olタグとの関連）

リストの重要性

Webページの構造を理解しやすくするためには、情報を整理し、リスト形式で表示することが有効です。

リストは読み手に情報の関連性や優先順位を視覚的に伝える手段であり、ユーザーエクスペリエンスを向上させます。

とくに以下のような特定の情報を伝える際には効果的です。

インフォグラフィック
手順ガイド
要点の概要

リストの種類とそれぞれの使い方（ulタグ、olタグとの関連）

HTMLには主に2種類のリストが存在します。

順序付きリスト（ol）：リストアイテムが特定の順序（通常は数値またはアルファベット順）に従う
順序なしリスト（ul）：リストアイテムの順序が特に重要でない

これらはそれぞれliタグと組み合わせて使用されます。

例えば、買い物リストやTODOリストなどがそれにあたります。

これらのタグを理解し、適切に使用することで、情報を整理し、ユーザーエクスペリエンスを向上させることが可能です。

実践：liタグを使用したリストの作成

こちらでは、具体的な例を通じてliタグを使ったリストの作成方法について説明します。

liタグの基本的な使用例
ulタグ、olタグと組み合わせた使用例
ネストしたリストの作成

liタグの基本的な使用例

まずは、最も基本的なliタグの使用例から始めましょう。

番号付きリスト
番号のカスタム値リスト
順序なしリスト

番号付きリスト(olとliタグの組み合わせ)

番号付きリスト、番号のカスタム値リスト、順序なしリスト

<ol>
  <li>最初のアイテム</li>
  <li>次のアイテム</li>
  <li>最後のアイテム</li>
</ol>

番号のカスタム値リスト(value属性の使用例)

<ol>
  <li value="3">最初のアイテム</li>
  <li>次のアイテム</li>
  <li>最後のアイテム</li>
</ol>

順序なしリスト(ulとliタグの組み合わせ)

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ulタグ、olタグと組み合わせた使用例

liタグは、通常ulタグやolタグと組み合わせて使用されます。

以下はその例です。

<ul>
  <li>フルーツ
    <ul>
      <li>リンゴ</li>
      <li>オレンジ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>キャベツ</li>
      <li>ニンジン</li>
    </ul>
  </li>
</ul>

ネストしたリストの作成

HTMLでは、リストを他のリスト内にネスト（入れ子に）することが可能です。

これにより、より複雑なリスト構造を作成することができます。

例はこちらです。

<ul>
  <li>アイテム1</li>
  <li>アイテム2
    <ul>
      <li>アイテム2.1</li>
      <li>アイテム2.2</li>
    </ul>
  </li>
  <li>アイテム3</li>
</ul>

上記のコードは、”アイテム2″という項目にさらにリストがネストされた形となっています。

複雑になりすぎないように気をつけて、ネストも上手に活用しましょう。

CSSとliタグの組み合わせ

liタグとCSSを組み合わせて、さらに多様なリストのスタイルを作成する方法について解説します。

CSSとの組み合わせにより、自由にカスタマイズが可能です。

CSSを使用したリストのスタイリング
レスポンシブなリストデザイン

CSSを使用したリストのスタイリング

CSSを使用することで、liタグの見た目を自由に変更することが可能です。

例えばこちらは、リストの点を赤色にするコードになります。

li {
    list-style-type: disc;
    color: red;
}

CSSではlist-style-typeプロパティを使用して、さまざまな種類のリストマーカーを適用できます。

以下に、それぞれのリストマーカーのスタイル例を示します。

li {
    list-style-type: none; /* マーカーなし */
}
li {
    list-style-type: circle; /* 白丸 */
}
li {
    list-style-type: square; /* 四角 */
}
li {
    list-style-type: decimal; /* アラビア数字 */
}
li {
    list-style-type: upper-roman; /* ローマ字（大文字） */
}

レスポンシブなリストデザイン

レスポンシブデザインは、ウェブサイトがさまざまなデバイス（スマートフォン、タブレット、デスクトップなど）で適切に表示されるようにするアプローチです。

レスポンシブなリストは、ビューポート（ブラウザの表示領域）の幅に応じてレイアウトやスタイリングを変更します。

CSSメディアクエリを使用すると、特定のビューポートの幅でのスタイル適用が可能です。

以下にビューポートの幅が600px未満でスタイリングする例を示します。

@media (max-width: 600px) {
    li {
        display: block;
    }
}

これにより、小さいスクリーンではリストアイテムが垂直にスタックされ、より読みやすくなります。

大きなスクリーンでは、リストアイテムが水平に並びます。

アクセシビリティとliタグ

liタグを使ったリストの作成において、アクセシビリティの観点からの重要性とそのベストプラクティスについて説明します。

リストにおけるアクセシビリティの重要性
アクセシビリティのためのベストプラクティス

リストにおけるアクセシビリティの重要性

ウェブアクセシビリティは、全ての人々がウェブを等しく利用できるようにするための重要な概念です。

視覚障害者や運動障害者など、特定のユーザーが情報にアクセスするのを助けるためには、適切にマークアップされたリストが必要です。

liタグを正しく使用することで、スクリーンリーダーがリストを適切に解釈し、ユーザーに正確な情報を提供することが可能になります。

アクセシビリティのためのベストプラクティス

リストをアクセシブルにするためのいくつかのベストプラクティスを以下に示します。

明確な階層関係：ネストされたリストを使用する場合、適切な階層を明確に示す。
これは、スクリーンリーダーユーザーがリストの構造を理解するのに役立ちます。
適切なマークアップ：リストアイテム（liタグ）は必ずリスト（ulタグまたはolタグ）内に含める。
これにより、スクリーンリーダーは適切にリストとそのアイテムを解釈できます。
リストの明確な目的：リストは一般的に、関連性のある複数のアイテムをまとめるために使用する。
リストの各アイテムがどのように関連しているのか、ユーザーが理解できるようにしましょう。

これらのベストプラクティスを適用することで、全てのユーザーがリストの内容を完全に理解し、アクセスすることが可能になります。