【HTML初心者】簡単に使えるliタグでリストを作る方法を解説

HTMLのliタグとは

liタグの基本的な役割

liタグは、HTMLにおいてリスト項目をマークアップするための要素です。liは”list item”の略称であり、順序付きリスト（番号付きリスト）や順序なしリスト（箇条書きリスト）など、さまざまな種類のリストを作成する際に使用されます。

liタグの役割は以下の通りです。

1. 順序付きリスト（番号付きリスト）の場合
   • <ol>タグ（ordered list）で囲まれたliタグは、順序付きの番号が自動的に付けられたリスト項目を表します。
   • 例えば、記事の手順や手続き、注文の手順など、順番が重要な情報を表現するのに適しています。
2. 順序なしリスト（箇条書きリスト）の場合
   • <ul>タグ（unordered list）で囲まれたliタグは、順序を持たない箇条書きのリスト項目を表します。
   • 例えば、特徴や要点のまとめ、商品の特長など、順序がない情報を簡潔にまとめるのに適しています。

liタグは単体では意味を持たず、必ず順序付きリストや順序なしリストの中に配置される必要があります。liタグ内にはテキストや他のHTML要素を含めることができます。

HTMLのリストについて以下の記事でも解説しています。

HTMLでの番号付きリストの作成

番号付きリストを作成するためには、HTMLの<ol>要素と<li>要素を使用します。<ol>要素は”ordered list”（順序付きリスト）の略で、その中に<li>要素を記述することでリストの項目を作成します。

以下に番号付きリストの作成手順を示します。

例えば、以下のようなHTMLコードを使用して番号付きリストを作成することができます。

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

上記のコードでは、3つのリスト項目が番号付きリストとして表示されます。

このように、<ol>要素と<li>要素を組み合わせることで、簡単に番号付きリストを作成することができます。

HTMLでの箇条書きリストの作成

箇条書きリストを作成するためには、HTMLの<ul>要素と<li>要素を使用します。<ul>要素は”unordered list”（順序なしリスト）の略で、その中に<li>要素を記述することでリストの項目を作成します。

以下に箇条書きリストの作成手順を示します。

例えば、以下のようなHTMLコードを使用して箇条書きリストを作成することができます。

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

上記のコードでは、3つのリスト項目が箇条書きリストとして表示されます。

このように、<ul>要素と<li>要素を組み合わせることで、簡単に箇条書きリストを作成することができます。

HTMLでの子リストの作成

子リストを作成するためには、HTMLの<ul>要素または<ol>要素と<li>要素の組み合わせを使用します。子リストは、親リスト内のリスト項目の下にさらに別のリストを作成することができます。

以下に子リストの作成手順を示します。

例えば、以下のようなHTMLコードを使用して子リストを作成することができます。

<ul>
    <li>親リスト項目1
      <ul>
        <li>子リスト項目1</li>
        <li>子リスト項目2</li>
      </ul>
    </li>
    <li>親リスト項目2</li>
</ul>

上記のコードでは、親リスト内の1つ目の項目に子リストが含まれており、子リスト内に2つの項目が表示されます。

このように、<ul>要素または<ol>要素と<li>要素を組み合わせることで、親リストと子リストの階層構造を作成することができます。子リストを作成することで、より複雑なリスト構造を表現することができます。

まとめ

リストはHTMLで情報を整理する際に非常に便利な要素です。以下にliタグを使ったリストの作成方法をまとめます。

番号付きリストの作成（<ol>タグと<li>タグを使用）

• <ol>タグで番号付きリストの開始を示します。
• <li>タグで各項目を作成します。番号は自動的に付与されます。

箇条書きリストの作成（<ul>タグと<li>タグを使用）

• 円形記号の箇条書きリスト：<ul>タグを使用
• 四角形記号の箇条書きリスト：<ul class="square">と指定
• チェックボックスの箇条書きリスト：<ul class="checkbox">と指定

入れ子リストの作成

• 親リストの<li>要素の中に別のリストを作成します。
• 入れ子リストを使用することで、階層的な情報を整理することができます。

リストを活用することで、情報の整理や可読性の向上に役立ちます。適切なリストの種類や入れ子リストの使用によって、情報を分類したり、階層的な関係を表現したりすることができます。

挫折することなくHTMLを習得するなら

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり