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

プログラミング言語の辞書

忍者CODEの学習は“実践型”!
だから
結果を出せる!

忍者CODE

●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級!それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から!
適正コース診断

HTMLのliタグとは

liタグの基本的な役割

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

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

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

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


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

【HTML】リスト(ul・ol・li)の使い方を初心者向けに解説
HTML入門:リスト(ul・ol・li)の使い方を解説。マークなし・番号付きリストの作成方法と注意点を詳しく解説します。

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

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

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

  1. まず、<ol>要素を開始タグ(<ol>)と終了タグ(</ol>)で囲みます。これにより番号付きリストの範囲を指定します。
  2. 次に、各リスト項目を<li>要素で囲みます。<li>要素は順序付きリスト内の各項目を表します。

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

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

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

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

プログラミングスクールなら
忍者CODE

適正コース診断2

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

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

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

  1. まず、<ul>要素を開始タグ(<ul>)と終了タグ(</ul>)で囲みます。これにより箇条書きリストの範囲を指定します。
  2. 次に、各リスト項目を<li>要素で囲みます。<li>要素は順序なしリスト内の各項目を表します。

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

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

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

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

HTMLでの子リストの作成

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

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

  1. 親リストの<li>要素内に、子リストを作成するための<ul>要素または<ol>要素を記述します。
  2. 子リストの<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人で学習を進められるかな…
どこをゴールにしていいかわからない…
挫折してしまわないかな…

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

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

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

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

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

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

・確実にスキルを身に着けたい
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
このように「確実に!」「効率良く!」といった声もよく上がります。
やはり途中で挫折してしまったり、どこを目指しているのかわからなくなったりした場合、「プログラミングを学習することは難しい」と認識してしまい、その後のスキル習得を諦めてしまう可能性が非常に高くなります。
このようなことから、社会人で時間もそこまでないため短期間でスキルを習得したい人や独学で進めるのが不安な人が効率性や確実性を求め、プロの講師に相談できる環境が用意されているプログラミングスクールを選択するのがわかります。
「転職をしたい」「副業で稼げるようになりたい」という理由でプログラミング言語を学び始めたとき、わからない箇所を飛ばしてそのままに放置して学習を進めたとしても、目標とする転職や副業が実現するほどのスキルが身につかなければ多くの時間を費やして何も得られないという結果になります。
ですので、1人でHTMLを始めとしたプログラミングスキルの習得ができるか不安な方は多少の費用をかけてでも、不明点をすぐに相談・解決できる環境や効率良く学習できる有料サービスを選ぶのがベストだと言えます。
そこでおすすめしたいのが忍者CODEです。
忍者CODEをおすすめする1番の理由は「業界最安級の金額でありながら圧倒的学習ボリュームと半永久サポートを提供している」ところにあります。
上記でお伝えしたように、初学者の多くは独力で不明点や問題点を解決できないためにプログラミングの学習を挫折しています。そのため、初学者が経験豊富なプロのエンジニアに相談できない環境下でプログラミングスキルの習得をするのは難易度が高いと言えます。
ですが、忍者CODEでは
・チャットでいつでも、無制限で質問可能
・学習者同士でつながれるコミュニティへの招待
などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。
また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。
未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。