箇条書きは、2種類ある 0:16

HTMLには箇条書きを表す要素も用意されています。
箇条書きの各項目は リスト項目を表す、li要素を使います。
ただし、単に箇条書きと言っても主に行頭の記号に「・」を使って表す 順不同型の箇条書きと、行頭の記号に「1」、「2」、「3」などの数字を使って表す番号順の箇条書きがあります。
もちろんHTMLでもこれらの要素は区別されています。

今回学習する箇条書き関連の要素
要素名 意味・役割
li リスト項目
ul 順不動リスト
ol 番号順リスト
今回のゴール

RERUN

新しいウインドウで表示する

リスト項目は、li要素で表す 0:58

li要素は、list（リスト） item（アイテム）の略で箇条書きの各項目を表します。
ただしli要素は後で紹介するul要素やol要素などの中に配置する必要があります。

カテゴリ
なし
コンテンツ・モデル
フロー・コンテンツ

li要素のサンプル

li要素は箇条書きの各リスト項目を、<li>タグ 〜 </li>タグで挟みます。

li要素の例
<li>卵</li>
<li>醤油</li>
<li>きざみのり</li>

li要素は、上記のように箇条書きの各項目に使います。
ただし、li要素は、上記のように単独では利用できません。
それは、この li要素だけでは、このリストが、順不同の箇条書きか、番号順の箇条書きかが示せないからです。従って、 li要素は、順不同の箇条書きを表す、ul要素、または番号順の箇条書きを表す、ol要素の中に配置する必要があります。

順不同リストを表すul要素 4:10

ul要素は、unordered（アンオーダード） list（リスト）の略で順不同型のリストを表します。
主にサイトのナビゲーションなどに利用します。

カテゴリ
フロー・コンテンツ
コンテンツ・モデル
0個以上のli要素

ul要素のサンプル

ul要素は、li要素でマークアップされた、各リスト項目達全体を、<ul>タグ 〜 </ul>タグで挟みます。

<ul>要素の例
<ul>
  <li>卵</li>
  <li>醤油</li>
  <li>きざみのり</li>
</ul>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

ul要素の注意点

このul要素の子要素（中に直接配置できる要素）には、li要素しか配置できません。
li要素以外の要素を直接挟まないように注意しましょう。

番号順リストを表すol要素 6:12

<ol>要素は、ordered（オーダード） list（リスト）の略で番号順のリストを表します。
主に、 「手順」などの様に、順番に読んでほしい項目やメニューなどに利用します。

カテゴリ
フロー・コンテンツ
コンテンツ・モデル
0個以上のli要素

ol要素のサンプル

ol要素は、li要素でマークアップされた、各リスト項目達全体を、<ol>タグ 〜 </ol>タグで挟みます。

<ol>要素の例
<ol>
  <li>お茶碗にご飯をよそう</li>
  <li>ご飯の上に卵かける</li>
  <li>醤油ときざみのりをかけて混ぜる</li>
</ol>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

ol要素の注意点

このol要素の子要素（中に直接配置できる要素）には、li要素しか配置できません。
li要素以外の要素を直接挟まないように注意しましょう。

箇条書きの入れ子 7:47

箇条書きは入れ子にすることも可能です。
その場合は li要素の中に入れ子にしたい箇条書きの要素を配置してください。

入れ子構造の順不同型リストの例
<ul>
  <li>ホーム</li>
  <li>企業情報
    <ul>
      <li>代表あいさつ</li>
      <li>会社概要</li>
      <li>IR情報</li>
    </ul>
  </li>
  <li>サービス</li>
  <li>お問い合わせ</li>
</ul>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

箇条書きの要素を使ってみよう 8:47

それでは、箇条書き関連の要素を記述してみましょう。

  1. 「Chapter09」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、条書き関連の要素をマークアップしてみましょう。
Chapter09/index.html
<h1>習得した要素とマークアップ手順</h1>

<h2>僕が習得した要素（body要素内で使う要素のみ）</h2>
<ul>
  <li>p要素</li>
  <li>h1要素〜h6要素</li>
  <li>br要素</li>
  <li>em要素</li>
  <li>strong要素</li>
  <li>ul要素</li>
  <li>ol要素</li>
  <li>li要素</li>
</ul>

<h2>僕のマークアップ手順</h2>
<ol>
  <li>HTMLの全体構造の要素を記述する</li>
  <li>body要素内にページに表示する文章を記述する</li>
  <li>h1要素〜h6要素で見出し部分をマークアップする</li>
  <li>p要素で段落部分をマークアップする</li>
  <li>ul要素、ol要素、li要素で箇条書き部分をマークアップする</li>
  <li>em要素やstrong要素で強調する部分や重要性を表す部分をマークアップする</li>
</ol>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 13:24

「Chapter09」 › 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。
なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • 文字列「ホーム」
    • 文字列「企業情報」
    • 文字列「サービス」
    • 文字列「採用情報」〜 文字列「アルバイト」
    • 文字列「お問い合わせ」
    • 文字列「新卒」
    • 文字列「アルバイト」
ブラウザでの表示例

RERUN

新しいウインドウで表示する

解答例

まとめ 17:42

箇条書きの要素の使い方はわかりましたか？

  • 各リスト項目は、li 要素で表す
  • 順不同の箇条書きは、ul 要素で表す
  • 番号順の箇条書きは、ol 要素で表す