HTML リスト

HTMLは3つのリストがあります。順序がない箇条書きのリスト、順序がある番号付きのリスト、定義リストです。

ul・liタグ（番号なしの箇条書き）

ulタグ・liタグのセットでは「番号なしのリスト(Unordered List)」を作成することができます。

サンプルコード

<ul>
<li>りんご</li>
<li>なし</li>
<li>バナナ</li>
</ul> 

書き方はliタグを使って箇条書きの1つ1つの文を囲い、その全体をulタグで囲うようにすれば終わりです。

表示例

• りんご
• なし
• バナナ

ol・liタグ（番号ありの箇条書き）

olタグ・liタグのセットでは「番号ありのリスト(Ordered List)」を作成することができます。

サンプルコード

<ol>
<li>りんご</li>
<li>なし</li>
<li>バナナ</li>
</ol> 

こちらもulタグと同様、liタグを使って箇条書きの1つ1つの文を囲い、その全体をolタグで囲ってあげます。

表示例

1. りんご
2. なし
3. バナナ

dl・dt・ddタグ（定義リスト）

• dl（description list）= 説明リスト
• dt（description term）= 説明する言葉
• dd（definition / description）= 定義文 or 説明文

dtに説明したいことを書き、ddでそれに対しての説明文を書きます。その全体をdlで囲うだけです。

1つのdtに対して複数の説明をしたい場合はddを複数書くことができます。

複数のdtに対し1つのdd、複数のdtに対して複数のddも自由に使うことができます。

サンプルコード

<dl>
    <dt>HTML</dt>
    <dd>Hyper Text Markup Languageの略で、Webページを作るためのマークアップ言語</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheetsの略で、Webページのスタイルを指定するための言語</dd>
</dl>

表示例

HTML

Hyper Text Markup Languageの略で、Webページを作るためのマークアップ言語

CSS

Cascading Style Sheetsの略で、Webページのスタイルを指定するための言語

定義リストを使うメリット

メリットはSEO対策です。

ブラウザや検索エンジンが、ページの内容や要素の構造を把握するときのヒントになります。タグを見れば「名前：説明」という構造が明確になります。内容を読み解きやすいHTMLを使うことはSEO（検索エンジン最適化）の基本です。

定義リストの実例サンプル

定義リストはQ&A（よくある質問）でよく使われます。

サンプルコード

<dl>
  <dt>電話注文できますか？</dt>
  <dd>オンラインショップのみご購入いただけます。</dd>

  <dt>注文をキャンセルしたい</dt>
  <dd>恐れ入りますが注文完了後のキャンセルはお受けいたしかねます。</dd>

  <dt>海外への発送は可能ですか？</dt>
  <dd>現時点では国外への発送は行っておりませんので、予めご了承下さい。</dd>
</dl>

dtタグに質問を、ddタグに回答を書きます。

ちなみに、CSSコードで装飾しないと、改行されているテキストにしか見えません。

表示例

電話注文できますか？

オンラインショップのみご購入いただけます。

注文をキャンセルしたい

恐れ入りますが注文完了後のキャンセルはお受けいたしかねます。

海外への発送は可能ですか？

現時点では国外への発送は行っておりませんので、予めご了承下さい。

適当にCSSで装飾したら、Q&Aらしく見えますよね。

電話注文できますか？

オンラインショップのみご購入いただけます。

注文をキャンセルしたい

恐れ入りますが注文完了後のキャンセルはお受けいたしかねます。

海外への発送は可能ですか？

現時点では国外への発送は行っておりませんので、予めご了承下さい。