はじめてのWebデザイン『HTML・CSS』入門

2-10. 箇条書きリスト(ul・li)・番号リスト(ol)・説明リスト(dl・dt・dd)のタグ

HTML内で通常の段落ではない「箇条書き」を示すul・liタグ、番号がついたリスト「番号リスト」を示すolタグ、説明する用語とその用語の説明文を並べたリスト「説明リスト」を示すdl・dt・ddタグについて解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/05/08最終更新日:2019/07/11

スポンサーリンク

1.「箇条書きリスト」「番号付きリスト」「説明リスト」とは?

これまで文章を書くときには、見出しを示すh1〜h6タグや段落を示すpタグなどが出てきました。これ以外にも文章の中の構造を示すタグが用意されており、今回は「箇条書きリスト」「番号付きリスト」「説明リスト」について解説します。

箇条書きリストとは

いくつかの項目を分けて書き並べたものを「箇条書き」と言いますが、HTMLでもこのような箇条書きを示すことができます。例えば箇条書きリストを使うと以下のような表示になります。

  • りんご
  • バナナ
  • みかん

箇条書きの項目の左側に付く「・」の記号はCSSを使って変更することができます。

番号付きリストとは

箇条書きの左側に番号をふったものが「番号付きリスト」です。番号付きリストを使うと以下のような表示になります。

  1. りんご
  2. バナナ
  3. みかん

番号をテキストで記述しなくても、自動的に「1.」「2.」「3.」が表示されます。

説明リストとは

説明リストは用語の解説などをする際に使用するリスト形式です。箇条書きリストとは違い、「説明するもの」と「説明するものに対する説明」に分けて書きわけます。箇条書きのような「・」や番号付きリストのような数字の表示はありませんが、デフォルトでは「説明するものに対する説明」の左側に余白ができます。

HTML
Hyper Text Markup Langageの略
CSS
Cascading Style Sheetsの略

それではそれぞれのリストの使い方を詳しく説明していきます。 

2.箇条書きリストを示すタグ(ul・li)

箇条書きリストを示すタグはulとliというタグです。箇条書き全体をulタグで囲って、項目をliで囲います。ulはUnordered List(順序のないリスト)の略です。

<section>
  <h1>ミックスジュースの材料</h1>
  <ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>みかん</li>
  </ul>
</section>

ブラウザでは以下のように表示されます。

リストの表示

3.番号付きリストを示すタグ(ol・li)

番号付きリストを示すタグはolとliというタグです。番号付きリスト全体をolタグで囲って、項目をliで囲います。olはOrder Listの略です。

<section>
  <h1>アプリの起動方法</h1>
  <ol>
    <li>まずはアプリを検索しましょう</li>
    <li>検索画面で検索後クリックしましょう</li>
    <li>インストールボタンをクリックしましょう</li>
  </ol>
</section>

ブラウザでは以下のように表示されます。

順序付きリストの表示

4.説明リストを示すタグ(dl・dt・dd)

説明リストを示すタグはdlとdt、ddというタグです。説明リスト全体をdlタグで囲って、説明する用語をdtで囲い、用語に対する説明をddで囲います。dlはDefinition Listの略です。

<secion>
  <dl>
    <dt>HTML</dt>
    <dd>文章構造を作成するマークアップ言語です。</dd>
  </dl>
</section>

以下のようにブラウザで表示されます。

定義リストの表示

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

スポンサーリンク

このレッスンの著者