リスト

順序なしリスト

順序なしリストは、食品の買い物リストに使うときのように、アイテムの並びに関係がないものについてマークアップするときに使います。

milk
卵
bread
hummus

この例では、アイテムの順序は任意です。このリストをHTMLで作成するには、まずリスト全体を<ul>（順序なしリスト）要素で囲みます。 次に、リストのアイテムをそれぞれ <li>（リストアイテム）で囲みます。

<ul>
  <li>milk</li>
  <li>卵</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

順序なしリストのマークアップ

練習として、前のリストを自分でマークアップしていただきます。

1. 下記コードブロック内の "Play" をクリックして、MDN Playground で例を編集してください。
2. 個々のテキストアイテムを順序なしリストに変換してください。

間違えた場合は、MDN Playground の Reset ボタンで作業内容をクリアできます。行き詰まったら、前のコードスニペットに戻ってください。

milk 卵 bread hummus

順序つきリスト

順序付きリストは、アイテムの順序が重要であるリストです。例えば道順を挙げましょう。

この道路を終わりまで進む
右へ曲がる
最初の 2 つのラウンドアバウトを直進する
3 番目のラウンドアバウトを左折する
道路を 300 メートル進むと、学校が右手にある

マークアップの構造は順序なしリストと同じです。違うのは、<ul> の代わりに <ol> 要素でリストのアイテムを囲む必要があることです。

<ol>
  <li>この道路を終わりまで進む</li>
  <li>右へ曲がる</li>
  <li>最初の 2 つのラウンドアバウトを直進する</li>
  <li>3 番目のラウンドアバウトを左折する</li>
  <li>道路を 300 メートル進むと、学校が右手にある</li>
</ol>

順序つきリストのマークアップ

練習の時間です！前回の課題と同様に、前回の順序付きリストを自分でマークアップしていただきます。

1. 下記コードブロック内の "Play" をクリックして、MDN Playground で例を編集してください。
2. 個々のテキストアイテムを順序付きリストに変換してください。

間違えた場合は、MDN Playground の Reset ボタンで作業内容をクリアできます。行き詰まったら、前のコードスニペットに戻ってください。

この道路を終わりまで進む 右へ曲がる 最初の 2 つのラウンドアバウトを直進する 3 番目のラウンドアバウトを左折する 道路を 300 メートル進むと、学校が右手にある

レシピページのマークアップ

では、本格的な課題です！ここまでで、少し複雑なコンテンツのマークアップに必要な情報がすべて指定されました。今回は、私たちが大好きなフムスのレシピの説明文をマークアップしていただきます。

次のどちらかを選べます。

• 開始ファイルである text-start.html のローカルコピーを保存し、コードエディターで作業を行う。
• 下記に表示されたコード出力内のの "Play" をクリックして、MDN Playground で例を編集する。

従う必要がある手順は以下の通りです：

1. メインページのタイトルには <h1> 要素を、3 つのサブタイトルには <h2> 要素を使用してマークアップしましょう。
2. <p> 要素をつけてマークアップするのが適切なテキストが 5 行あります。適用しましょう。
3. 材料リストを順序なしリストとしてマークアップしましょう。
4. 指示リストを順序付きリストとしてマークアップしましょう。

間違えた場合は、MDN Playground の Reset ボタンで作業内容をクリアできます。どうしても行き詰まった場合は、コードブロックの下にある模範解答を参照してください。

すばやく作れるフムスのレシピ

このレシピは手間いらずで、すばやく美味しいフムスを作れます。長年かけて読んだ様々なレシピを参考にアレンジしたものです。

フムスは、ギリシャ料理や中東料理でとても多く使用されている濃厚で美味しいペーストです。サラダやグリルした肉、ピタパンととても良く合います。

原材料

ひよこ豆（ガルバンゾー豆）1 缶（400g）
タヒニ 175g
日干しトマト 6 個
赤ピーマン半分
カイエンペッパー ひとつまみ
にんにく 1 片
オリーブオイル少々

手順

にんにくの皮をむき、粗く刻む
ピーマンの種とヘタを取り、粗く刻む
すべての材料をフードプロセッサーに投入する
すべての材料をペースト状になるまで混ぜ合わせる
粗めの「チャンキー」なフムスにしたい場合は、短時間だけ混ぜ合わせる
滑らかなフムスにしたい場合は、より長く混ぜ合わせる

風味を変えるには、レモンとコリアンダー、チリペッパーとライムとチポトレ、ハリッサとミント、あるいはほうれん草とフェタチーズを少量混ぜてみるのも一案です。試行錯誤して、あなたにとって最適な組み合わせを見つけてみてください。

保存

出来上がったフムスを密閉コンテナーに入れて冷蔵保存してください。作ってから約1週間は保存できます。もし泡立ってきたら、絶対に廃棄してください。

