HTML の説明リストをマスターする

はじめに

HTML には、説明リストを定義するために使用される特別なタグ <dl> があります。この種のリストは、通常、用語とその定義を説明するため、または製品やサービスの簡単な説明を与えるために作成されます。この実験では、HTML で <dl> タグを使用して独自の説明リストを作成する方法を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

HTML ファイルをセットアップする

index.html という新しい HTML ファイルを作成します。基本的な HTML 構造とページのタイトルを含めます。

<!doctype html>
<html>
  <head>
    <title>My Description List</title>
  </head>
  <body></body>
</html>

タグを使って説明リストを作成する

HTML ファイルの本文内で、<dl> タグを使用して説明リストを作成します。<dl> タグは、定義される用語を表す <dt> タグと、用語の定義を表す <dd> タグと対になっていなければなりません。

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

説明リストにスタイリングを追加する

説明リストを見栄えよくするには、CSS スタイリングを追加します。この例では、マージンとパディングをゼロに設定して削除し、その後 <dt> タグにいくらかのパディングを追加して際立たせます。

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

説明リストにコンテンツを追加する

基本的な説明リストがセットアップできたので、独自のコンテンツを追加し始めることができます。各用語と定義に対して、新しい <dt> と <dd> のペアをリストに簡単に追加します。

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, the standard markup language used to create web
    pages
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, a language used for describing the presentation of a
    document written in HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>A programming language used primarily for developing web applications</dd>
</dl>

index.html ファイルを保存し、その後、ウェブブラウザで開いて新しい説明リストを表示します。

まとめ

この実験では、HTML の <dl> タグを使用して用語と定義付きの説明リストを作成する方法を学びました。<dt> タグと <dd> タグを使用することで、用語を定義し、それぞれに対する説明を提供することができました。また、説明リストに簡単な CSS スタイリングを追加して、ウェブページ上で見栄えを良くする方法も学びました。