HTML基本講座4 リスト

こんにちは！
今回は、HTMLで「箇条書き」や「番号付きリスト」を作るために使う、リストタグについて解説します。

Webページでよく見かける

• 項目の一覧
• ステップの説明
• メニューリスト

などは、HTMLのリスト構造で表現できます。

HTML基本講座4 リスト

リストタグとは

HTMLには主に2種類のリストがあります：

タグ名	読み方	用途
<ul>	アンオーダードリスト（unordered list）	順番のないリスト（箇条書き）に使う
<ol>	オーダードリスト（ordered list）	順番のあるリスト（番号付き）に使う

ulタグ：順番のないリスト（箇条書き）

📌 使いどころ
<ul> は 「unordered list（順序なしリスト）」 の略で、順番が関係ない箇条書きに使います。

📖 説明
<ul> はリスト全体を囲むタグで、<li> タグを使ってリストの各項目を記述します。
表示上は「●」のような黒丸が自動でつきます。

💡 例：

olタグ：順番のあるリストに使う

📌 使いどころ
<ol> は 「ordered list（順序ありリスト）」 の略で、手順やランキングなど、順番が大切なリストに使います。

📖 説明
<ol> の中に <li> タグで項目を書きます。
表示上は 1, 2, 3... などの番号が自動的に付くのが特徴です。

💡 例：

liタグ：リストの1つ1つの項目に使う

📌 使いどころ
<li> は 「list item（リストの項目）」 の略で、リスト内の1つの要素を表すタグです。

📖 説明
<ul> や <ol> の中で使用し、それぞれのリストの中身（項目）を定義します。
入れ子にすることで階層付きのリストも作れます。

💡 例：

まとめ

タグ名	役割	使う場面
<ul>	順番のないリストを作る	メニュー、箇条書き、買い物リストなど
<ol>	順番のあるリストを作る	手順、ランキング、工程の説明など
<li>	各リスト項目を表す	ul や ol の中で使うリストの中身

リストはWebページに欠かせない要素のひとつです。
正しいリスト構造を使えば、見た目だけでなく意味的にも正しいHTMLになりますので、是非使ってみてくださいね！