From 25c548842539b99d7dc0ba9200c969683bf8a5c4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 12 Jun 2021 03:30:53 +0900 Subject: Web/HTML/Element/dfn を更新 (#1073) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/03/27 時点の英語版に同期 --- files/ja/web/html/element/dfn/index.html | 85 +++++++++++++------------------- 1 file changed, 35 insertions(+), 50 deletions(-) (limited to 'files') diff --git a/files/ja/web/html/element/dfn/index.html b/files/ja/web/html/element/dfn/index.html index 67d5d50b45..333d2fb5d6 100644 --- a/files/ja/web/html/element/dfn/index.html +++ b/files/ja/web/html/element/dfn/index.html @@ -2,34 +2,32 @@ title: ': 定義要素' slug: Web/HTML/Element/dfn tags: + - Definition + - Definitions + - Element - HTML - - HTML 文字レベルの意味付け - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' - - 'HTML:記述コンテンツ' + - HTML text-level semantics - Reference - - ウェブ - - リファレンス - - 要素 + - Semantic Markup + - Web + - dfn translation_of: Web/HTML/Element/dfn ---
{{HTMLRef}}

HTML の定義要素 (<dfn>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。 <dfn> の直近の祖先である {{HTMLElement("p")}} 要素、 {{HTMLElement("dt")}}/{{HTMLElement("dd")}} の組み合わせ、 {{HTMLElement("section")}} 要素が用語の定義とみなされます。

-
{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-standard")}}
- - +
{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}
- - + + - + @@ -37,7 +35,11 @@ translation_of: Web/HTML/Element/dfn - + + + + + @@ -50,17 +52,17 @@ translation_of: Web/HTML/Element/dfn
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 知覚可能コンテンツコンテンツカテゴリーフローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容記述コンテンツ、ただし {{HTMLElement("dfn")}} 要素を子孫にしてはいけません。記述コンテンツ、ただし {{HTMLElement("dfn")}} 要素を子孫にしてはいけません。
タグの省略
許可されている親要素記述コンテンツを受け入れるすべての要素記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール{{ARIARole("term")}}
許可されている ARIA ロール
-

属性

+

属性

この要素の属性はグローバル属性を含みます。

HTML5 においては、この要素の {{htmlattrxref("title")}} 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。

-

使用上のメモ

+

使用上のメモ

<dfn> 要素の使用については、完全に明らかになっていない側面がいくつかあります。ここでそれらを説明します。

-

定義される用語の指定

+

定義される用語の指定

定義される用語は、以下の規則に従います。

@@ -74,32 +76,19 @@ translation_of: Web/HTML/Element/dfn

もし <dfn> 要素に title 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。

-

<dfn> 要素へのリンク

+

<dfn> 要素に {{htmlattrxref("id")}} 属性をつけた場合は、 {{HTMLElement("a")}} 要素を使用してそこにリンクすることができます。用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。

これは以下の{{anch("Links to definitions", "定義へのリンク")}}の例で示します。

-

使用上の注意

- - - -

例

+

例

様々な利用シナリオの例をいくつか見てみましょう。

-

基本的な用語の識別

+

基本的な用語の識別

-

この例は単に、定義の中の用語の位置を識別するために素の <dfn> 要素を使用しています。

+

この例は、定義の中の用語の位置を識別するために素の <dfn> 要素を使用しています。

HTML

@@ -110,13 +99,13 @@ sentence.</p>

<dfn> 要素に title がないので、 <dfn> 要素自身の文字列コンテンツが定義される用語として使用されます。

-

結果

+

結果

このブラウザーでは、このように描画されます。

{{EmbedLiveSample("Basic_identification_of_a_term", 650, 120)}}

- +

定義へのリンクを追加するには、いつも通りの方法で {{HTMLElement("a")}} 要素を使ってリンクを作成します。

@@ -145,13 +134,13 @@ this project.</p>

ここで {{htmlattrxref("id")}} 属性の "definition-dfn" の値をリンク先として使用して、定義を見ることができます。その後で、 <a> の {{htmlattrxref("href", "a")}} 属性を "#definition-dfn" に設定して、定義に戻るリンクを設定します。

-

結果

+

結果

結果のコンテンツはこのようになります。

{{EmbedLiveSample("Links_to_definitions", 650, 300)}}

-

略語と定義の両方の使用

+

略語と定義の両方の使用

場合によっては、用語を定義する際に略語を使用したくなる場合もあるでしょう。これは <dfn> と {{HTMLElement("abbr")}} 要素を組み合わせて、このように実現できます。

@@ -168,13 +157,13 @@ arguably done more to advance science than any device ever built.</p><abbr> 要素が <dfn> の中で入れ子になっています。前者は用語が略語 ("HST") であることを示し、完全な用語 ("Hubble Space Telescope") を title 属性で定義します。後者は略語が定義される用語であることを表します。

-

結果

+

結果

上記のコードの出力はこのようになります。

{{EmbedLiveSample("Using_abbreviations_and_definitions_together", 650, 200)}}

-

仕様書

+

仕様書

@@ -188,30 +177,26 @@ arguably done more to advance science than any device ever built.</p> - + - + - + - +
{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}} {{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-dfn-element', '<dfn>')}} {{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}} {{Spec2('HTML4.01')}} 
-

ブラウザーの対応

- -
- +

ブラウザーの互換性

{{Compat("html.elements.dfn")}}

-
-

関連情報

+

関連情報