忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています！
HTML リスト（ul・ol・li）とは
リスト（ul・ol・li）は、HTMLにおいて項目や要素の一覧を表示するための重要な要素です。
リストを作成することで、情報を整理しやすくし、読みやすいコンテンツを提供することができます。
リストは、ウェブサイトやブログのナビゲーションメニュー、手順の記述、アイテムの一覧など、さまざまな場面で広く使用されます。正しいリストの使い方をマスターすることで、情報の整理と伝達を効果的に行うことができます。
次のセクションでは、リストの具体的な使い方について詳しく見ていきます。
HTMLの講義動画を無料で見れる入門講座
HTMLの学習に迷った方はまずはHTML入門講座をチェックしましょう！
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を学習するのはなかなか難しいものですよね。
忍者CODEが提供するWeb制作コースの独学プランでは、24時間質問できるチャットサポート体制を整えているので、分からないところはいつでもプロのクリエイターに聞くことができます。
独学での勉強に限界を感じたときは、ぜひ無料相談を受けてみましょう！
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が番号付きで表示され、階層関係がわかりやすくなります。
コーディングスキルを活かして「副業」を獲得するには？
忍者CODEが提供するWeb制作コースの副業・案件獲得保証プランでは、HTMLだけでなくCSS、JavaScript、PHPと言った言語も学べるため、高単価な副業案件を獲得できるスキルを身につけられます。
現役クリエイターが学習のサポートをしてくれるため、学習中に分からないことがあれば、24時間無制限のチャットサポートでいつでも質問が可能です。
また、カリキュラムを受講完了した1ヶ月以内に5万円分の案件を必ずお渡ししています。副業をしたい方はぜひ忍者CODEをチェックしましょう！
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がインデントされて表示され、階層関係がわかりやすくなります。
HTMLを学んで「転職」を目指す方へ
忍者CODEが提供するWeb制作コースの転職支援プランでは、未経験からエンジニアへ転職するための充実したサポート体制を提供しています。Web制作コースではHTMLだけでなく、CSS、JavaScript、PHPを学べるので、フロントエンドエンジニアとして必要なスキルを身につけることができます。また、現役クリエイターが学習のサポートをしてくれるため、学習中に分からないことがあれば、24時間無制限のチャットサポートでいつでも質問が可能です。
転職活動に関してはプロのキャリアアドバイザーのサポートを受けられ、ポートフォリオや履歴書の添削も行いますので、IT業界が未経験の方でも、安心して転職活動に臨むことができますよ！
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がインデントされて表示され、階層関係がわかりやすくなります。
オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTMLを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じたことはありませんか？
アウトプットするためのおすすめの方法は、「問題解くこと」です。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を100問以上用意しており、LINE登録するだけで解答を無料で確認できます！
挫折することなくHTMLを習得するなら
独学？スクール？
ここまで、HTMLとは何なのか？について概念的な話から各要素の役割、各要素の使い方なども交えて紹介してきました。
ただ、実際学習を始めるとなると
どこをゴールにしていいかわからない…
挫折してしまわないかな…
このように不安な気持ちになる方もいますよね。
たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。
実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。
それだけ学習する環境が大事だということです。
そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。
プログラミングスクールに通う理由は他にもあり
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
・学習者同士でつながれるコミュニティへの招待
まとめ
HTMLのリスト（ul・ol・li）は、項目を整理して表示するための重要な要素です。リストを使うことで、順序や関連性を明確に示すことができます。
- 無順序リスト（ul）は、順序が関係ない項目をマークで表示します。
- 番号付きリスト（ol）は、順序が重要な項目を番号で表示します。
- リスト内にネスト（入れ子構造）を作ることで、階層的な情報を表現できます。
適切なマークの選択や階層の意味の正しい表現に注意しましょう。リストを上手に活用して、見やすく整然としたコンテンツを作成しましょう。
