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

think160826
リストの正しい使い方

htmlリストタグの正しい使い方の紹介です。

グローバルメニューなどに使われる事が多いリストタグ(ulなど)ですが、 なんでリストタグを使うと思いますか?

見た目のためだけなら、pタグを使っても全く同じデザインにできます。 でもpタグじゃダメなんです。

このページでは 「なぜリストタグを使うのか?」 「リストタグの使い方(ul、ol、dlなど)」 「間違った使い方と正しい使い方」 など箇条書きについてまとめましたので紹介してきますね。(詳しくは目次をご覧下さい)

まずはリストタグの使い方からご紹介します。

目次
箇条書き(ol・ul・dl)のデザインについて
なんでリストタグ(箇条書き)を使うの?

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

listタグを覚えよう

htmlのリストタグは大きく分けると「ul、ol、dl」の3つあります。 それぞれ表示された時の見た目が違います。

見た目以外にも、検索エンジンに伝える意味合いが違います。(後ほど説明)

なので「〇〇のリストタグを使えばこの見た目になるから、〇〇のリストタグを使おう」 という使い方は止めときましょう。 あくまでも「リストタグを使う部分がどういう意味なのか」という事を考えて、 状況によって使い分けましょうね。

ではhtmlリストタグ(箇条書き)の使い方を紹介しますね。

ulタグの書き方と使い方

ulの書き方は簡単です。

リスト(箇条書き)として表示したい部分を<li>~</li>のように書きます。 その後に<li>~</li><ul>~</ul>で囲めば完了です。

ちなみに<li>~</li>の部分(表示したいリスト)は何個使っても大丈夫です。

<ul>
    <li>表示したいリスト1</li>
    <li>表示したいリスト2</li>
    <li>表示したいリスト3</li>
    <li>表示したいリスト4</li>
</ul>
実際の表示例
  • 表示したいリスト1
  • 表示したいリスト2
  • 表示したいリスト3
  • 表示したいリスト4
【ulの中に入れられるタグ】
liのみ

「ul」というのはUnordered Listの略で、リスト項目(箇条書き)に順序がない場合に使います。

ちなみにliタグの中には、他のタグも入れる事ができます。 例えばliの中にulを入れる事もできます。 書き方は下を参考にして下さい。

<ul>
  <li>
       <ul>
          <li>表示したいリスト1</li>
          <li>表示したいリスト2</li>
       </ul>
    </li>
    <li>表示したいリスト3</li>
</ul>

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

例えば下を見て下さい。

<ul>
   <li></li>
       <ul>
          <li>表示したいリスト1</li>
          <li>表示したいリスト2</li>
       </ul>
   <li>表示したいリスト3</li>
</ul>

この場合だと、<li>~</li>の中には「ul」は入っていませんよね。

この書き方でも表示はされますが、正しくありません。 liの中にulを入れたい時は、この部分だけ注意して下さいね。

下は「li」の中に他のタグを入れた場合の例です。 参考にして下さい。

<ul>
   <li>
      <h3>タイトル</h3>
    <p>テキスト</p>
   </li>
   <li>
      <h3>タイトル</h3>
    <p>テキスト</p>
   </li>
</ul>
実際の表示例
  • タイトル    

    テキスト

  • タイトル    

    テキスト

【liの中に入れられるタグ】
div、h1~h6、p、ul、dl、ol、li、span、img、strong、emなど

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

olタグも基本的にはulと同じ使い方です。 唯一違う所はolには順序がつくという事。

そして、「li」で囲んだテキストの前に番号がつきます。

なので、順序がないリストは「ul」順序があるリストは「ol」を使いましょう!

「順序があるリスト??」って思うかもしれませんが、まあ、分かりやすくいうと料理の手順などがあると思います。

例えば、カレーの作り方で言えば、 具材を準備する⇒具を炒める⇒水を入れる⇒ルーを入れる⇒続く・・・・ っていうふうに順番がありますよね。

この作り方の順番を検索エンジンにわかりやすく伝えるためにolを使います。 例えばカレーの作り方をリストにしたい場合は、下のように書きます。

<ol>
    <li>具材を準備する</li>
    <li>具を炒める</li>
    <li>水を入れる</li>
    <li>ルーを入れる</li>
    <li>煮込む</li>
</ol>
表示例
  1. 具材を準備する
  2. 具を炒める
  3. 水を入れる
  4. ルーを入れる
  5. 煮込む

こういうふうに書くと検索エンジンにも順番が伝わります。

「ul」で同じように記述した場合だと、検索エンジンには順番が伝わりません つまり、ページの内容が正しく伝わらないわけです。

そうなると、検索結果で順位は上がりづらいですよね。 なので、しっかりと使い分けるようにしましょうね。

あと、リストの前につく数字が邪魔と言う時は、cssで消せます 逆に、ulに数字を付けることもできます。(後ほど説明)

なのでデザインで「ul」「ol」を使い分けるのではなくて、そのリスト部分(箇条書き)がもつ意味によって使いわけましょう!

それとolもulと同じように、liの中に「ol」を入れる事ができます(他のタグも)

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

dlの書き方と使い方

dlタグはulとolとはちょっと違います。 書き方もちょっと違うので注意して下さい。

ではdlについて紹介しますね。