フムスは冷凍保存に適しています。数ヶ月以内には解凍して使用するようにしてください。

入れ子のリスト

あるリストを別のリストの中に入れ子にしてもまったく問題ありません。いくつかのサブ箇条書きを最上位の箇条書きの下に配置することをお勧めします。 レシピの例から 2 番目のリストを見てみましょう。

<ol>
  <li>にんにくの皮をむき、粗く刻む</li>
  <li>ピーマンの種とヘタを取り、粗く刻む</li>
  <li>すべての材料をフードプロセッサーに投入する</li>
  <li>すべての材料をペースト状になるまで混ぜ合わせる</li>
  <li>粗めの「チャンキー」なフムスにしたい場合は、短時間だけ混ぜ合わせる</li>
  <li>滑らかなフムスにしたい場合は、より長く混ぜ合わせる</li>
</ol>

最後の 2 つの箇条書きはそれらの前の箇条書きと非常に密接に関係しているので（それらはその箇条書きの下に収まるサブ命令や選択のように読みます）、それらを自身の順序なしリストの中に入れ子にして現在のリストの中に入れることは意味があります。4 番目の箇条書き。 これは次のようになります。

<ol>
  <li>にんにくの皮をむき、粗く刻む</li>
  <li>ピーマンの種とヘタを取り、粗く刻む</li>
  <li>すべての材料をフードプロセッサーに投入する</li>
  <li>
    すべての材料をペースト状になるまで混ぜ合わせる
    <ul>
      <li>
        粗めの「チャンキー」なフムスにしたい場合は、短時間だけ混ぜ合わせる
      </li>
      <li>滑らかなフムスにしたい場合は、より長く混ぜ合わせる</li>
    </ul>
  </li>
</ol>

前の課題の例に戻り、2 番目のリストをこのように更新してみてください。

説明リスト

説明リストの目的は、アイテムとそれに関連付けられた説明（用語や定義、質問と回答など）をマークアップすることです。例えば、用語と定義の設定例を見ていきましょう。

独り言 (soliloquy)
ドラマで、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を（他の登場人物ではなく）観客に対して表現するものです。
独白 (monologue)
ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋るものです。
傍白 (aside)
ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。

説明リストは他の種類のリストと異なるラッパーである <dl> を使います。それぞれの用語を <dt> （description term、説明用語）要素で囲み、それぞれの説明は <dd> （description definition、説明定義）要素で囲みます。

説明リストの例

例をマークアップしましょう。

<dl>
  <dt>独り言 (soliloquy)</dt>
  <dd>
    ドラマで、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を（他の登場人物ではなく）観客に対して表現するものです。
  </dd>
  <dt>独白 (monologue)</dt>
  <dd>
    ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋るものです。
  </dd>
  <dt>傍白 (aside)</dt>
  <dd>
    ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。
  </dd>
</dl>

ブラウザーの既定のスタイルでは、説明を用語からいくらかインデントします。 MDN のスタイルはこの慣習にほぼ従いますが、用語を太字にします。

1 つの用語に複数の説明

なお、例えば、単一の用語に複数の説明を持たせることも可能です。

<dl>
  <dt>傍白 (aside)</dt>
  <dd>
    ドラマでは、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。
  </dd>
  <dd>
    文章では、現在のトピックに関連するコンテンツの一部ですが、本文の流れに直接合わないため、近くに表示されます（多くの場合、横に並んでいる枠の中に入ります）。
  </dd>
</dl>

一連の定義のマークアップ

説明リストのマークアップに挑戦する時が来ました。

1. 下記コードブロック内の "Play" をクリックして、MDN Playground で例を編集してください。
2. コンテンツ内の 3 つの用語と 4 つの説明を適切な要素でマークアップしてください。なお、3 番目の用語には 2 つの説明があることに留意してください。

間違えた場合は、MDN Playground の Reset ボタンで作業内容をクリアできます。どうしても行き詰まった場合は、コードブロックの下にある解答を参照してください。

愛
世界を結びつける接着剤。
卵
ケーキを一つにまとめる接着剤。
コーヒー
朝、世界を起こす飲み物。
淡い茶色です。

<dl>
  <dt>愛</dt>
  <dd>世界を結びつける接着剤。</dd>
  <dt>卵</dt>
  <dd>ケーキを一つにまとめる接着剤。</dd>
  <dt>コーヒー</dt>
  <dd>朝、世界を起こす飲み物。</dd>
  <dd>淡い茶色です。</dd>
</dl>

まとめ

リストの説明は以上です。次に、HTML テキストの基本について指定された情報をどれだけ理解し、記憶できたかを調べるためのテストをいくつか用意しました。

• 前のページ
• Overview: HTML によるコンテンツの構造化
• 次のページ