MENU
HTMLでリスト箇条書き（リスト表示）を作る場合、ulタグ・olタグ・liタグを使用します。今回は、これらのHTMLタグの意味・役割や使い方、記述方法などを女真者の方にもわかりやすく解説します。
HTMLで箇条書きを表示する方法
以下のように先頭にリストマーカーをつけて、テキストをリストの形で表示したものを箇条書きといいます。
- HTML
- CSS
- JavaScript
- Ruby
- PHP
Web制作で使用する言語を箇条書きで記述してみました。
このリストは、以下のようにul・liタグを使ってマークアップしています。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Ruby</li>
<li>PHP</li>
</ul>HTMLで箇条書きを作る際に注意すること
ul・ol・liタグを使わずに箇条書きを作ることはやめましょう。
「・」を先頭に入力して、単語ごとに改行すると“見た目上”はリスト表示となります。
・リスト項目
・リスト項目
・リスト項目
- リスト項目
- リスト項目
- リスト項目
リストマーカーの大きさは異なりますが、私たち人間が見る分はどちらもリスト表示に見えます。
しかし、検索エンジンやWebブラウザから見たときには“ただの文章（テキストデータ）”と“箇条書き”のように意味が全く異なってしまいます。
HTMLのタグにはそれぞれ意味があるので、その場面に適したタグを使うことで、検索エンジンに正しい情報として伝わります。
結果として、検索エンジンと人間、どちらから見ても箇条書きだとわかる内容となり、良質なWebページを作ることができます。(箇条書きに限らず、適したタグでのマークアップを心がけましょう。)
ul・ol・liタグそれぞれの意味・役割
ul・ol・liタグについて詳しく説明していきます。
Web制作で使用する言語をリスト表示した例では、各言語名をliタグで、計5つのliタグの外側でulタグが囲んでいる構造が確認できますね。
結論を言うと、ul・ol・liタグの構造は、
liタグはひとつのリスト項目を表し、ul・olタグは、その範囲内がリスト表示（箇条書き）であることを表すということです。
ulタグとは?｜<ul> </ul>
ulタグは順不同リスト、つまり項目同士の順番が関係ないリストを表示するときに使います。ulは「Unordered List」の略で、「Unordered」を日本語へ翻訳すると順不同となります。
Web制作で使用する言語をリスト表示した例でも、特に記述する順番にルールがあるわけではないので、ulタグを使って表しています。
olタグとは?｜<ol> </ol>
olタグはここで初登場ですね。まずは以下のHTMLを見てみましょう。
<ol>
<li>イベントの概要を確認する</li>
<li>必要事項を入力する</li>
<li>「参加」をクリックして申し込む</li>
</ol>ulを使ったリストと比較しても、記述する構文に大きな違いはなく、“ul”だった部分が“ol”に変わるだけです。この例は以下のように表示されます。
- イベントの概要を確認する
- 必要事項を入力する
- 「参加」をクリックして申し込む
ulタグの時は「・」だったリストマーカーが「1.」と数字に変わりました。
このように、olタグは順序のあるリストを表示するときに使うタグで、olは「Ordered List」の略です。翻訳すると順序付けされたリストといった意味になります。
上記の例では、イベントへの参加方法手順として簡単なリストを作りました。このように順番のある内容を箇条書きをする場合にはolタグが適しています。
liタグとは?｜<li> </li>
liタグは「list item」の略で、翻訳した意味は、そのままリスト項目となります。liタグはul・olタグによる箇条書きの中で、ひとつのリスト項目を表すために使用するHTMLタグです。
箇条書き（リスト表示）では、この3種類のタグを使用します。ulタグとliタグ、またはolタグとliタグという様に組み合わせて使用しましょう。
ul、ol、liタグの記述方法と使い方
意味・役割のセクションでも触れましたが、記述方法はリスト全体をulタグ、またはolタグでマークアップし、その中のリスト項目をひとつずつliタグでマークアップします。
注意点としてul・olタグの直下にはliタグしか入れることが出来ません。
aタグなど他のタグを使う場合も、まずはliタグを記述して、その中でaタグを記述する形となります。
<ul>
<li>項目</li>
<li>項目</li>
<a href="">項目</a>
<div>項目</div>
<li>項目</li>
</ul><ul>
<li>項目</li>
<li>項目</li>
<li><a href="">項目</a></li>
<li><div>項目</div></li>
<li>項目</li>
</ul>階層構造を持つ箇条書きの作り方
ulタグやolタグを複数組み合わせることで、階層構造をもった箇条書きを作ることが可能です。
liタグの中に、新たにulタグをいれて「箇条書きの項目ひとつの中で、さらに箇条書き」といった使い方ができます。
- リスト項目
- リスト項目
- 親リスト項目
- 子リスト項目
- 子リスト項目
- 子リスト項目
- リスト項目
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>親リスト項目
<ul>
<li>子リスト項目</li>
<li>子リスト項目</li>
<li>子スト項目</li>
</ul>
</li>
<li>リスト項目</li>
</ul>注意してほしいのは、先ほども説明したように、ul・olタグの直下にはliタグしか使えないので、もちろんul・olタグも記述できません。
なので、箇条書きに階層構造を持たせるときは、必ずliタグの中にul・olタグを記述するようにしましょう。
また、例ではulタグしか使っていませんが、階層構造はolタグ同士、ul・olタグを組み合わせる（部分的に順序のあるリストにする）ということも可能です。
まとめ
- 箇条書き（リスト表示）はulタグとliタグ、またはolタグとliタグの組み合わせを使用する
- 順序がある場合はolタグ、順番を気にしない場合はulタグを使用する
- liタグの中にulタグやolタグを入れることで、階層構造を持つ箇条書きリストを作ることができる