はじめに
この実験では、定義されている用語を強調する定義リストを作成するために HTML <dfn> タグをどのように使用するかを学びます。<dfn> タグは、チュートリアルや教育サイトで一般的に使用され、インタラクティブで情報豊富なユーザー エクスペリエンスを提供します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
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>タグを使用することで、教育コンテンツをよりインタラクティブにし、ユーザーに視覚的に魅力的にすることができます。
