本記事では、HTMLで表示させているテキストを箇条書きにすることができる、ulタグ・olタグ・liタグの使い方と違いについて解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
ドットの箇条書き(ulタグ)
テキストの先頭にドットが付いている箇条書きリストを作成したい場合は、ulタグを使用します。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
ulタグ内ではliタグを使用することができ、liタグに箇条書きにしたいテキストを記載します。
ulタグを使ったサンプルコード
実際にulタグとliタグを使用して、テキストを箇条書きにするサンプルコードと表示結果を確認してみましょう。
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

ulタグ内に記載したテキストの先頭にドットが追加されており、正しく箇条書きになっていることが確認出来ました。
番号の箇条書き(olタグ)
テキストの先頭に番号が振られている箇条書きリストを作成したい場合は、olタグを使用します。
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ol>
ulタグと同様にolタグ内ではliタグを使用することができ、liタグに箇条書きにしたいテキストを記載します。
olタグを使ったサンプルコード
実際にolタグとliタグを使用して、テキストを箇条書きにするサンプルコードと表示結果を確認してみましょう。
<ol>
<li>カレー</li>
<li>ラーメン</li>
<li>ステーキ</li>
</ol>

olタグ内に記載したテキストの先頭に番号が振られており、正しく箇条書きになっていることが確認出来ました。
liタグの中にulタグを組み込む

皆さん一度はブログやサイトなどの目次でこのような形を見かけたことはないでしょうか?
これはulタグまたはolタグで作られており、階層になっている箇所はliタグの中にさらにulタグまたはolタグを組み込んで表示させています。
<ol>
<li>
赤いフルーツ
<ul>
<li>リンゴ</li>
<li>イチゴ</li>
<li>スイカ</li>
</ul>
</li>
<li>
青いフルーツ
<ul>
<li>ブドウ</li>
<li>プルーン</li>
<li>ブルーベリー</li>
</ul>
</li>
</ol>
