From 848f2de13f103b3071210910fc1f6d8624c0c44d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 12 Jun 2021 03:33:19 +0900 Subject: Web/HTML/Element/dl を更新 (#1076) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/31 時点の英語版に同期 --- files/ja/web/html/element/dl/index.html | 84 +++++++++++++++++---------------- 1 file changed, 43 insertions(+), 41 deletions(-) (limited to 'files/ja/web/html/element') diff --git a/files/ja/web/html/element/dl/index.html b/files/ja/web/html/element/dl/index.html index bdc8f616cf..558aff569b 100644 --- a/files/ja/web/html/element/dl/index.html +++ b/files/ja/web/html/element/dl/index.html @@ -2,36 +2,35 @@ title: '
: 説明リスト要素' slug: Web/HTML/Element/dl tags: + - Definition List + - Description list + - Element - HTML - - HTML コンテンツグループ化 - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML grouping content + - HTML:Flow content + - HTML:Palpable Content - Reference - Web - - ウェブ - - リファレンス - - 要素 +browser-compat: html.elements.dl translation_of: Web/HTML/Element/dl ---
{{HTMLRef}}
-

HTML の <dl> 要素は、説明リストを表します。この要素は、一連の用語（{{HTMLElement("dt")}} 要素を使用して指定）と説明（{{HTMLElement("dd")}} 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。

+

HTML の <dl> 要素は、説明リストを表します。この要素は、一連の用語 ({{HTMLElement("dt")}} 要素を使用して指定) と説明 ({{HTMLElement("dd")}} 要素によって提供) をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ (キーと値のペアのリスト) の表示が挙げられます。

{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}
- - - - + + @@ -40,11 +39,15 @@ translation_of: Web/HTML/Element/dl - + + + + + - + @@ -53,15 +56,15 @@ translation_of: Web/HTML/Element/dl
コンテンツカテゴリーフローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツコンテンツカテゴリーフローコンテンツ、<dl> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ
許可されている内容

1 個以上の {{HTMLElement("dt")}} 要素とそれに続く 1 個以上の {{HTMLElement("dd")}} 要素、任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在するもの。
- または 1 個以上の {{HTMLElement("div")}} 要素、任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在するもの。

+ または ({{Glossary("WHATWG")}} HTML や {{Glossary("W3C")}} HTML 5.2 以降では) 1 個以上の {{HTMLElement("div")}} 要素、任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在するもの。
許可されている親要素フローコンテンツを受け入れるすべての要素フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロール{{ARIARole("group")}}, {{ARIARole("presentation")}}{{ARIARole("group")}}, list, {{ARIARole("none")}}, {{ARIARole("presentation")}}
DOM インターフェイス
-

属性

+

属性

この要素にはグローバル属性のみがあります。

-

例

+

例

-

一つの定義語に対する一つの定義説明

+

一つの定義語に対する一つの定義説明

-
<dl>
+
<dl>
   <dt>Firefox</dt>
   <dd>
     A free, open source, cross-platform,
@@ -76,9 +79,9 @@ translation_of: Web/HTML/Element/dl
 
 
{{EmbedLiveSample("Single_term_and_description")}}

 
-
複数の定義語に対する一つの定義説明

+
複数の定義語に対する一つの定義説明

 
-
<dl>
+
<dl>
   <dt>Firefox</dt>
   <dt>Mozilla Firefox</dt>
   <dt>Fx</dt>
@@ -95,9 +98,9 @@ translation_of: Web/HTML/Element/dl
 
 
{{EmbedLiveSample("Multiple_terms_single_description")}}

 
-
一つの定義語に対し、複数の定義内容をあてる

+
一つの定義語に対し、複数の定義内容をあてる

 
-
<dl>
+
<dl>
   <dt>Firefox</dt>
   <dd>
     A free, open source, cross-platform,
@@ -118,15 +121,15 @@ translation_of: Web/HTML/Element/dl
 
 
{{EmbedLiveSample("Single_term_multiple_descriptions")}}

 
-
複数の定義語に対し、複数の定義内容をあてる

+
複数の定義語に対し、複数の定義内容をあてる

 
 
これまでの例を組み合わせることで、複数の定義語に対し、複数の内容を定義することもできます。

 
-
メタデータ

+
メタデータ

 
 
説明リストは、キーと値のペアのリストであるメタデータの表示にも役立ちます。

 
-
<dl>
+
<dl>
   <dt>Name</dt>
   <dd>Godzilla</dd>
   <dt>Born</dt>
@@ -140,15 +143,15 @@ translation_of: Web/HTML/Element/dl
 
 
ヒント: CSS でキーと値のセパレーターを定義すると便利でしょう。

 
-
dt::after {
+
dt::after {
   content: ": ";
 }

 
-
名前と値のグループを {{HTMLElement("div")}} 要素で包む

+
名前と値のグループを div 要素で包む

 
-
WHATWG HTML では、{{HTMLElement("dl")}} 要素内でそれそれの名前と値のグループを、{{HTMLElement("div")}} 要素で包むことができます。これは microdata を使用するとき、グループ全体に グローバル属性 を適用するとき、あるいはスタイルを設定するために役立ちます。

+
WHATWG HTML では、{{HTMLElement("dl")}} 要素内でそれそれの名前と値のグループを、{{HTMLElement("div")}} 要素でまとめることができます。これは microdata を使用するとき、グループ全体に グローバル属性 を適用するとき、あるいはスタイルを設定するために役立ちます。

 
-
<dl>
+
<dl>
   <div>
     <dt>Name</dt>
     <dd>Godzilla</dd>
@@ -168,21 +171,22 @@ translation_of: Web/HTML/Element/dl
 </dl>
 

 
-
メモ

+
メモ

 
 
単なる字下げの目的でこの要素 (あるいは {{HTMLElement("ul")}} 要素) を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。

 
-
用語の説明のインデントを変更するには、CSS の {{cssxref("margin")}} プロパティを使用します。

+
用語の説明のインデントを変更するには、CSS の {{cssxref("margin")}} プロパティを使用してください。

 
-
アクセシビリティの考慮事項

+
アクセシビリティの考慮

 
-
読み上げソフトによって <dl> の内容の読み上げは異なります。iOS の VoiceOver など、読み上げソフトによっては <dl> の内容がリストであるため読み上げないものがあります。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。

+
画面リーダーによって <dl> の内容の読み上げは異なります。 iOS 14 では、 VoiceOver は仮想カーソルで操作する際に、 <dl> の内容がリストであることをアナウンスします (read-all コマンドを使用しなくても)。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。

 
 
 
-
仕様書

+
仕様書

 
 
@@ -201,7 +205,7 @@ translation_of: Web/HTML/Element/dl
   
-   
+   
@@ -211,13 +215,11 @@ translation_of: Web/HTML/Element/dl
  

  

    {{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}
    {{Spec2('HTML5 W3C')}}{{HTMLElement("div")}} 要素を中に入れ、 <dt> および <dd> 要素を囲むことができるようになった。
   

   

    {{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}
 

 
-
ブラウザー実装状況

-
-
+
ブラウザーの互換性

 
-
{{Compat("html.elements.dl")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
    
  
  • {{HTMLElement("dt")}} 要素
    • 
-- 
cgit v1.2.3-54-g00ecf