【HTML】リスト(ul・ol・li)の使い方を初心者向けに解説

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

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

忍者CODE

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

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

HTML リスト(ul・ol・li)とは

リスト(ul・ol・li)は、HTMLにおいて項目や要素の一覧を表示するための重要な要素です。

リストを作成することで、情報を整理しやすくし、読みやすいコンテンツを提供することができます。

リストは、ウェブサイトやブログのナビゲーションメニュー、手順の記述、アイテムの一覧など、さまざまな場面で広く使用されます。正しいリストの使い方をマスターすることで、情報の整理と伝達を効果的に行うことができます。

次のセクションでは、リストの具体的な使い方について詳しく見ていきます。

プログラミングスクール無料メンター相談

HTML リスト|ul要素の使い方

<ul>要素は、マークなし箇条書きリストを作成するために使用されます。以下では、ul要素の使い方について詳しく解説します。

マークなし箇条書きリストの作成

マークなし箇条書きリストは、項目を順序なしのマーク(通常は黒い点または円)で表示します。これにより、項目が同じレベルにあることを視覚的に示すことができます。

以下に、マークなし箇条書きリストの作成例を示します。

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

この例では、<ul>要素でリストを定義し、<li>要素で各項目を作成しています。ブラウザで表示すると、項目が黒い点で表示されます。

ネストしたリストの作成

ネストしたリストは、リスト内にさらに別のリストを含めることで階層的な情報を表現します。これにより、項目間の関係性を明確にすることができます。

以下に、ネストしたリストの作成例を示します。

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

この例では、<ul>要素の中にネストした<ul>要素を作成しています。ブラウザで表示すると、項目2の下にサブ項目1とサブ項目2がインデントされて表示されます。

プログラミングスクール無料メンター相談

HTML リスト|ol要素の使い方

<ol>要素は、番号付き箇条書きリストを作成するために使用されます。

以下では、ol要素の使い方について詳しく解説します。

番号付き箇条書きリストの作成

番号付き箇条書きリストは、項目を番号付きで表示します。これにより、項目が特定の順序に従っていることを視覚的に示すことができます。

以下に、番号付き箇条書きリストの作成例を示します。

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

この例では、<ol>要素で番号付きリストを定義し、<li>要素で各項目を作成しています。ブラウザで表示すると、項目が1.、2.、3.のように番号付けされます。

ネストしたリストの作成

ネストしたリストは、リスト内にさらに別のリストを含めることで階層的な情報を表現します。これにより、項目間の関係性を明確にすることができます。

以下に、ネストしたリストの作成例を示します。

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

この例では、<ol>要素の中にネストした<ol>要素を作成しています。ブラウザで表示すると、項目2の下にサブ項目1とサブ項目2が番号付きで表示され、階層関係がわかりやすくなります。

全91問!HTML無料問題集はコチラ▶

HTML 要素リスト|li要素の使い方

<li>要素は、リスト内の個々の項目(アイテム)を表すために使用されます。以下では、li要素の使い方について詳しく解説します。

リストアイテムの作成

リストアイテム(list item)は、リスト内の各項目を表現する要素です。リストアイテムは<li>要素で表されます。<li>要素は、無順序リスト(<ul>)または順序リスト(<ol>)内に配置されます。

以下に、リストアイテムの作成例を示します。

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

この例では、<ul>要素で無順序リストを定義し、<li>要素で各項目を作成しています。ブラウザで表示すると、項目がマーク(通常は黒い点または円)で表示されます。

ネストしたリストアイテムの作成

ネストしたリストアイテムは、リスト内にさらに別のリストアイテムを含めることで階層的な情報を表現します。これにより、項目間の関係性を明確にすることができます。

以下に、ネストしたリストアイテムの作成例を示します。

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

この例では、<ul>要素の中にネストした<ul>要素を作成しています。ブラウザで表示すると、項目2の下にサブ項目1とサブ項目2がインデントされて表示され、階層関係がわかりやすくなります。

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

適正コース診断2
質問に答えて簡単1分の適正プラン診断!

HTML リストの使い方の注意点

リストを使用する際には、以下の注意点に留意する必要があります。

適切なマークの選択

リストでは、各項目を表示する際にマーク(マークアップされた記号や記号のない番号)が付けられます。マークの選択は、リスト内の項目の性質や意味を適切に表現するために重要です。

