From a76f8b9387030956c7412c5a34c97cea971797de Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 12 Jun 2021 03:31:48 +0900 Subject: Web/HTML/Element/details を更新 (#1074) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/03/27 時点の英語版に同期 --- files/ja/web/html/element/details/index.html | 105 +++++++++++++-------------- 1 file changed, 50 insertions(+), 55 deletions(-) diff --git a/files/ja/web/html/element/details/index.html b/files/ja/web/html/element/details/index.html index 13770b1b37..14888304f8 100644 --- a/files/ja/web/html/element/details/index.html +++ b/files/ja/web/html/element/details/index.html @@ -2,45 +2,42 @@ title: '
: 詳細折りたたみ要素' slug: Web/HTML/Element/details tags: + - Disclosure Box + - Disclosure Widget + - Element - HTML - - HTML 対話的要素 - - 'HTML:フローコンテンツ' - - 'HTML:対話型コンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML interactive elements + - Reference + - Web - details - - ウェブ - - リファレンス - - 要素 translation_of: Web/HTML/Element/details ---
{{HTMLRef}}
-

HTML の詳細折りたたみ要素 (<details>) は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは {{HTMLElement("summary")}} 要素を使用して提供することができます。

+

HTML の詳細折りたたみ要素 (<details>) は、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは {{HTMLElement("summary")}} 要素を使用して提供する必要があります。

-

折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <details> 要素の最初の子要素が <summary> の場合は、 <summary> 要素が折りたたみウィジェットのラベルとして使用されます。

+

折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素の内容が折りたたみウィジェットのラベルとして使用されます。

{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-shorter")}}
- -

メモ: ウィジェットの開閉を回転する (ねじる) 三角形で表すのが一般的な使い方なので、このウィジェットはツイスティー (twisties) と呼ばれることがあります。

<details> ウィジェットは2つの状態のうち1つを取ります。既定の閉じた状態は <summary> を使用して指定されたラベル文字列 (または{{Glossary("user agent", "ユーザーエージェント")}}が定義した既定の文字列) とウィジェット自身による三角形だけを表示します。これは次のように表示されます。

-
閉じた <details> ウィジェットのスクリーンショット。黒い左向きの三角形が「System Requirements」のテキストの右側にあります。
+
閉じた <details> ウィジェットのスクリーンショット。黒い左向きの三角形が「System Requirements」のテキストの右側にあります。

ここでは既定の閉じた状態であり、折りたたみウィジェットと "System Requirements" というラベルが表示されています。ユーザーがこのウィジェットをクリックするか、フォーカスしてスペースバーを押すと、「ねじれて」開き、コンテンツが展開されて次のようになります。

-
開いた <details> ウィジェットのスクリーンショット。三角形は下向きになり、「System Requirements」とは何かの詳細説明が表示されています。” means is shown.
+
開いた <details> ウィジェットのスクリーンショット。三角形は下向きになり、「System Requirements」とは何かの詳細説明が表示されています。” means is shown.

ここから、 CSS を使用して折りたたみウィジェットの外見を変更することができ、また {{htmlattrxref("open", "details")}} の値を設定したり削除したりすることにより、プログラムから開いたり閉じたりすることができます。

ウィジェットが閉じている時、折りたたみの三角形と概要が表示できるだけの高さしかありません。ウィジェットが開くと、要素は中に含まれた詳細が表示できるだけの大きさに拡大されます。

-

メモ: 残念なことに、現時点では開いたり閉じたりする間のアニメーションを行う組込みの方法はありません。

+

メモ: 残念なことに、現時点では開いたり閉じたりする間のアニメーションを行う組み込みの方法はありません。

完全な標準互換の実装では、 CSS の {{cssxref("display")}}: list-item が自動的に {{HTMLElement("summary")}} に適用されます。この表示方法はカスタマイズすることができます。詳しくは{{anch("Customizing the disclosure widget", "折りたたみウィジェットのカスタマイズ")}}を参照してください。

@@ -48,12 +45,12 @@ translation_of: Web/HTML/Element/details - - + + - + @@ -61,7 +58,11 @@ translation_of: Web/HTML/Element/details - + + + + + @@ -74,16 +75,20 @@ translation_of: Web/HTML/Element/details
コンテンツカテゴリフローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツコンテンツカテゴリフローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツ
許可されている内容1つの {{HTMLElement("summary")}} 要素と、それに続く フローコンテンツ1つの {{HTMLElement("summary")}} 要素と、それに続く フローコンテンツ
タグの省略
許可されている親要素フローコンテンツを受け入れるすべての要素フローコンテンツを受け入れるすべての要素
暗黙的な ARIA ロール{{ARIARole("group")}}
許可されている ARIA ロール
-

属性

+

属性

-

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

+

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

{{htmlattrdef("open")}}
-
この論理属性は、ページ読み込み時に詳細内容、つまり <details> 要素の内容が表示されるよう指定するものです。既定値は false であり、詳細内容は表示しません。
+
+

この論理属性は、現在 — つまり <details> 要素の内容 — が現在表示されているかどうかを示します。この属性がある場合は詳細が表示され、この属性がない場合は非表示になります。既定では、この属性は存在しないため、詳細は表示されません。

+ +

注: 詳細を非表示にするには、この属性を完全に削除する必要があります。この属性は論理属性なので、 open="false" では詳細が表示状態になります。

+
-

イベント

+

イベント

HTML で対応している通常のイベントに加えて、 <details> 要素は {{event("toggle")}} イベントに対応しており、開閉状態が変化するたびに <details> 要素が呼び出されます。イベントは状態が変化した後に送信され、もしブラウザーがイベントを送信する前に状態が2回以上変化しても、イベントは合体して1回しか送信されません。

@@ -97,26 +102,11 @@ translation_of: Web/HTML/Element/details } }); -

