htmlリストの正しい使い方を覚えよう！箇条書きまとめ

htmlリストタグの正しい使い方の紹介です。
グローバルメニューなどに使われる事が多いリストタグ（ulなど）ですが、なんでリストタグを使うと思いますか？
見た目のためだけなら、 pタグを使っても全く同じデザインにできます。でもpタグじゃダメなんです。
このページでは「なぜリストタグを使うのか？」「リストタグの使い方（ul、ol、dlなど）」「間違った使い方と正しい使い方」など箇条書きについてまとめましたので紹介してきますね。（詳しくは目次をご覧下さい）
まずはリストタグの使い方からご紹介します。

htmlリストタグの使い方を覚えよう！

htmlのリストタグは大きく分けると「ul、ol、dl」の3つあります。
それぞれ表示された時の見た目が違います。
見た目以外にも、検索エンジンに伝える意味合いが違います。（後ほど説明）
なので「〇〇のリストタグを使えばこの見た目になるから、〇〇のリストタグを使おう」という使い方は止めときましょう。
あくまでも「リストタグを使う部分がどういう意味なのか」という事を考えて、状況によって使い分けましょうね。
ではhtmlリストタグ（箇条書き）の使い方を紹介しますね。

ulタグの書き方と使い方

ulの書き方は簡単です。
リスト（箇条書き）として表示したい部分を [li]～[/li]のように書きます。その後に[li]～[/li]を[ul]～[/ul] で囲めば完了です。
ちなみに[li]～[/li]の部分（表示したいリスト）は何個使っても大丈夫です。

「ul」というのはUnordered Listの略で、リスト項目（箇条書き）に順序がない場合に使います。
ちなみにliタグの中には、他のタグも入れる事ができます。
例えばliの中にulを入れる事もできます。書き方は下を参考にして下さい。

liの中にulを入れる場合に注意してもらいたい事があります。それは「liの中にulを入れようね」って事。例えば下を見て下さい。

この場合だと、 [li]～[/li]の中には「ul」は入っていませんよね。
この書き方でも表示はされますが、正しくありません。 liの中にulを入れたい時は、この部分だけ注意して下さいね。
下は「li」の中に他のタグを入れた場合の例です。参考にして下さい。

olタグの使い方を覚えよう！

olタグも基本的にはulと同じ使い方です。
唯一違う所はolには順序がつくという事。
そして、「li」で囲んだテキストの前に番号がつきます。
なので、順序がないリストは「ul」、順序があるリストは「ol」を使いましょう！
「順序があるリスト？？」って思うかもしれませんが、まあ、分かりやすくいうと料理の手順などがあると思います。
例えば、カレーの作り方で言えば、具材を準備する⇒具を炒める⇒水を入れる⇒ルーを入れる⇒続く・・・・っていうふうに順番がありますよね。
この作り方の順番を検索エンジンにわかりやすく伝えるためにolを使います。
例えばカレーの作り方をリストにしたい場合は、下のように書きます。

こういうふうに書くと検索エンジンにも順番が伝わります。
「ul」で同じように記述した場合だと、検索エンジンには順番が伝わりません。つまり、ページの内容が正しく伝わらないわけです。
そうなると、検索結果で順位は上がりづらいですよね。なので、しっかりと使い分けるようにしましょうね。

あと、リストの前につく数字が邪魔と言う時は、 cssで消せます。逆に、ulに数字を付けることもできます。（後ほど説明）
なのでデザインで「ul」「ol」を使い分けるのではなくて、そのリスト部分（箇条書き）がもつ意味によって使いわけましょう！
それとolもulと同じように、 liの中に「ol」を入れる事ができます。（他のタグも）

【olの中に入れられるタグ】
liのみ

dlの書き方と使い方

dlタグはulとolとはちょっと違います。
書き方もちょっと違うので注意して下さい。
ではdlについて紹介しますね。
dlとはDefinition Listの略で[dl]～[/dl]で囲んだ部分が「定義リスト」だという事を意味します。
例えば「用語の定義リスト」を作る時だったり、何かの方法を箇条書きで説明する時などに使います。
簡単にいうと「リストに説明を付けたい時に使う」と考えて下さい。
といってもわかりづらいですよね。なので、まずは下の例を見て下さい。

こういうように [dt]～[/dt]で囲った部分の意味を [dd]～[/dd]で説明するように書きます。

上の例でいえば、「色とは」⇒「color」と「カラー」という意味があるという事。
「皮をむく場合」は「包丁で皮をむいて食べます」というような方法があるという事。

上のような感じで「dt」で囲んだ部分の意味を「dd」で説明するような書き方をして下さいね

dlもul・olと同じように [dd]～[/dd]の中にdlを入れる事ができます。そして、「dt」と「dd」は1対1でなくても大丈夫です。例えば、一つの「dt」に対して複数の「dd」を付けたり、複数の「dt」に対して一つの「dd」をつけたりという事ができます。ただし、文章の意味合いを考えて下さいね。

ちなみにdlの中に複数のリスト（dt、dd）がある場合は、リストの順序が意味を持たない場合もあれば、意味を持つ場合もあります。下の例を参考にして下さい。

上のようにリストの順番が意味を持つ場合があるので、文章の意味を考えて使い分けるようにしましょうね！そっちの方が検索エンジンに詳しく内容が伝わりますよ(^^♪

箇条書き（ol・ul・dl）のデザインについて

箇条書き（ol・ul・dl）のデザインは変える事ができます。
例えば「ul」であれば「リストの前の「・」が邪魔だな」「ol」であれば「リストの前の数字が邪魔」って感じる事があると思います。
そういう時はcssでデザインを変える事が出来ます。

「・」のデザインを変える事も可能です

なんでリストタグ（箇条書き）を使うの？

htmlの箇条書き（ul・ol・dl）を使う意味が分かったと思うので、使う理由を説明する必要はないと思いますが、一応紹介しときますね。
箇条書きを使う理由はズバリ、要点をまとめて、わかりやすくするためです。
検索エンジンは、htmlの箇条書きの部分が「そのページ」の要点をまとめてわかりやすく伝えていると考えています。つまり、箇条書きの部分を「重要視」しているという事。
検索エンジンは「箇条書き=要旨」と考えていると思ってください。
例えば下のように表示したいとします。

表示例
htmlの歴史
htmlとは
htmlのいじり方

このように表示したい場合はolを使うと思いますが、 pタグを使ってもデザイン上の見た目は全く同じように表示できます。
ですが、検索エンジンは見た目が同じでも、「箇条書き」だとは認識してくれません。見た目は同じでも、伝える意味がまったく違います。

この場合「ダメな例」の方は、段落として検索エンジンは認識します。
要点を伝えたいのに、これでは伝わらないですよね。しかも、文章としても「1.htmlの歴史 2.htmlとは 3.htmlのいじり方」では意味不明ですよねｗ
なので検索結果で上位をとるためにも、箇条書きを正しく使うようにしましょうね！
以上、「htmlリストの正しい使い方を覚えよう！箇条書きまとめ」でしたー(^^♪