2024/06/13

複雑なリストの練習

記事公開日

2024/06/13

関連タグHTML 初心者向け練習問題

練習問題

問1

以下の情報を、適切なリスト要素を使ってマークアップしてください。

See the Pen 複雑なリストの練習問題１ by sumi (@mesa2a) on CodePen.

答え

<ul>
  <li>果物
    <ul>
      <li>柑橘類
        <ul>
          <li>オレンジ</li>
          <li>グレープフルーツ</li>
          <li>レモン</li>
        </ul>
      </li>
      <li>仁果類
        <ul>
          <li>りんご</li>
          <li>梨</li>
          <li>桃</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>根菜類
        <ul>
          <li>にんじん</li>
          <li>大根</li>
          <li>ごぼう</li>
        </ul>
      </li>
      <li>葉菜類
        <ul>
          <li>キャベツ</li>
          <li>レタス</li>
          <li>ホウレンソウ</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

問2

以下の情報を、適切なリスト要素を使ってマークアップしてください。

See the Pen 複雑なリストの練習問題２ by sumi (@mesa2a) on CodePen.

答え

<ol>
  <li>はじめに
    <ol>
      <li>背景</li>
      <li>目的</li>
    </ol>
  </li>
  <li>調査方法
    <ol>
      <li>調査対象
        <ul>
          <li>対象A</li>
          <li>対象B</li>
          <li>対象C</li>
        </ul>
      </li>
      <li>調査期間</li>
      <li>調査手順
        <ol>
          <li>手順1</li>
          <li>手順2</li>
          <li>手順3</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>調査結果
    <ol>
      <li>結果A</li>
      <li>結果B</li>
    </ol>
  </li>
  <li>考察
    <ol>
      <li>考察A</li>
      <li>考察B</li>
    </ol>
  </li>
  <li>まとめ</li>
</ol>

問3

以下のテキストを適切なリスト要素を使ってマークアップしてください。

See the Pen 複雑なリストの練習問題３ by sumi (@mesa2a) on CodePen.

答え

<dl>
  <dt>用語1</dt>
  <dd>定義1-1</dd>
  <dd>定義1-2</dd>

  <dt>用語2</dt>
  <dd>定義2-1</dd>
  <dd>定義2-2</dd>
  <dd>定義2-3</dd>

  <dt>用語3</dt>
  <dd>定義3-1</dd>
</dl>

まとめ

本記事では、複雑なリスト構造のマークアップについて、練習問題を通して学びました。以下のポイントを押さえておきましょう。

複雑なリスト構造のマークアップは、情報の階層構造を理解することが大切
順序がある情報には順序ありリスト（<ol>）を、順序がない情報には順序なしリスト（<ul>）を使う
階層構造に合わせて、リストをネストしていく
用語と定義を関連付ける際は、定義リスト（<dl>）を使う