【HTML5入門】3-2 定義リスト(HTMLのリスト表記)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLにおけるリスト表記の作り方について学んできました。

今回は、項目情報がセットになったリスト表記について学んでいきましょう。

情報がセットになったリスト

リスト表記をする際に、各項目の内容を示したい場合があるかと思います。前回やった「リストの階層」を用いるのも1つの手ですが、ここでは、別のタグを使った方法をご紹介します。

dlタグ

dlタグは、情報がセットになったリスト全体を示すタグとなります。dlの正式名称は「definition list」となり、定義リストと訳されます。

dtタグ

dtタグは、情報の項目名を表記する場合に使用するタグとなります。dtの正式名称は「definition team」となり。定義語を表します。

ddタグ

ddタグは、情報の内容を表記する場合に使用するタグとなります。ddの正式名称は「definition description」となり。定義の説明を表します。

定義リストを使用する具体例

定義リストの使い方はわかっても、現時点では、どのような場合に使用するのかを判断するのが難しいかもしれません。ここでは、定義リストを使用する1つの具体例として、「質問と答え」を表記する場合を考えてみましょう。

HTMLに記述してみよう

では早速、今回学んだ3つのタグを使って、実際に具体例の通りにHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    質問1
    答え1
  </body>
</html>

この状態でWebブラウザを確認すると、下記のように表示されていると思います。

定義リストを作成してみよう

では、まずはdlタグを使用し、記述が定義リストであることを示してみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <!-- dlタグを追加し、定義リストを作成 -->
    <dl>
      質問1
      答え1  
    </dl>
  </body>
</html>

項目と内容を定義してみよう

続いて、dtタグとddタグを使って、項目と内容を定義してみましょう。今回は、「質問1」を項目とし、「答え1」を内容とします。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <dl>
      <!-- dt,ddタグを追加し、定義リストの中身を項目と内容に区別 -->
      <dt>質問1</dt>
      <dd>答え1</dd>  
    </dl>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

「答え1」がインデントされ、質問1との対応関係がわかりやすくなりました。

同様の定義を複数作成してみよう

では、上記のコードを複製して、3つの「質問と答え」を作成してみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <dl>
      <dt>質問1</dt>
      <dd>答え1</dd>
      <!-- 同じような内容を合計3つ作成 -->
      <dt>質問2</dt>
      <dd>答え2</dd>
      <dt>質問3</dt>
      <dd>答え3</dd>
    </dl>
  </body>
</html>

これが実際にどんな表示になるのか、Webブラウザで確認してみましょう。

「問題と答え」のセットが3つ分、それぞれわかりやすく表示されました。

定義リストを使用する理由

今回の「定義リスト」と「リストの階層」のように、リストには、同じように表示させるためにも複数の方法があります。

その中で、定義リストを採用する理由の1つとして、コードの可読性を上げるというものがあります。実際にWebブラウザに表示する際の見え方はそれほど変わりないかもしれませんが、HTMLファイルを見た時に、項目と内容で分かれていることがわかりやすくなり、対応関係の判別が容易になります。

おわりに

今回は、項目情報がセットになったリスト表記について見てきました。今回学んだタグは、一見すると少し使いどころが難しく感じるかもしれませんが、CSSと組み合わせたりする際に、非常に役に立ちます。うろ覚えでも良いので、「定義リストというものがある」ということを、ぜひ覚えておいてください。

次の記事はこちら

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
     

コメントを残す

*