例えば、重要な順序がある場合には番号付きリスト(<ol>)を使用し、順序を示す番号を付けます。一方、順序が関係ない項目の場合には、無順序リスト(<ul>)を使用し、マークを付けます。

以下に、適切なマークの選択の例を示します。

<ol>
 <li>最初の項目</li>
 <li>次の項目</li>
 <li>最後の項目</li>
</ol>

<ul>
 <li>重要なポイント</li>
 <li>追加情報</li>
 <li>要約</li>
</ul>

この例では、番号付きリスト(<ol>)は重要な順序を示すために使用され、無順序リスト(<ul>)は順序が関係ない項目を表現するために使用されています。

階層の意味を正しく表現する

リストを使用する際には、階層的な情報を正しく表現することが重要です。階層的な情報を表現するためには、ネストしたリストを使用することができます。ネストしたリストは、親リスト内に別のリストを含めることで階層関係を表現します。

以下に、階層の意味を正しく表現する例を示します。

<ul>
 <li>主要な項目1</li>
 <li>主要な項目2
  <ul>
   <li>サブ項目1</li>
   <li>サブ項目2</li>
  </ul>
 </li>
 <li>主要な項目3</li>
</ul>

この例では、<ul>要素の中にネストした<ul>要素を作成することで、階層的な情報を表現しています。ブラウザで表示すると、主要な項目2の下にサブ項目1とサブ項目2がインデントされて表示され、階層関係がわかりやすくなります。
公式LINE登録で5大特典無料プレゼント!!

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

独学?スクール?

ここまで、HTMLとは何なのか?について概念的な話から各要素の役割、各要素の使い方なども交えて紹介してきました。

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

1人で学習を進められるかな…
どこをゴールにしていいかわからない…
挫折してしまわないかな…

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

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

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

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

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

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

・確実にスキルを身に着けたい
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
このように「確実に!」「効率良く!」といった声もよく上がります。
やはり途中で挫折してしまったり、どこを目指しているのかわからなくなったりした場合、「プログラミングを学習することは難しい」と認識してしまい、その後のスキル習得を諦めてしまう可能性が非常に高くなります。
このようなことから、社会人で時間もそこまでないため短期間でスキルを習得したい人や独学で進めるのが不安な人が効率性や確実性を求め、プロの講師に相談できる環境が用意されているプログラミングスクールを選択するのがわかります。
「転職をしたい」「副業で稼げるようになりたい」という理由でプログラミング言語を学び始めたとき、わからない箇所を飛ばしてそのままに放置して学習を進めたとしても、目標とする転職や副業が実現するほどのスキルが身につかなければ多くの時間を費やして何も得られないという結果になります。
ですので、1人でHTMLを始めとしたプログラミングスキルの習得ができるか不安な方は多少の費用をかけてでも、不明点をすぐに相談・解決できる環境や効率良く学習できる有料サービスを選ぶのがベストだと言えます。
そこでおすすめしたいのが「忍者CODE」です。

プログラミングスクール無料メンター相談

忍者CODEをおすすめする1番の理由は「業界最安級の金額でありながら圧倒的学習ボリュームと半永久サポートを提供している」ところにあります。
上記でお伝えしたように、初学者の多くは独力で不明点や問題点を解決できないためにプログラミングの学習を挫折しています。そのため、初学者が経験豊富なプロのエンジニアに相談できない環境下でプログラミングスキルの習得をするのは難易度が高いと言えます。
ですが、忍者CODEでは
・チャットでいつでも、無制限で質問可能
・学習者同士でつながれるコミュニティへの招待
などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。
また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。
未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。

まとめ

HTMLのリスト(ul・ol・li)は、項目を整理して表示するための重要な要素です。リストを使うことで、順序や関連性を明確に示すことができます。

  • 無順序リスト(ul)は、順序が関係ない項目をマークで表示します。
  • 番号付きリスト(ol)は、順序が重要な項目を番号で表示します。
  • リスト内にネスト(入れ子構造)を作ることで、階層的な情報を表現できます。

適切なマークの選択や階層の意味の正しい表現に注意しましょう。リストを上手に活用して、見やすく整然としたコンテンツを作成しましょう。