忍者CODEの学習は“実践型”！
だから結果を出せる！
●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級！それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。
HTMLのliタグとは
liタグの基本的な役割
liタグは、HTMLにおいてリスト項目をマークアップするための要素です。liは”list item”の略称であり、順序付きリスト（番号付きリスト）や順序なしリスト（箇条書きリスト）など、さまざまな種類のリストを作成する際に使用されます。
liタグの役割は以下の通りです。
- 順序付きリスト（番号付きリスト）の場合
<ol>タグ（ordered list）で囲まれたliタグは、順序付きの番号が自動的に付けられたリスト項目を表します。- 例えば、記事の手順や手続き、注文の手順など、順番が重要な情報を表現するのに適しています。
- 順序なしリスト（箇条書きリスト）の場合
<ul>タグ（unordered list）で囲まれたliタグは、順序を持たない箇条書きのリスト項目を表します。- 例えば、特徴や要点のまとめ、商品の特長など、順序がない情報を簡潔にまとめるのに適しています。
liタグは単体では意味を持たず、必ず順序付きリストや順序なしリストの中に配置される必要があります。liタグ内にはテキストや他のHTML要素を含めることができます。
HTMLのリストについて以下の記事でも解説しています。
HTMLでの番号付きリストの作成
番号付きリストを作成するためには、HTMLの<ol>要素と<li>要素を使用します。<ol>要素は”ordered list”（順序付きリスト）の略で、その中に<li>要素を記述することでリストの項目を作成します。
以下に番号付きリストの作成手順を示します。
- まず、
<ol>要素を開始タグ(<ol>)と終了タグ(</ol>)で囲みます。これにより番号付きリストの範囲を指定します。 - 次に、各リスト項目を
<li>要素で囲みます。<li>要素は順序付きリスト内の各項目を表します。
例えば、以下のようなHTMLコードを使用して番号付きリストを作成することができます。
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>上記のコードでは、3つのリスト項目が番号付きリストとして表示されます。
このように、<ol>要素と<li>要素を組み合わせることで、簡単に番号付きリストを作成することができます。
プログラミングスクールなら
忍者CODE
HTMLでの箇条書きリストの作成
箇条書きリストを作成するためには、HTMLの<ul>要素と<li>要素を使用します。<ul>要素は”unordered list”（順序なしリスト）の略で、その中に<li>要素を記述することでリストの項目を作成します。
以下に箇条書きリストの作成手順を示します。
- まず、
<ul>要素を開始タグ(<ul>)と終了タグ(</ul>)で囲みます。これにより箇条書きリストの範囲を指定します。 - 次に、各リスト項目を
<li>要素で囲みます。<li>要素は順序なしリスト内の各項目を表します。
例えば、以下のようなHTMLコードを使用して箇条書きリストを作成することができます。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>上記のコードでは、3つのリスト項目が箇条書きリストとして表示されます。
このように、<ul>要素と<li>要素を組み合わせることで、簡単に箇条書きリストを作成することができます。
HTMLでの子リストの作成
子リストを作成するためには、HTMLの<ul>要素または<ol>要素と<li>要素の組み合わせを使用します。子リストは、親リスト内のリスト項目の下にさらに別のリストを作成することができます。
以下に子リストの作成手順を示します。
- 親リストの
<li>要素内に、子リストを作成するための<ul>要素または<ol>要素を記述します。 - 子リストの
<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番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。
それだけ学習する環境が大事だということです。
そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。
プログラミングスクールに通う理由は他にもあり
・効率良く学習を進めたい
・モチベーションの維持にもつながりそう
・以前に独学で挫折した経験がある
・学習者同士でつながれるコミュニティへの招待
