JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5で定義リストを作成する方法｜dl・dt・ddタグの使い方を解説

HTML5で定義リスト（記述リスト）を作成するには、<dl>タグを使用します。<dl>タグは、用語とその説明をセットで表現するためのリストを宣言する要素です。リスト全体を<dl>タグで囲み、その中に用語を示す<dt>タグと、説明を示す<dd>タグを組み合わせて記述します。

定義リストの基本構造

通常の箇条書きリストとは異なり、定義リストでは各項目が「用語」と「その説明」という2つの要素で構成されるのが特徴です。基本的な構造は以下のようになります。

  • <dl>：定義リスト全体を囲むコンテナ要素
  • <dt>：定義する用語（Definition Term）を記述する要素
  • <dd>：用語に対する説明や定義内容（Definition Description）を記述する要素

このような構造により、用語集、FAQ、製品仕様など、「項目名と詳細説明」のペアで表現したいコンテンツに適しています。

コード例

以下のコードを実行すると、HTML5での定義リストの作成方法を確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML dl Tag</title>
    </head>
    <body>
        <dl>
            <dt>定義リスト</dt>
            <dd>用語とその定義・説明をまとめたリスト。</dd>
            <dt>C++</dt>
            <dd>C++のチュートリアル。</dd>
            <dt>Java</dt>
            <dd>Javaのチュートリアル。</dd>
        </dl>
    </body>
</html>

表示結果のポイント

このコードをブラウザで表示すると、<dt>で指定した用語の下に、<dd>で指定した説明文がインデントされて表示されます。多くのブラウザでは、<dd>要素にデフォルトで左マージンが設定されているため、説明部分が右にずれて見やすく配置されます。

活用のヒント

1つの<dt>に対して複数の<dd>を続けることや、逆に複数の<dt>に対して1つの<dd>を対応させることも可能です。また、CSSを使えばインデントやフォントスタイルを自由にカスタマイズできるため、サイトのデザインに合わせた柔軟な表現が実現できます。

  1. Microsoft To Do でリストのグループを作成してタスクを見やすく整理する方法

    Microsoft To Do に、リストをまとめて管理できる「グループ」機能が搭載されました。この機能を使えば、関連するタスクリストを名前付きフォルダのように階層化でき、ナビゲーションメニューをすっきりと整頓できます。リストグループの作成手順グループを作成するには、To Do のナビゲーションにある「新しいリスト」ボタンの右側に表示されるアイコンをクリックします。続いて、グループに付けたい名前を入力しましょう。仕事用、プライベート用、プロジェクト別など、自分の用途に合わせた分かりやすい名前を付けるのがおすすめです。作成したグループにリストを追加するグループが作成できたら、次はリストを追加して

  2. Microsoft Lists入門：新しいリストをゼロから作成する完全ガイド

    Microsoft Listsは、Excelスプレッドシートの使いやすさ、Accessデータベースの構造化された設計、そしてAirtableに代表されるサードパーティ製ローコードツールの要素を組み合わせたデータ管理ソリューションです。本ガイドでは、Microsoft Listsで新しいリストをゼロから作成する手順を詳しく解説します。Lists全体の概要を知りたい方は、まず「はじめに」ガイドをご覧いただくことをおすすめします。1. 空白のリストを作成するまず、職場または学校のMicrosoft 365アカウントにサインインし、アプリランチャーからMicrosoft Listsを起動します。アプリ