dlとはDefinition Listの略で<dl>~</dl>で囲んだ部分が「定義リスト」だという事を意味します。 例えば「用語の定義リスト」を作る時だったり、何かの方法を箇条書きで説明する時などに使います。

簡単にいうと「リストに説明を付けたい時に使う」と考えて下さい。 といってもわかりづらいですよね。 なので、まずは下の例を見て下さい。

<dl>
   <dt>色とは</dt>
       <dd>color</dd>
       <dd>カラー</dd>
       <dd>色とは、色知覚および色刺激の事を指す</dd>
</dl>
表示例
色とは
color
カラー
色とは、色知覚および色刺激の事を指す
<p>リンゴの食べ方は下のような方法があります</p>  
<dl>
   <dt>皮をむく場合</dt>
       <dd>包丁で皮をむいて食べます</dd>
   <dt>そのまま食べる場合</dt>
       <dd>そのままかじって食べます</dd>
</dl>

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

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

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

<dl>
  <dt>説明される言葉</dt>
      <dd>dtの説明文</dd>
</dl>
表示例
説明される言葉
dtの説明文
<dl>
  <dt>説明される言葉</dt>    
      <dd>dtの説明文</dd>
  <dt>説明される言葉2</dt>
      <dd>dtの説明文2</dd>
</dl>
表示例
説明される言葉
dtの説明文
説明される言葉2
dtの説明文2
【dlの中に入れられるタグ】
dt、ddのみ
【dtの中に入れられるタグ】
a、img、span、strong、emなどのインライン要素
【ddの中に入れられるタグ】
div、h1~h6、p、ul、dl、ol、li、span、img、strong、emなど

dlもul・olと同じように<dd>~</dd>の中にdlを入れる事ができます。 そして、「dt」と「dd」は1対1でなくても大丈夫です。

例えば、一つの「dt」に対して複数の「dd」を付けたり、複数の「dt」に対して一つの「dd」をつけたりという事ができます。 ただし、文章の意味合いを考えて下さいね。

<dl>
   <dt>色</dt>
   <dt>color</dt>
   <dt>カラー</dt>
       <dd>色とは、色知覚および色刺激の事を指す</dd>
</dl>
<dl>
   <dt>色とは</dt>
       <dd>color</dd>
       <dd>カラー</dd>
       <dd>色とは、色知覚および色刺激の事を指す</dd>
</dl>

また<dt>~</dt>の中の言葉を<dfn>~</dfn>で囲む事で、 「定義語」である事を明確に伝える事ができます。

<dl>
   <dt lang="ja"><dfn>色</dfn></dt>
   <dt lang="en-US"><dfn>color</dfn></dt>
       <dd>色とは、色知覚および色刺激の事を指す</dd>
</dl>

※「lang="言語コード"」は、なくて大丈夫です。 ただ上の場合は、日本語と英語の色についての説明なので付けました。

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

<p>賞金は以下の順番で付与されます</p>
<dl>
  <dt>1位の場合</dt>
     <dd>10万円</dd>
  <dt>2位の場合</dt>
     <dd>5万円</dd>
  <dt>3位の場合</dt>
     <dd>1万円</dd>
  <dt>その他の場合</dt>
     <dd>100円</dd>
</dl>

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

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

デザインについて

箇条書き(ol・ul・dl)のデザインは変える事ができます。

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

ul{list-style:none;}

ol{list-style:none;}

cssがわからない場合はhtmlタグに直接書いても消せます。

<ul style="list-style:none;">
    <li></li>
</ul>
<!--olも同じように-->

「・」のデザインを変える事も可能です。 詳しくは下のサイトを参考にして下さい。(他サイト)

»HTMLクイックリファレンス

そして、リストの前に⇒などの記号をつける事もできます。(他サイト)

»cssで作るリストデザイン(web notes)

なんでリストタグ(箇条書き)を使うの?

htmlの箇条書き(ul・ol・dl)を使う意味が分かったと思うので、使う理由を説明する必要はないと思いますが、 一応紹介しときますね。

箇条書きを使う理由はズバリ要点をまとめて、わかりやすくするためです。

検索エンジンは、htmlの箇条書きの部分が「そのページ」の要点をまとめてわかりやすく伝えていると考えています。 つまり、箇条書きの部分を「重要視」しているという事。

検索エンジンは「箇条書き=要旨」と考えていると思ってください。

例えば下のように表示したいとします。

表示例
  1. htmlの歴史
  2. htmlとは
  3. htmlのいじり方

このように表示したい場合はolを使うと思いますが、pタグを使ってもデザイン上の見た目は全く同じように表示できます。

ですが、検索エンジンは見た目が同じでも、「箇条書き」だとは認識してくれません 見た目は同じでも、伝える意味がまったく違います。

<p>
1.htmlの歴史<br />
2.htmlとは<br />
3.htmlのいじり方<br />
</p>
<ol>
   <li>htmlの歴史</li>
   <li>htmlとは</li>
   <li>htmlのいじり方</li>
</ol>

この場合「ダメな例」の方は、段落として検索エンジンは認識します。

要点を伝えたいのに、これでは伝わらないですよね。 しかも、文章としても「1.htmlの歴史 2.htmlとは 3.htmlのいじり方」では意味不明ですよねw

なので検索結果で上位をとるためにも、箇条書きを正しく使うようにしましょうね!

以上、「htmlリストの正しい使い方を覚えよう!箇条書きまとめ」でしたー(^^♪