例

+

例

-

単純な折りたたみの例

+

単純な折りたたみの例

-

この例では <details> 要素を summary なしで表示します。

- -
<details>
-  <p>Requires a computer running an operating system. The computer
-  must have some memory and ideally some kind of long-term storage.
-  An input device as well as some form of output device is
-  recommended.</p>
-</details>
- -

このような場合、ブラウザーは既定の概要文字列（ふつうは「概要」）を使用します。あなたのブラウザーでは次のように表示されます。

- -

{{EmbedLiveSample("A_simple_disclosure_example", 650, 150)}}

- -

概要の提供

- -

この例では <details> の中で {{HTMLElement("summary")}} 要素を使用して、上記の例に概要を追加したものです。次のようになります。

+

この例では <details> 要素を <summary> 付きで表示します。

<details>
   <summary>System Requirements</summary>
@@ -128,9 +118,9 @@ translation_of: Web/HTML/Element/details
 
 
この HTML の結果は次のようになります。

 
-
{{EmbedLiveSample("Providing_a_summary", 650, 150)}}

+
{{EmbedLiveSample("A_simple_disclosure_example", 650, 150)}}

 
-
折りたたみボックスの作成

+
折りたたみボックスの作成

 
 
<details> ボックスを開いた状態にするために、論理値の open 属性を追加しましょう。

 
@@ -146,14 +136,14 @@ translation_of: Web/HTML/Element/details
 
 
{{EmbedLiveSample("Creating_an_open_disclosure_box", 650, 150)}}

 
-
表示方法のカスタマイズ

+
表示方法のカスタマイズ

 
 
では、いくらか CSS を適用して折りたたみボックスの外見をカスタマイズしましょう。

 
 
CSS

 
 
details {
-  font: 16px "Open Sans", "Arial", sans-serif;
+  font: 16px "Open Sans", Calibri, sans-serif;
   width: 620px;
 }
 
@@ -163,6 +153,7 @@ details > summary {
   background-color: #ddd;
   border: none;
   box-shadow: 3px 3px 4px black;
+  cursor: pointer;
 }
 
 details > p {
@@ -172,10 +163,15 @@ details > p {
   margin: 0;
   box-shadow: 3px 3px 4px black;
 }
-

+
+details[open] > summary {
+  background-color: #ccf;
+}

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

+

details[open] セレクターを、開いている要素のスタイル付けに使用することができます。

+

HTML

<details>
@@ -186,22 +182,22 @@ details > p {
   recommended.</p>
 </details>
-

結果

+

結果

{{EmbedLiveSample("Customizing_the_appearance", 650, 150)}}

-

折りたたみウィジェットのカスタマイズ

+

折りたたみウィジェットのカスタマイズ

折りたたみの三角形ウィジェット自身はカスタマイズできますが、これは最近標準化され、広くは対応されていません。さらに、この対応方法については複数の種類があり、標準はそれに基づいて決定されましたので、しばらくの間はカスタマイズのために複数の方法を使用する必要があります。

{{HTMLElement("summary")}} 要素は {{cssxref("list-style")}} 一括指定プロパティや、 {{cssxref("list-style-type")}} などの個別指定プロパティに対応しており、折りたたみウィジェットを三角形から選択したものに変更することができます (ふつうは {{cssxref("list-style-image")}}) を使用します。例えば、折りたたみウィジェットのアイコンは list-style: none と設定することで削除することができます。

-

しかし、 Chrome はまだこれに対応していませんので、このブラウザーでは外見をカスタマイズするために、非標準の ::-webkit-details-marker 疑似要素を使用する必要があります。

+

しかし、 Chrome はまだこれに対応していませんので、このブラウザーでは外見をカスタマイズするために、非標準の ::-webkit-details-marker 擬似要素を使用する必要があります。

CSS

details {
-  font: 16px "Open Sans", "Arial", sans-serif;
+  font: 16px "Open Sans", Calibri, sans-serif;
   width: 620px;
 }
 
@@ -211,6 +207,7 @@ details > summary {
   background-color: #ddd;
   border: none;
   box-shadow: 3px 3px 4px black;
+  cursor: pointer;
   list-style: none;
 }
 
@@ -239,11 +236,11 @@ details > p {
   recommended.</p>
 </details>
-

結果

+

結果

{{EmbedLiveSample("Customizing_the_disclosure_widget", 650, 150)}}

-

仕様書

+

仕様書

@@ -267,13 +264,11 @@ details > p {
-

ブラウザーの互換性

- - +

ブラウザーの互換性

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

-

関連情報

+

関連情報