From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/dl/index.html | 225 ++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 files/ja/web/html/element/dl/index.html (limited to 'files/ja/web/html/element/dl/index.html') diff --git a/files/ja/web/html/element/dl/index.html b/files/ja/web/html/element/dl/index.html new file mode 100644 index 0000000000..bdc8f616cf --- /dev/null +++ b/files/ja/web/html/element/dl/index.html @@ -0,0 +1,225 @@ +--- +title: '
: 説明リスト要素' +slug: Web/HTML/Element/dl +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - Web + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/dl +--- +
{{HTMLRef}}
+ +

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

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

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

+
タグの省略{{no_tag_omission}}
許可されている親要素フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール{{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM インターフェイス{{domxref("HTMLDListElement")}}
+ +

属性

+ +

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

+ +

例

+ +

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

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

{{EmbedLiveSample("Single_term_and_description")}}

+ +

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

+ +
<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

{{EmbedLiveSample("Multiple_terms_single_description")}}

+ +

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

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser
+    Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger
+    than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

{{EmbedLiveSample("Single_term_multiple_descriptions")}}

+ +

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

+ +

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

+ +

メタデータ

+ +

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

+ +
<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+
+ +

ヒント: CSS でキーと値のセパレーターを定義すると便利でしょう。

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

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

+ +

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

+ +
<dl>
+  <div>
+    <dt>Name</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Born</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Birthplace</dt>
+    <dd>Japan</dd>
+  </div>
+  <div>
+    <dt>Color</dt>
+    <dd>Green</dd>
+  </div>
+</dl>
+
+ +

メモ

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}{{Spec2('HTML4.01')}}初回定義
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf