忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者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を学んで自分だけのスキルを身につけたい
- HTMLのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
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が番号付きで表示され、階層関係がわかりやすくなります。
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
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を習得するなら
独学？スクール？
ここまで、HTMLとは何なのか？について概念的な話から各要素の役割、各要素の使い方なども交えて紹介してきました。
ただ、実際学習を始めるとなると
どこをゴールにしていいかわからない…
挫折してしまわないかな…
このように不安な気持ちになる方もいますよね。
たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。
実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。
それだけ学習する環境が大事だということです。
そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。
プログラミングスクールに通う理由は他にもあり
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
・学習者同士でつながれるコミュニティへの招待
まとめ
HTMLのリスト（ul・ol・li）は、項目を整理して表示するための重要な要素です。リストを使うことで、順序や関連性を明確に示すことができます。
- 無順序リスト（ul）は、順序が関係ない項目をマークで表示します。
- 番号付きリスト（ol）は、順序が重要な項目を番号で表示します。
- リスト内にネスト（入れ子構造）を作ることで、階層的な情報を表現できます。
適切なマークの選択や階層の意味の正しい表現に注意しましょう。リストを上手に活用して、見やすく整然としたコンテンツを作成しましょう。
