HTML 定義リストのマスター

はじめに

この実験では、定義されている用語を強調する定義リストを作成するために HTML <dfn> タグをどのように使用するかを学びます。<dfn> タグは、チュートリアルや教育サイトで一般的に使用され、インタラクティブで情報豊富なユーザーエクスペリエンスを提供します。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70740{{"HTML 定義用語"}} html/head_elems -.-> lab-70740{{"HTML 定義用語"}} html/lists_desc -.-> lab-70740{{"HTML 定義用語"}} html/doc_flow -.-> lab-70740{{"HTML 定義用語"}} html/inter_elems -.-> lab-70740{{"HTML 定義用語"}} html/custom_attr -.-> lab-70740{{"HTML 定義用語"}} end

HTML ファイルのセットアップ

index.html という名前の新しいファイルを作成し、好きなコードエディタで開きます。
ファイルに基本的な HTML 構造を追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Definition List</title>
  </head>
  <body></body>
</html>

定義リストの作成

<body> 要素の中に、定義リストを含む <dl> 要素を作成します。
<dl> 要素の中で、それぞれ <dt> 要素と <dd> 要素を使用して用語と定義のペアを作成します。

<body>
  <dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
      HyperText Markup Languageは、Webページを作成するための標準言語です。
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
      Cascading Style
      Sheetsは、マークアップ言語で記述された文書の表示を記述するために使用されます。
    </dd>
    <dt><dfn>JavaScript</dfn></dt>
    <dd>
      動的なWebサイトコンテンツを作成および制御するために使用されるスクリプト言語です。
    </dd>
  </dl>
</body>

この例では、<dfn> タグを使用して用語を強調し、際立たせています。

ツールチップの追加

各用語にツールチップを追加するには、<dfn> 要素内に title 属性を含めます。

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>HyperText Markup Languageは、Webページを作成するための標準言語です。</dd>

title 属性は、ユーザーがマウスでそれをホバーしたときに完全な用語を表示するツールチップを作成します。

CSS スタイルのカスタマイズ

デフォルトでは、<dfn> タグは斜体のフォントスタイルを持っています。ただし、CSS を使用してスタイルをカスタマイズすることができます。
次の CSS スタイルをファイルに追加します。

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

上記のスタイルは、<dfn> のフォントスタイルを斜体に設定し、フォントカラーを青色に設定します。また、<dt> のフォントウェイトも太字に変更されます。

まとめ

この実験では、HTMLの<dfn>タグを使用して、強調表示された用語とツールチップ付きの定義リストを作成する方法を学びました。<dfn>タグを使用することで、教育コンテンツをよりインタラクティブにし、ユーザーに視覚的に魅力的にすることができます。