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/summary/index.html | 164 +++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/ja/web/html/element/summary/index.html (limited to 'files/ja/web/html/element/summary/index.html') diff --git a/files/ja/web/html/element/summary/index.html b/files/ja/web/html/element/summary/index.html new file mode 100644 index 0000000000..d89d19b986 --- /dev/null +++ b/files/ja/web/html/element/summary/index.html @@ -0,0 +1,164 @@ +--- +title: ': 概要明示要素' +slug: Web/HTML/Element/summary +tags: + - Disclosure Box + - Disclosure Control + - Disclosure Summary + - Element + - HTML + - HTML interactive elements + - Reference + - Summary + - Web +translation_of: Web/HTML/Element/summary +--- +
{{HTMLRef}}
+ +

HTML の概要明示要素 (<summary>) は、 {{HTMLElement("details")}} 要素の内容の要約、キャプション、説明、凡例を表します。 <summary> 要素をクリックすると、親の <details> 要素の開閉状態を切り替えることができます。

+ +
{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
許可されている内容記述コンテンツ。または 見出しコンテンツ のうちひとつの要素
タグの省略不可。開始タグと終了タグの両方が必要。
許可されている親要素{{HTMLElement("details")}} 要素
暗黙の ARIA ロールbutton
許可されている ARIA ロール許可されている role なし
DOM インターフェイス{{domxref("HTMLElement")}}
+ +

属性

+ +

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

+ +

使用上の注意

+ +

<summary> 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。

+ +

<summary> 要素は、 <details> 要素の最初の子としてのみ使用できます。ユーザーが概要をクリックすると、親の <details> 要素が開閉し、 <details> 要素に {{event("toggle")}} イベントが送信され、状態が変化したことを知るために使用することができます。

+ +

既定のラベルテキスト

+ +

<details> 要素の最初の子が <summary> 要素でない場合、{{Glossary("user agent", "ユーザーエージェント")}}は既定の文字列 (ふつうは「詳細」) を折りたたみボックスのラベルとして使用します。

+ +

既定のスタイル

+ +

HTML 標準では、<summary> の既定のスタイルに display:list-item が含まれています。これで、ラベルの隣に既定で (多くは三角形で) 表示される折りたたみウィジェットのとして表示さえるアイコンを変更したり削除したりすることができます。

+ +

スタイルを display:block に変更すると、展開用の三角印を削除することができます。

+ +

詳しくは{{anch("Browser compatibility", "ブラウザーの互換性")}}の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。

+ +

例

+ +

以下に <summary> を使用している例をいくつか示します。 {{HTMLElement("details")}} 要素のドキュメントにもいくつか例があります。

+ +

基本的な例

+ +

{{HTMLElement("details")}} 要素の中で <summary> の使用を示す簡単な例です。

+ +
<details open>
+  <summary>Overview</summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+ +

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

+ +

見出しとしての概要

+ +

次のように、 <summary> の中で見出し要素を使用することができます。

+ +
<details open>
+  <summary><h4>Overview</h4></summary>
+    <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+ +

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

+ +

これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。

+ +
+

警告: <summary> 要素の既定のロールは button (子要素からはすべてのロールを外す) ですので、この例は読み上げソフトのような支援技術のユーザーには動作しません。 <h4> のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。

+
+ +

概要の中の HTML

+ +

この例は、 <summary> 要素にいくらか意味をを追加して、ラベルを重要であると示します。

+ +
<details open>
+  <summary><strong>Overview</strong></summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML5.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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