VIDEO LESSON

HTMLのdfnタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:35動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の八十七本目は、ディーエフエヌタグです。
0:08ディーエフエヌは、英語のデフィニション、つまり定義から来た名前で、その用語を今ここで定義している、
0:12ということを示す要素です。
0:16たとえば入門記事で初めて専門用語を紹介するとき、その言葉自体をディーエフエヌで囲みます。
0:22重要なのは、ディーエフエヌが囲むのは用語だけで、意味の説明そのものは前後の文章に書く点です。
0:28今回は、使う場面、書き方、タイトル属性、略語タグとの組み合わせ、よくある間違いまで、
0:32順番に確認していきましょう。
0:36使う場面を整理します。
0:38ディーエフエヌがふさわしいのは、用語が初めて登場し、その場で意味を定義している箇所です。
0:45記事が強調しているのもこの点で、専門用語が出てくるたびに何度も囲むものではありません。
0:51たとえば同じページの中で、セレクターという言葉を二回目、三回目に使うときは、
0:56普通の文章として書けば十分です。
1:00逆に、定義もせずにディーエフエヌだけを置いても意味がありません。
1:05定義とは、用語と、その意味を説く文章がそろって初めて成り立つからです。
1:11用語を囲んだら、その直後に、とは何々です、という説明が続いているかを必ず確認してください。
1:18基本の書き方を確認します。
1:20ディーエフエヌは、開始タグと終了タグで用語を囲んで書きます。
1:25スライドの例では、セレクターという用語だけを囲み、その後に、とは、シーエスエスを適用する要素を選ぶ指定です、
1:30と定義の文章が続きます。
1:36囲む範囲がポイントです。
1:38説明文まで全部を囲んでしまうと、どこが定義対象の用語なのかが曖昧になります。
1:44用語は短く、説明は外に、これが基本形です。
1:47多くのブラウザーでは、ディーエフエヌの文字は斜体で表示されますが、これは見た目の目安にすぎません。
1:55太字や斜体にしたいだけならシーエスエスを使い、定義という意味があるときだけディーエフエヌを選んでください。
2:04記事の活用事例を読み解きます。
2:06例は二つの段落からできています。
2:09一つ目の段落でセレクターをディーエフエヌで囲み、初めて定義します。
2:14二つ目の段落では、セレクターには要素名やクラス名などがあります、と普通の文章として使っています。
2:22定義は一度だけ、という使い分けがよく分かる例です。
2:25試すときは、練習用ファイルのボディにこの例を写し、保存して再読み込みしてください。
2:32そのうえで開発者ツールのエレメンツで、ディーエフエヌが段落の中に正しく入っているか、
2:37入れ子が崩れていないかを確認しましょう。
2:42見た目の斜体だけに頼らず、構造で確かめる習慣が大切です。
2:46タイトル属性についてです。
2:48ディーエフエヌにタイトル属性を付けると、その値が用語の正式な定義として扱われる、
2:52という少し特別な決まりがあります。
2:56スライドのように、タイトルに定義文を入れる書き方も可能です。
3:01ただし記事が注意している通り、タイトル属性の内容は、タッチ操作では表示されなかったり、
3:06支援技術で常に伝わるとは限らなかったりします。
3:11つまり、タイトルだけに大切な説明を閉じ込めてはいけません。
3:15基本は、本文の文章で誰にでも読める形で定義を書き、タイトルはあくまで補足と位置づけてください。
3:22この考え方は、後で学ぶ略語タグでも同じです。
3:25略語との組み合わせを見ます。
3:28定義する用語が略語の場合は、エービービーアールタグと組み合わせるのが定番です。
3:33書き方は、略語そのものをエービービーアールで囲み、その外側をディーエフエヌで包みます。
3:39そして正式名称は、内側のエービービーアールのタイトル属性に書きます。
3:44この場合、外側のディーエフエヌにタイトルは不要で、内側のタイトルがそのまま定義として扱われます。
3:51たとえばエイチティーエムエルを初めて紹介する文章なら、この形がぴったりです。
3:57入れ子の順番を逆にしないこと、そして正式名称と定義の文章を本文にも用意することが、
4:01読み手への配慮になります。
4:05関連する要素として、用語リストとの関係も知っておきましょう。
4:09ディーエルは用語と説明を組にするリストで、ディーティーが用語の欄、ディーディーが説明の欄です。
4:16このディーティーの中で、定義対象の用語にディーエフエヌを使うこともできます。
4:22スライドの例では、セレクターをディーティーの中で囲み、説明をディーディーに分けています。
4:28文章の中で定義するなら段落、用語集のように並べるならディーエル、と場面で選んでください。
4:34なお、同じ用語の定義は文書の中で原則一度だけです。
4:38複数の場所で別々に定義すると、読み手もプログラムも、どれが正式な定義か迷ってしまいます。
4:45共通属性とシーエスエスを確認します。
4:47ディーエフエヌにも、アイディーやクラス、ラングなどの共通属性が使えます。
4:53アイディーを付けておけば、ほかの場所から、その用語の定義へページ内リンクで飛ばすこともできます。
5:00用語集ページでは特に便利な工夫です。
5:02見た目については、多くのブラウザーが初期状態で斜体にしますが、シーエスエスで変えられます。
5:09スライドのようにフォントスタイルをノーマルにして太字にすれば、本文の中で用語が見つけやすくなります。
5:16ただし、色や太さだけで定義だと伝えるのではなく、ディーエフエヌという意味の土台があってこその装飾だという順序を忘れないでください。
5:26ブラウザー互換性を確認します。
5:28記事が紹介するエムディーエヌのデータでは、ディーエフエヌ要素本体は、クロームが十五以降、
5:33エッジが十二以降、ファイアフォックスが一以降、サファリが六以降で対応しています。
5:39どれもかなり古いバージョンから使えており、現在広く使われているブラウザーなら問題なく採用できます。
5:46注意点として、この表は要素本体の対応であり、属性や細かな表示までを保証するものではありません。
5:52モバイル版も含め、実際の対象環境では、三百二十ピクセル程度の狭い画面や文字拡大でも、
5:57用語と説明が読みにくくならないかを合わせて確認すると安心です。
6:02よくある間違いを三つ挙げます。
6:04一つ目は、用語が登場するたびにディーエフエヌで囲んでしまうことです。
6:11定義は最初の説明の場所だけが対象です。
6:14二つ目は、説明の文章なしでディーエフエヌだけを置くことです。
6:20用語だけが斜体になっても、読み手には意味が伝わりません。
6:25三つ目は、文字を斜体にしたいだけの理由で使うことです。
6:30それは意味の誤用で、シーエスエスの役割です。
6:34また、用語のつづりの一部だけを囲ったり、リンクの中身全体を安易に囲ったりすると、
6:39定義対象がずれてしまいます。
6:44囲む前に、ここは本当に定義の場所か、と一度立ち止まることが確実な対策です。
6:51まとめです。
6:52ディーエフエヌは、その用語を定義している箇所を示す要素です。
6:57最後にチェックリストで確認しましょう。
7:00まず、その場所で本当に用語を定義しているか。
7:03次に、囲んでいるのは用語だけで、説明は前後の文章に書けているか。
7:09そして、略語ならエービービーアールと組み合わせ、タイトル属性だけに頼っていないか。
7:15この三点がそろえば、読み手にも、検索や支援技術などのプログラムにも、ここが定義だと正しく伝わります。
7:23小さなタグですが、文章の意味を正確にする大切な役割があります。
7:28ぜひ用語集や入門記事で活用してみてください。
7:31これでディーエフエヌタグの解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

dfnタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。その用語を定義している箇所。説明を周辺の文章に書きます。

解説記事・サンプルコードを読む：HTMLのdfnタグとは？属性・使い方・ブラウザー互換性と活用例 →