From 7dece22789a9af1d274abd09e7b87b881f228ed7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 22 Aug 2022 01:27:38 +0900 Subject: [PATCH 1/3] =?UTF-8?q?web/api/html*=20=E4=BB=A5=E4=B8=8B=E3=82=92?= =?UTF-8?q?=20md=20=E3=81=AB=E6=94=B9=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../drag_operations/{index.html => index.md} | 0 files/ja/web/api/html_drag_and_drop_api/{index.html => index.md} | 0 .../recommended_drag_types/{index.html => index.md} | 0 files/ja/web/api/htmlaudioelement/{index.html => index.md} | 0 files/ja/web/api/htmlbrelement/{index.html => index.md} | 0 .../api/htmlcanvaselement/capturestream/{index.html => index.md} | 0 files/ja/web/api/htmlcanvaselement/{index.html => index.md} | 0 .../ja/web/api/htmlcanvaselement/toblob/{index.html => index.md} | 0 .../web/api/htmlcanvaselement/todataurl/{index.html => index.md} | 0 files/ja/web/api/htmlcollection/{index.html => index.md} | 0 files/ja/web/api/htmlcontentelement/{index.html => index.md} | 0 files/ja/web/api/htmldataelement/{index.html => index.md} | 0 files/ja/web/api/htmldetailselement/{index.html => index.md} | 0 .../api/htmldetailselement/toggle_event/{index.html => index.md} | 0 .../api/htmldialogelement/cancel_event/{index.html => index.md} | 0 .../api/htmldialogelement/close_event/{index.html => index.md} | 0 files/ja/web/api/htmldialogelement/{index.html => index.md} | 0 files/ja/web/api/htmldocument/{index.html => index.md} | 0 files/ja/web/api/htmlfieldsetelement/{index.html => index.md} | 0 .../web/api/htmlformcontrolscollection/{index.html => index.md} | 0 .../api/htmlinputelement/select_event/{index.html => index.md} | 0 files/ja/web/api/htmlkeygenelement/{index.html => index.md} | 0 files/ja/web/api/htmllegendelement/{index.html => index.md} | 0 files/ja/web/api/htmlmapelement/{index.html => index.md} | 0 files/ja/web/api/htmlmodelement/{index.html => index.md} | 0 files/ja/web/api/htmloptionelement/{index.html => index.md} | 0 .../ja/web/api/htmloptionelement/option/{index.html => index.md} | 0 files/ja/web/api/htmloutputelement/{index.html => index.md} | 0 files/ja/web/api/htmlpictureelement/{index.html => index.md} | 0 files/ja/web/api/htmlquoteelement/{index.html => index.md} | 0 .../getdistributednodes/{index.html => index.md} | 0 files/ja/web/api/htmlshadowelement/{index.html => index.md} | 0 files/ja/web/api/htmlsourceelement/{index.html => index.md} | 0 files/ja/web/api/htmlspanelement/{index.html => index.md} | 0 files/ja/web/api/htmlstyleelement/{index.html => index.md} | 0 files/ja/web/api/htmlstyleelement/media/{index.html => index.md} | 0 files/ja/web/api/htmltimeelement/{index.html => index.md} | 0 files/ja/web/api/htmltitleelement/{index.html => index.md} | 0 files/ja/web/api/htmlunknownelement/{index.html => index.md} | 0 39 files changed, 0 insertions(+), 0 deletions(-) rename files/ja/web/api/html_drag_and_drop_api/drag_operations/{index.html => index.md} (100%) rename files/ja/web/api/html_drag_and_drop_api/{index.html => index.md} (100%) rename files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/{index.html => index.md} (100%) rename files/ja/web/api/htmlaudioelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlbrelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlcanvaselement/capturestream/{index.html => index.md} (100%) rename files/ja/web/api/htmlcanvaselement/{index.html => index.md} (100%) rename files/ja/web/api/htmlcanvaselement/toblob/{index.html => index.md} (100%) rename files/ja/web/api/htmlcanvaselement/todataurl/{index.html => index.md} (100%) rename files/ja/web/api/htmlcollection/{index.html => index.md} (100%) rename files/ja/web/api/htmlcontentelement/{index.html => index.md} (100%) rename files/ja/web/api/htmldataelement/{index.html => index.md} (100%) rename files/ja/web/api/htmldetailselement/{index.html => index.md} (100%) rename files/ja/web/api/htmldetailselement/toggle_event/{index.html => index.md} (100%) rename files/ja/web/api/htmldialogelement/cancel_event/{index.html => index.md} (100%) rename files/ja/web/api/htmldialogelement/close_event/{index.html => index.md} (100%) rename files/ja/web/api/htmldialogelement/{index.html => index.md} (100%) rename files/ja/web/api/htmldocument/{index.html => index.md} (100%) rename files/ja/web/api/htmlfieldsetelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlformcontrolscollection/{index.html => index.md} (100%) rename files/ja/web/api/htmlinputelement/select_event/{index.html => index.md} (100%) rename files/ja/web/api/htmlkeygenelement/{index.html => index.md} (100%) rename files/ja/web/api/htmllegendelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlmapelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlmodelement/{index.html => index.md} (100%) rename files/ja/web/api/htmloptionelement/{index.html => index.md} (100%) rename files/ja/web/api/htmloptionelement/option/{index.html => index.md} (100%) rename files/ja/web/api/htmloutputelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlpictureelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlquoteelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlshadowelement/getdistributednodes/{index.html => index.md} (100%) rename files/ja/web/api/htmlshadowelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlsourceelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlspanelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlstyleelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlstyleelement/media/{index.html => index.md} (100%) rename files/ja/web/api/htmltimeelement/{index.html => index.md} (100%) rename files/ja/web/api/htmltitleelement/{index.html => index.md} (100%) rename files/ja/web/api/htmlunknownelement/{index.html => index.md} (100%) diff --git a/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.md similarity index 100% rename from files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html rename to files/ja/web/api/html_drag_and_drop_api/drag_operations/index.md diff --git a/files/ja/web/api/html_drag_and_drop_api/index.html b/files/ja/web/api/html_drag_and_drop_api/index.md similarity index 100% rename from files/ja/web/api/html_drag_and_drop_api/index.html rename to files/ja/web/api/html_drag_and_drop_api/index.md diff --git a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.md similarity index 100% rename from files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html rename to files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.md diff --git a/files/ja/web/api/htmlaudioelement/index.html b/files/ja/web/api/htmlaudioelement/index.md similarity index 100% rename from files/ja/web/api/htmlaudioelement/index.html rename to files/ja/web/api/htmlaudioelement/index.md diff --git a/files/ja/web/api/htmlbrelement/index.html b/files/ja/web/api/htmlbrelement/index.md similarity index 100% rename from files/ja/web/api/htmlbrelement/index.html rename to files/ja/web/api/htmlbrelement/index.md diff --git a/files/ja/web/api/htmlcanvaselement/capturestream/index.html b/files/ja/web/api/htmlcanvaselement/capturestream/index.md similarity index 100% rename from files/ja/web/api/htmlcanvaselement/capturestream/index.html rename to files/ja/web/api/htmlcanvaselement/capturestream/index.md diff --git a/files/ja/web/api/htmlcanvaselement/index.html b/files/ja/web/api/htmlcanvaselement/index.md similarity index 100% rename from files/ja/web/api/htmlcanvaselement/index.html rename to files/ja/web/api/htmlcanvaselement/index.md diff --git a/files/ja/web/api/htmlcanvaselement/toblob/index.html b/files/ja/web/api/htmlcanvaselement/toblob/index.md similarity index 100% rename from files/ja/web/api/htmlcanvaselement/toblob/index.html rename to files/ja/web/api/htmlcanvaselement/toblob/index.md diff --git a/files/ja/web/api/htmlcanvaselement/todataurl/index.html b/files/ja/web/api/htmlcanvaselement/todataurl/index.md similarity index 100% rename from files/ja/web/api/htmlcanvaselement/todataurl/index.html rename to files/ja/web/api/htmlcanvaselement/todataurl/index.md diff --git a/files/ja/web/api/htmlcollection/index.html b/files/ja/web/api/htmlcollection/index.md similarity index 100% rename from files/ja/web/api/htmlcollection/index.html rename to files/ja/web/api/htmlcollection/index.md diff --git a/files/ja/web/api/htmlcontentelement/index.html b/files/ja/web/api/htmlcontentelement/index.md similarity index 100% rename from files/ja/web/api/htmlcontentelement/index.html rename to files/ja/web/api/htmlcontentelement/index.md diff --git a/files/ja/web/api/htmldataelement/index.html b/files/ja/web/api/htmldataelement/index.md similarity index 100% rename from files/ja/web/api/htmldataelement/index.html rename to files/ja/web/api/htmldataelement/index.md diff --git a/files/ja/web/api/htmldetailselement/index.html b/files/ja/web/api/htmldetailselement/index.md similarity index 100% rename from files/ja/web/api/htmldetailselement/index.html rename to files/ja/web/api/htmldetailselement/index.md diff --git a/files/ja/web/api/htmldetailselement/toggle_event/index.html b/files/ja/web/api/htmldetailselement/toggle_event/index.md similarity index 100% rename from files/ja/web/api/htmldetailselement/toggle_event/index.html rename to files/ja/web/api/htmldetailselement/toggle_event/index.md diff --git a/files/ja/web/api/htmldialogelement/cancel_event/index.html b/files/ja/web/api/htmldialogelement/cancel_event/index.md similarity index 100% rename from files/ja/web/api/htmldialogelement/cancel_event/index.html rename to files/ja/web/api/htmldialogelement/cancel_event/index.md diff --git a/files/ja/web/api/htmldialogelement/close_event/index.html b/files/ja/web/api/htmldialogelement/close_event/index.md similarity index 100% rename from files/ja/web/api/htmldialogelement/close_event/index.html rename to files/ja/web/api/htmldialogelement/close_event/index.md diff --git a/files/ja/web/api/htmldialogelement/index.html b/files/ja/web/api/htmldialogelement/index.md similarity index 100% rename from files/ja/web/api/htmldialogelement/index.html rename to files/ja/web/api/htmldialogelement/index.md diff --git a/files/ja/web/api/htmldocument/index.html b/files/ja/web/api/htmldocument/index.md similarity index 100% rename from files/ja/web/api/htmldocument/index.html rename to files/ja/web/api/htmldocument/index.md diff --git a/files/ja/web/api/htmlfieldsetelement/index.html b/files/ja/web/api/htmlfieldsetelement/index.md similarity index 100% rename from files/ja/web/api/htmlfieldsetelement/index.html rename to files/ja/web/api/htmlfieldsetelement/index.md diff --git a/files/ja/web/api/htmlformcontrolscollection/index.html b/files/ja/web/api/htmlformcontrolscollection/index.md similarity index 100% rename from files/ja/web/api/htmlformcontrolscollection/index.html rename to files/ja/web/api/htmlformcontrolscollection/index.md diff --git a/files/ja/web/api/htmlinputelement/select_event/index.html b/files/ja/web/api/htmlinputelement/select_event/index.md similarity index 100% rename from files/ja/web/api/htmlinputelement/select_event/index.html rename to files/ja/web/api/htmlinputelement/select_event/index.md diff --git a/files/ja/web/api/htmlkeygenelement/index.html b/files/ja/web/api/htmlkeygenelement/index.md similarity index 100% rename from files/ja/web/api/htmlkeygenelement/index.html rename to files/ja/web/api/htmlkeygenelement/index.md diff --git a/files/ja/web/api/htmllegendelement/index.html b/files/ja/web/api/htmllegendelement/index.md similarity index 100% rename from files/ja/web/api/htmllegendelement/index.html rename to files/ja/web/api/htmllegendelement/index.md diff --git a/files/ja/web/api/htmlmapelement/index.html b/files/ja/web/api/htmlmapelement/index.md similarity index 100% rename from files/ja/web/api/htmlmapelement/index.html rename to files/ja/web/api/htmlmapelement/index.md diff --git a/files/ja/web/api/htmlmodelement/index.html b/files/ja/web/api/htmlmodelement/index.md similarity index 100% rename from files/ja/web/api/htmlmodelement/index.html rename to files/ja/web/api/htmlmodelement/index.md diff --git a/files/ja/web/api/htmloptionelement/index.html b/files/ja/web/api/htmloptionelement/index.md similarity index 100% rename from files/ja/web/api/htmloptionelement/index.html rename to files/ja/web/api/htmloptionelement/index.md diff --git a/files/ja/web/api/htmloptionelement/option/index.html b/files/ja/web/api/htmloptionelement/option/index.md similarity index 100% rename from files/ja/web/api/htmloptionelement/option/index.html rename to files/ja/web/api/htmloptionelement/option/index.md diff --git a/files/ja/web/api/htmloutputelement/index.html b/files/ja/web/api/htmloutputelement/index.md similarity index 100% rename from files/ja/web/api/htmloutputelement/index.html rename to files/ja/web/api/htmloutputelement/index.md diff --git a/files/ja/web/api/htmlpictureelement/index.html b/files/ja/web/api/htmlpictureelement/index.md similarity index 100% rename from files/ja/web/api/htmlpictureelement/index.html rename to files/ja/web/api/htmlpictureelement/index.md diff --git a/files/ja/web/api/htmlquoteelement/index.html b/files/ja/web/api/htmlquoteelement/index.md similarity index 100% rename from files/ja/web/api/htmlquoteelement/index.html rename to files/ja/web/api/htmlquoteelement/index.md diff --git a/files/ja/web/api/htmlshadowelement/getdistributednodes/index.html b/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md similarity index 100% rename from files/ja/web/api/htmlshadowelement/getdistributednodes/index.html rename to files/ja/web/api/htmlshadowelement/getdistributednodes/index.md diff --git a/files/ja/web/api/htmlshadowelement/index.html b/files/ja/web/api/htmlshadowelement/index.md similarity index 100% rename from files/ja/web/api/htmlshadowelement/index.html rename to files/ja/web/api/htmlshadowelement/index.md diff --git a/files/ja/web/api/htmlsourceelement/index.html b/files/ja/web/api/htmlsourceelement/index.md similarity index 100% rename from files/ja/web/api/htmlsourceelement/index.html rename to files/ja/web/api/htmlsourceelement/index.md diff --git a/files/ja/web/api/htmlspanelement/index.html b/files/ja/web/api/htmlspanelement/index.md similarity index 100% rename from files/ja/web/api/htmlspanelement/index.html rename to files/ja/web/api/htmlspanelement/index.md diff --git a/files/ja/web/api/htmlstyleelement/index.html b/files/ja/web/api/htmlstyleelement/index.md similarity index 100% rename from files/ja/web/api/htmlstyleelement/index.html rename to files/ja/web/api/htmlstyleelement/index.md diff --git a/files/ja/web/api/htmlstyleelement/media/index.html b/files/ja/web/api/htmlstyleelement/media/index.md similarity index 100% rename from files/ja/web/api/htmlstyleelement/media/index.html rename to files/ja/web/api/htmlstyleelement/media/index.md diff --git a/files/ja/web/api/htmltimeelement/index.html b/files/ja/web/api/htmltimeelement/index.md similarity index 100% rename from files/ja/web/api/htmltimeelement/index.html rename to files/ja/web/api/htmltimeelement/index.md diff --git a/files/ja/web/api/htmltitleelement/index.html b/files/ja/web/api/htmltitleelement/index.md similarity index 100% rename from files/ja/web/api/htmltitleelement/index.html rename to files/ja/web/api/htmltitleelement/index.md diff --git a/files/ja/web/api/htmlunknownelement/index.html b/files/ja/web/api/htmlunknownelement/index.md similarity index 100% rename from files/ja/web/api/htmlunknownelement/index.html rename to files/ja/web/api/htmlunknownelement/index.md From cc3c4099ad335d8f0e4554353ef6fb2ca2f0ac21 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 22 Aug 2022 01:37:19 +0900 Subject: [PATCH 2/3] =?UTF-8?q?web/api/html*=20=E4=BB=A5=E4=B8=8B=E3=82=92?= =?UTF-8?q?=20md=20=E3=81=AB=E4=B8=80=E6=8B=AC=E5=A4=89=E6=8F=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../drag_operations/index.md | 329 +++++++++--------- .../web/api/html_drag_and_drop_api/index.md | 288 ++++++--------- .../recommended_drag_types/index.md | 181 +++++----- files/ja/web/api/htmlaudioelement/index.md | 142 +++----- files/ja/web/api/htmlbrelement/index.md | 59 +--- .../htmlcanvaselement/capturestream/index.md | 79 ++--- files/ja/web/api/htmlcanvaselement/index.md | 110 ++---- .../web/api/htmlcanvaselement/toblob/index.md | 146 ++++---- .../api/htmlcanvaselement/todataurl/index.md | 147 ++++---- files/ja/web/api/htmlcollection/index.md | 89 ++--- files/ja/web/api/htmlcontentelement/index.md | 48 +-- files/ja/web/api/htmldataelement/index.md | 59 +--- files/ja/web/api/htmldetailselement/index.md | 46 +-- .../htmldetailselement/toggle_event/index.md | 150 ++++---- .../htmldialogelement/cancel_event/index.md | 127 +++---- .../htmldialogelement/close_event/index.md | 60 ++-- files/ja/web/api/htmldialogelement/index.md | 185 +++++----- files/ja/web/api/htmldocument/index.md | 37 +- files/ja/web/api/htmlfieldsetelement/index.md | 120 +++---- .../api/htmlformcontrolscollection/index.md | 40 +-- .../htmlinputelement/select_event/index.md | 97 +++--- files/ja/web/api/htmlkeygenelement/index.md | 166 ++------- files/ja/web/api/htmllegendelement/index.md | 105 ++---- files/ja/web/api/htmlmapelement/index.md | 73 ++-- files/ja/web/api/htmlmodelement/index.md | 67 ++-- files/ja/web/api/htmloptionelement/index.md | 108 ++---- .../web/api/htmloptionelement/option/index.md | 95 +++-- files/ja/web/api/htmloutputelement/index.md | 175 ++++------ files/ja/web/api/htmlpictureelement/index.md | 43 +-- files/ja/web/api/htmlquoteelement/index.md | 69 ++-- .../getdistributednodes/index.md | 48 +-- files/ja/web/api/htmlshadowelement/index.md | 53 +-- files/ja/web/api/htmlsourceelement/index.md | 115 +++--- files/ja/web/api/htmlspanelement/index.md | 63 +--- files/ja/web/api/htmlstyleelement/index.md | 85 ++--- .../web/api/htmlstyleelement/media/index.md | 97 ++---- files/ja/web/api/htmltimeelement/index.md | 65 +--- files/ja/web/api/htmltitleelement/index.md | 82 ++--- files/ja/web/api/htmlunknownelement/index.md | 49 +-- 39 files changed, 1596 insertions(+), 2501 deletions(-) diff --git a/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.md index d40f318a0b2508..5b6f8650ca18c8 100644 --- a/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.md +++ b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.md @@ -11,110 +11,113 @@ tags: translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations original_slug: DragDrop/Drag_Operations --- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+{{DefaultAPISidebar("HTML Drag and Drop API")}} -

以下は、ドラッグ＆ドロップ操作が行われる時の各段階についての解説です。

+以下は、ドラッグ＆ドロップ操作が行われる時の各段階についての解説です。 -

この文書で記述されているドラッグ操作は {{domxref("DataTransfer")}} インターフェイスを使用します。この文書では {{domxref("DataTransferItem")}} インターフェイスや {{domxref("DataTransferItemList")}} インターフェイスは説明しません。

+> **Note:** この文書で記述されているドラッグ操作は {{domxref("DataTransfer")}} インターフェイスを使用します。この文書では {{domxref("DataTransferItem")}} インターフェイスや {{domxref("DataTransferItemList")}} インターフェイスは説明*しません*。 -

draggable 属性

+## draggable 属性 -

ウェブページにおいては、既定のドラッグ＆ドロップの挙動が使われる場合がいくつかあります。文字列の選択範囲、画像、リンクなどのドラッグなどがこれにあたります。画像かリンクがドラッグされた時は、画像もしくはリンク先の URL がドラッグデータとして設定され、ドラッグ操作が始まります。その他の要素は、既定のドラッグ操作が行われるためには選択範囲に含まれていなければなりません。実際の様子を確認するには、ウェブページの一部を選択して、その上でマウスのボタンを押下し、そのまま選択範囲をドラッグしてください。ドラッグ中、選択範囲の内容を半透明で描画した物がマウスポインターに伴って表示されるでしょう。ただしこの挙動は、ドラッグされたデータを加工するイベントリスナーが存在しない場合の、既定のドラッグの挙動によるものです。

+ウェブページにおいては、既定のドラッグ＆ドロップの挙動が使われる場合がいくつかあります。文字列の選択範囲、画像、リンクなどのドラッグなどがこれにあたります。画像かリンクがドラッグされた時は、画像もしくはリンク先の URL がドラッグデータとして設定され、ドラッグ操作が始まります。その他の要素は、既定のドラッグ操作が行われるためには選択範囲に含まれていなければなりません。実際の様子を確認するには、ウェブページの一部を選択して、その上でマウスのボタンを押下し、そのまま選択範囲をドラッグしてください。ドラッグ中、選択範囲の内容を半透明で描画した物がマウスポインターに伴って表示されるでしょう。ただしこの挙動は、ドラッグされたデータを加工するイベントリスナーが存在しない場合の、既定のドラッグの挙動によるものです。 -

HTML では、画像、リンク、選択範囲の上での既定の動作を除くと、既定でドラッグ可能な他の要素はありません。

+HTML では、画像、リンク、選択範囲の上での既定の動作を除くと、既定でドラッグ可能な他の要素はありません。 -

上記以外の他の HTML 要素をドラッグできるようにするには、以下の 3 つのことをしなくてはなりません。

+上記以外の他の HTML 要素をドラッグできるようにするには、以下の 3 つのことをしなくてはなりません。 - +- ドラッグできるようにしたい要素の `{{htmlattrxref("draggable")}}` 属性の値を "`true`" に設定する。 +- `{{event("dragstart")}}` イベントにリスナーを設定し、そのリスナーの中でドラッグデータを設定する。 +- 上記で定義されたリスナーの中で[ドラッグデータを設定する](/ja/docs/Web/API/DataTransfer/setData)。 -

以下は、コンテンツの一部がドラッグできるようにする例です。

+以下は、コンテンツの一部がドラッグできるようにする例です。 -
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')">
-  この文字列はドラッグが<strong>できます</strong>。
-</p>
-
+```html +

+ この文字列はドラッグができます。 +

+``` -

{{htmlattrxref("draggable")}} 属性を "true" に設定すると、その要素はドラッグできるようになります。この属性が設定されていない、あるいは false に設定されている場合、その要素をドラッグする事はできず、代わりにテキストが選択されるでしょう。

+`{{htmlattrxref("draggable")}}` 属性を `"true"` に設定すると、その要素はドラッグできるようになります。この属性が設定されていない、あるいは false に設定されている場合、その要素をドラッグする事はできず、代わりにテキストが選択されるでしょう。 -

{{htmlattrxref("draggable")}} 属性は画像やリンクを含めてあらゆる要素に設定できます。ただし、画像とリンクについてだけは既定値が trueとなっていますので、実際にこれらの要素で使う場合は、要素をドラッグできないようにするために {{htmlattrxref("draggable")}} 属性に false を設定するという場合がほとんどでしょう。

+`{{htmlattrxref("draggable")}}` 属性は画像やリンクを含めてあらゆる要素に設定できます。ただし、画像とリンクについてだけは既定値が `true`となっていますので、実際にこれらの要素で使う場合は、要素をドラッグできないようにするために `{{htmlattrxref("draggable")}}` 属性に `false` を設定するという場合がほとんどでしょう。 -
-

注: 要素がドラッグ可能になった場合、文字列やその要素に含まれている他の要素が、マウスによるクリックやドラッグなどの通常の操作では選択する事ができなくなることに注意してください。ユーザーが文字列を選択するには、通常の操作の代わりに、 Alt キーを押しながらマウスで選択するか、キーボードで操作を行う必要があります。

-
+> **Note:** **注:** 要素がドラッグ可能になった場合、文字列やその要素に含まれている他の要素が、マウスによるクリックやドラッグなどの通常の操作では選択する事ができなくなることに注意してください。ユーザーが文字列を選択するには、通常の操作の代わりに、 Alt キーを押しながらマウスで選択するか、キーボードで操作を行う必要があります。 -

ドラッグ操作の開始

+## ドラッグ操作の開始 -

この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性を使って、 {{event("dragstart")}} イベントのためのリスナーが追加されています。

+この例では、 `{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}` 属性を使って、 {{event("dragstart")}} イベントのためのリスナーが追加されています。 -
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')">
-  この文字列はドラッグが<strong>できます</strong>。
-</p>
-
+```html +

+ この文字列はドラッグができます。 +

+``` -

ユーザーがドラッグを開始しようとした時、 {{event("dragstart")}} イベントが発行されます。

+ユーザーがドラッグを開始しようとした時、 {{event("dragstart")}} イベントが発行されます。 -

この例では {{event("dragstart")}} のリスナーは、ドラッグされる要素自身に追加されていますが、他の多くのイベントがそうであるようにドラッグイベントもバブリングしますので、より上位の祖先要素でイベントを監視することもできます。

+この例では {{event("dragstart")}} のリスナーは、ドラッグされる要素自身に追加されていますが、他の多くのイベントがそうであるようにドラッグイベントもバブリングしますので、より上位の祖先要素でイベントを監視することもできます。 -

{{event("dragstart")}} イベントでは、以下で解説しているドラッグデータ、フィードバック画像、ドラッグの効果を設定することができます。ドラッグデータの指定は必須ですが、多くの状況では、フィードバック画像とドラッグの種類は既定のもので問題ありません。

+{{event("dragstart")}} イベントでは、以下で解説している**ドラッグデータ**、**フィードバック画像**、**ドラッグの効果**を設定することができます。ドラッグデータの指定は必須ですが、多くの状況では、フィードバック画像とドラッグの種類は既定のもので問題ありません。 -

ドラッグデータ

+## ドラッグデータ -

すべての{{domxref("DragEvent","ドラッグイベント")}}は、ドラッグデータを保持するための {{domxref("DragEvent.dataTransfer","dataTransfer")}} と呼ばれるプロパティを持っています (dataTransfer は {{domxref("DataTransfer")}} オブジェクトの一つです)。

+すべての{{domxref("DragEvent","ドラッグイベント")}}は、ドラッグデータを保持するための {{domxref("DragEvent.dataTransfer","dataTransfer")}} と呼ばれるプロパティを持っています (`dataTransfer` は {{domxref("DataTransfer")}} オブジェクトの一つです)。 -

ドラッグが行われた際には、何をドラッグするのかを識別するためのデータをドラッグに関連付ける必要があります。例えば、テキストボックス内で選択されたテキストがドラッグされた場合、ドラッグデータアイテムに関連付けられたデータはテキストそのものです。同様に、ウェブページ上のリンクがドラッグされた場合、ドラッグデータにはリンクの URL が含まれます。

+ドラッグが行われた際には、何をドラッグするのかを識別するためのデータをドラッグに関連付ける必要があります。例えば、テキストボックス内で選択されたテキストがドラッグされた場合、ドラッグデータアイテムに関連付けられたデータはテキストそのものです。同様に、ウェブページ上のリンクがドラッグされた場合、ドラッグデータにはリンクの URL が含まれます。 -

{{domxref("DataTransfer","ドラッグデータ")}}には、データの型 (または形式) とデータの値の 2 つの情報が含まれています。形式は型の文字列 (テキストデータの場合は text/plain など) で、値はテキストの文字列です。ドラッグの開始時に、型とデータを指定してデータを追加します。ドラッグ中、 {{event("dragenter")}} および {{event("dragover")}} イベントのイベントリスナーでは、ドラッグされるデータのデータ型を使って、ドロップが許可されているかどうかをチェックします。たとえば、リンクを受け付けるドロップターゲットでは、 text/uri-list というデータ型がチェックされます。ドロップイベントが発生すると、リスナーはドラッグされたデータを取得し、ドロップ位置に挿入します。

+{{domxref("DataTransfer","ドラッグデータ")}}には、データの型 (または形式) とデータの値の 2 つの情報が含まれています。形式は型の文字列 (テキストデータの場合は [`text/plain`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#text) など) で、値はテキストの文字列です。ドラッグの開始時に、型とデータを指定してデータを追加します。ドラッグ中、 `{{event("dragenter")}}` および `{{event("dragover")}}` イベントのイベントリスナーでは、ドラッグされるデータのデータ型を使って、ドロップが許可されているかどうかをチェックします。たとえば、リンクを受け付けるドロップターゲットでは、 [text/uri-list](/ja_docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#link) というデータ型がチェックされます。ドロップイベントが発生すると、リスナーはドラッグされたデータを取得し、ドロップ位置に挿入します。 -

{{domxref("DataTransfer","ドラッグデータ")}}の {{domxref("DataTransfer.types","types")}} プロパティは、 text/plain や image/jpeg のような MIME タイプの {{domxref("DOMString")}} のリストを返します。独自の型を作成することもできます。よく使用される型は、推奨されるドラッグ型の記事に記載されています。

+{{domxref("DataTransfer","ドラッグデータ")}}の {{domxref("DataTransfer.types","types")}} プロパティは、 [`text/plain`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#text) や [`image/jpeg`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#image) のような MIME タイプの {{domxref("DOMString")}} のリストを返します。独自の型を作成することもできます。よく使用される型は、[推奨されるドラッグ型](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types)の記事に記載されています。 -

一つのドラッグ操作で、複数の異なる形式のデータを提供できます。この仕組みにより、独自の形式や、その形式のデータを受け取れない要素向けのフォールバック用の形式など、データをより適切な形式で引き渡すことができます。通常、最後のフォールバック先として使われる形式は、 text/plain 型として表される普通のテキストデータです。このデータは元のテキストの単純な文字列となるでしょう。

+一つのドラッグ操作で、複数の異なる形式のデータを提供できます。この仕組みにより、独自の形式や、その形式のデータを受け取れない要素向けのフォールバック用の形式など、データをより適切な形式で引き渡すことができます。通常、最後のフォールバック先として使われる形式は、 [`text/plain`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#text) 型として表される普通のテキストデータです。このデータは元のテキストの単純な文字列となるでしょう。 -

データを {{domxref("DragEvent.dataTransfer","dataTransfer")}} に設定するには、 {{domxref("DataTransfer.setData","setData()")}} メソッドを使います。このメソッドは、次の例のようにデータの型とデータの値の 2 つの引数を取ります。

+データを {{domxref("DragEvent.dataTransfer","dataTransfer")}} に設定するには、 {{domxref("DataTransfer.setData","setData()")}} メソッドを使います。このメソッドは、次の例のようにデータの型とデータの値の 2 つの引数を取ります。 -
event.dataTransfer.setData("text/plain", "ドラッグされたテキスト");
-
+```js +event.dataTransfer.setData("text/plain", "ドラッグされたテキスト"); +``` -

この例では、データの値は「ドラッグされたテキスト」で、形式は text/plain です。

+この例では、データの値は「ドラッグされたテキスト」で、形式は [`text/plain`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#text) です。 -

データは複数の形式で提供できます。これを実現するには、異なる形式を指定して {{domxref("DataTransfer.setData","setData()")}} メソッドを複数回呼び出します。最も具体的な形式から、具体的でない形式に向けて呼び出します。

+データは複数の形式で提供できます。これを実現するには、異なる形式を指定して {{domxref("DataTransfer.setData","setData()")}} メソッドを複数回呼び出します。最も具体的な形式から、具体的でない形式に向けて呼び出します。 -
const dt = event.dataTransfer;
+```js
+const dt = event.dataTransfer;
 dt.setData("application/x.bookmark", bookmarkString);
 dt.setData("text/uri-list", "https://www.mozilla.org");
 dt.setData("text/plain", "https://www.mozilla.org");
-
+``` -

これは、 3 つの異なる型のデータを追加する例です。最初の型の application/x.bookmark は独自の型です。他のアプリケーションはこの型に対応していないでしょうが、同じウェブサイトやアプリケーションの中の領域同士でのドラッグでは、このような独自の形式を利用できます。

+これは、 3 つの異なる型のデータを追加する例です。最初の型の `application/x.bookmark` は独自の型です。他のアプリケーションはこの型に対応していないでしょうが、同じウェブサイトやアプリケーションの中の領域同士でのドラッグでは、このような独自の形式を利用できます。 -

また、他の型でもデータを提供することで、このような独自形式に対応していない他のアプリケーション向けにも、代替の形式でドラッグできるようになります。 application/x.bookmark 型はそのアプリケーションの中ではより使いやすく詳細な情報を提供できますが、他の型で渡されるデータは、単純な1つの URL もしくは文字列となります。

+また、他の型でもデータを提供することで、このような独自形式に対応していない他のアプリケーション向けにも、代替の形式でドラッグできるようになります。 `application/x.bookmark` 型はそのアプリケーションの中ではより使いやすく詳細な情報を提供できますが、他の型で渡されるデータは、単純な 1 つの URL もしくは文字列となります。 -

なお、この例では text/uri-list と text/plain も同じデータを含んでいます。このようにすることが多いのですが、こうしなければならない訳ではありません。

+なお、この例では [`text/uri-list`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#link) と [`text/plain`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#text) も同じデータを含んでいます。このようにすることが多いのですが、こうしなければならない訳ではありません。 -

同じ形式で 2 回データを登録すると、古いデータは新しいデータによって置き換えられますが、データの形式の登録の順番自体は古いデータを登録した時のままになります。

+同じ形式で 2 回データを登録すると、古いデータは新しいデータによって置き換えられますが、データの形式の登録の順番自体は古いデータを登録した時のままになります。 -

登録したデータは {{domxref("DataTransfer.clearData","clearData()")}} メソッドによって削除できます。このメソッドは、削除するデータの形式を引数として求めます。

+登録したデータは {{domxref("DataTransfer.clearData","clearData()")}} メソッドによって削除できます。このメソッドは、削除するデータの形式を引数として求めます。 -
event.dataTransfer.clearData("text/uri-list");
-
+```js +event.dataTransfer.clearData("text/uri-list"); +``` -

{{domxref("DataTransfer.clearData","clearData()")}} メソッドの引数によるデータ形式の指定は省略可能です。データの形式が指定されなかった時は、すべての型のデータが削除されます。ドラッグ開始時にデータが 1 つも登録されなかった場合、もしくは後の処理で全てのデータが削除された場合、ドラッグ操作は発生しません。

+{{domxref("DataTransfer.clearData","clearData()")}} メソッドの引数によるデータ形式の指定は省略可能です。データの形式が指定されなかった時は、すべての型のデータが削除されます。ドラッグ開始時にデータが 1 つも登録されなかった場合、もしくは後の処理で全てのデータが削除された場合、ドラッグ操作は発生しません。 -

ドラッグのフィードバック画像の設定

+## ドラッグのフィードバック画像の設定 -

ドラッグが行われた時、ドラッグ元 ({{event("dragstart")}} イベントが発行された要素) を元にして OS によって画像が生成され (例えば Windows では半透明の画像になります)、ドラッグしている間マウスポインターと一緒に表示されます。この画像は自動的に生成されるため、あなたが用意する必要はありません。しかし、 {{domxref("DataTransfer.setDragImage","setDragImage()")}} によって、独自のドラッグ中のフィードバック画像を指定することができます。

+ドラッグが行われた時、ドラッグ元 ({{event("dragstart")}} イベントが発行された要素) を元にして OS によって画像が生成され (例えば Windows では半透明の画像になります)、ドラッグしている間マウスポインターと一緒に表示されます。この画像は自動的に生成されるため、あなたが用意する必要はありません。しかし、 {{domxref("DataTransfer.setDragImage","setDragImage()")}} によって、独自のドラッグ中のフィードバック画像を指定することができます。 -
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
+```js +event.dataTransfer.setDragImage(image, xOffset, yOffset); +``` -

3 つの引数が必要です。一つ目は、画像への参照です。この参照は、通常は <img> 要素ですが、 <canvas> やその他の要素でもよいでしょう。フィードバック画像は、画像が画面上でどのように見えるかを考慮して生成されますが、画像の場合は、元のサイズで描画されます。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} メソッドの第 2、第 3 引数には、マウスポインターに対する相対的な画像の表示位置を指定します。

+3 つの引数が必要です。一つ目は、画像への参照です。この参照は、通常は `` 要素ですが、 `` やその他の要素でもよいでしょう。フィードバック画像は、画像が画面上でどのように見えるかを考慮して生成されますが、画像の場合は、元のサイズで描画されます。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} メソッドの第 2、第 3 引数には、マウスポインターに対する相対的な画像の表示位置を指定します。 -

文書中に存在しないものをフィードバック画像として使うために、以下の例のようにして、画像や canvas を利用することもできます。

+文書中に存在しないものをフィードバック画像として使うために、以下の例のようにして、画像や canvas を利用することもできます。 -
function dragWithCustomImage(event) {
+```js
+function dragWithCustomImage(event) {
   const canvas = document.createElement("canvas");
   canvas.width = canvas.height = 50;
 
@@ -130,142 +133,146 @@ dt.setData("text/plain", "https://www.mozilla.org");
   dt.setData('text/plain', 'ドラッグされるデータ');
   dt.setDragImage(canvas, 25, 25);
 }
-
+``` -

この例では、 canvas の大きさは 50×50 ピクセルで、オフセット値はそれぞれの半分の値 (25) となっており、画像はマウスポインターの中央に表示されます (マウスポインターが画像の中央に表示されます)。

+この例では、 canvas の大きさは `50`×`50` ピクセルで、オフセット値はそれぞれの半分の値 (`25`) となっており、画像はマウスポインターの中央に表示されます (マウスポインターが画像の中央に表示されます)。 -

ドラッグの効果

+## ドラッグの効果 -

ドラッグを行う時の操作には、いくつかの種類があります。 copy (コピー) はドラッグされているデータが現在の場所からドロップ先の場所にコピーされることを示します。 move (移動) はドラッグされているデータがドロップ先に移動されることを示し、 link (リンク) はドラッグ元とドロップ先の場所との間に何らかの形での関連付けや繋がりが作られることを示します。

+ドラッグを行う時の操作には、いくつかの種類があります。 `copy` (コピー) はドラッグされているデータが現在の場所からドロップ先の場所にコピーされることを示します。 `move` (移動) はドラッグされているデータがドロップ先に移動されることを示し、 `link` (リンク) はドラッグ元とドロップ先の場所との間に何らかの形での関連付けや繋がりが作られることを示します。 -

{{event("dragstart")}} イベントのリスナーにおいて、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティに値を設定することで、 ドラッグ元について上記の 3 つの操作のうちどれが許可されているのかを示すことができます。

+`{{event("dragstart")}}` イベントのリスナーにおいて、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティに値を設定することで、 ドラッグ元について上記の 3 つの操作のうちどれが許可されているのかを示すことができます。 -
event.dataTransfer.effectAllowed = "copy";
-
+```js +event.dataTransfer.effectAllowed = "copy"; +``` -

この例では、コピー (copy) のみが許可されています。

+この例では、コピー (**copy**) のみが許可されています。 -

複数の種類の操作を組み合わせることもできます。

+複数の種類の操作を組み合わせることもできます。 -
-
none
-
どの操作も許可されていない（ドロップを禁止）。
-
copy
-
コピーのみが許可されている。
-
move
-
移動のみが許可されている。
-
link
-
リンクのみが許可されている。
-
copyMove
-
コピーまたは移動のみが許可されている。
-
copyLink
-
コピーまたはリンクのみが許可されている。
-
linkMove
-
リンクまたは移動のみが許可されている。
-
all
-
コピー、移行、リンクの全ての操作が許可されている。
-
初期化されていない場合
-
既定値は all です。
-
+- `none` + - : どの操作も許可されていない（ドロップを禁止）。 +- `copy` + - : コピーのみが許可されている。 +- `move` + - : 移動のみが許可されている。 +- `link` + - : リンクのみが許可されている。 +- `copyMove` + - : コピーまたは移動のみが許可されている。 +- `copyLink` + - : コピーまたはリンクのみが許可されている。 +- `linkMove` + - : リンクまたは移動のみが許可されている。 +- `all` + - : コピー、移行、リンクの全ての操作が許可されている。 +- 初期化されていない場合 + - : 既定値は `all` です。 -

上に列挙されている値のいずれかと全く等しい値だけが利用可能であることに注意してください。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを copyMove に設定すると、コピーや移動の操作を許可しますが、ユーザーがリンク操作を行うことを防ぐことができます。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを変更しない場合、「all」が指定された時と同様に、すべての操作が許可されます。ですので、特定の種類の操作を除外したい場合を除いて、プロパティの値を手動で設定する必要はありません。

+上に列挙されている値のいずれかと全く等しい値だけが利用可能であることに注意してください。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを `copyMove` に設定すると、コピーや移動の操作を許可しますが、ユーザーがリンク操作を行うことを防ぐことができます。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを変更しない場合、「all」が指定された時と同様に、すべての操作が許可されます。ですので、特定の種類の操作を除外したい場合を除いて、プロパティの値を手動で設定する必要はありません。 -

ドラッグ操作の間、 {{event("dragenter")}} または {{event("dragover")}} イベントのリスナーは、操作が許可されているかどうかを確かめるために {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを参照できます。これらのイベントにおいて、関連するプロパティである {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティへ、実際に行われる操作の種類 1 つだけが指定されるべきです。 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値として妥当なものは、none、copy、move、または link のみです。このプロパティへは、複数の操作を組み合わせた値は指定できません。

+ドラッグ操作の間、 `{{event("dragenter")}}` または `{{event("dragover")}}` イベントのリスナーは、操作が許可されているかどうかを確かめるために {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを参照できます。これらのイベントにおいて、関連するプロパティである {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティへ、実際に行われる操作の種類 1 つだけが指定されるべきです。 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値として妥当なものは、`none`、`copy`、`move`、または `link` のみです。このプロパティへは、複数の操作を組み合わせた値は指定できません。 -

{{event("dragenter")}} および {{event("dragover")}} イベントにおいて、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはユーザーが要求している操作に初期化されます。ユーザーは操作の種類を修飾キーを押すことにより変更することができます。実際に使用されるキーはプラットフォームごとに異なりますが、大抵の場合は Shift キーと Control キーが、コピー・移動・リンクの各操作の切り替えに使われるでしょう。マウスポインターはどの操作が望まれているのかを示すために、例えば copy ならカーソルの横に「＋」記号が表示される、といった風に変化するでしょう。

+{{event("dragenter")}} および {{event("dragover")}} イベントにおいて、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはユーザーが要求している操作に初期化されます。ユーザーは操作の種類を修飾キーを押すことにより変更することができます。実際に使用されるキーはプラットフォームごとに異なりますが、大抵の場合は Shift キーと Control キーが、コピー・移動・リンクの各操作の切り替えに使われるでしょう。マウスポインターはどの操作が望まれているのかを示すために、例えば `copy` ならカーソルの横に「＋」記号が表示される、といった風に変化するでしょう。 -

{{event("dragenter")}} または {{event("dragover")}} イベントの間に {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値を変更すると、ユーザーが選択した操作の種類を上書きし、特定のドロップ操作を強制することができます。この時に指定できる操作の種類は、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティの値として列挙されている操作に含まれていなくてはならないことに注意してください。それ以外の値を設定した場合は、許可されている操作の中から代わりの値が設定されます。

+{{event("dragenter")}} または {{event("dragover")}} イベントの間に {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値を変更すると、ユーザーが選択した操作の種類を上書きし、特定のドロップ操作を強制することができます。この時に指定できる操作の種類は、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティの値として列挙されている操作に含まれていなくてはならないことに注意してください。それ以外の値を設定した場合は、許可されている操作の中から代わりの値が設定されます。 -
event.dataTransfer.dropEffect = "copy";
-
+```js +event.dataTransfer.dropEffect = "copy"; +``` -

この例では、「コピー」が行なわれる効果です。

+この例では、「コピー」が行なわれる効果です。 -

その場所へのドロップが禁止されていることを示すために、値として none を設定することもできます。

+その場所へのドロップが禁止されていることを示すために、値として `none` を設定することもできます。 -

{{event("drop")}} および {{event("dragend")}} イベントの中では、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティをチェックすることで最終的に選択されている効果を特定できます。選択された効果が "move" であれば、 {{event("dragend")}} イベントの中でドラッグ元から元のデータを削除するべきです。

+{{event("drop")}} および {{event("dragend")}} イベントの中では、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティをチェックすることで最終的に選択されている効果を特定できます。選択された効果が "`move`" であれば、 {{event("dragend")}} イベントの中でドラッグ元から元のデータを削除するべきです。 -

ドロップ先の指定

+## ドロップ先の指定 -

{{event("dragenter")}} および {{event("dragover")}} イベントのリスナーは、ドラッグされている項目がどの場所にドロップされようとしているのかを正確に示す働きをすることが多いです。ウェブページやアプリケーションのほとんどの領域は、ドロップデータを受け取る場所としては不適切です。従って、これらのイベントに対する既定の動作はドロップを禁止する働きをします。

+{{event("dragenter")}} および {{event("dragover")}} イベントのリスナーは、ドラッグされている項目がどの場所にドロップされようとしているのかを正確に示す働きをすることが多いです。ウェブページやアプリケーションのほとんどの領域は、ドロップデータを受け取る場所としては不適切です。従って、これらのイベントに対する既定の動作はドロップを禁止する働きをします。 -

ドロップを許可したい場合は、 dragenter および dragover イベントの両方をキャンセルして、既定の処理を防ぐ必要があります。これを行うには、属性に定義されたイベントリスナーから false を返すか、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出す必要があります。独立したスクリプトで定義した関数では、後者の方が実現性が高いかもしれません。

+ドロップを許可したい場合は、 `dragenter` および `dragover` イベントの両方をキャンセルして、既定の処理を防ぐ必要があります。これを行うには、属性に定義されたイベントリスナーから `false` を返すか、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出す必要があります。独立したスクリプトで定義した関数では、後者の方が実現性が高いかもしれません。 -
<div ondragover="return false">
-<div ondragover="event.preventDefault()">
-
+```html +
+
+``` -

{{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すと、 {{event("dragenter")}} および {{event("dragover")}} イベントのどちらにおいても、 その場所がドロップ可能な場所であるということを示します。多くの場合は、例えばリンクがドラッグされている時だけなど、特定の状況でのみ {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出したいと思うでしょう。

+{{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すと、 {{event("dragenter")}} および {{event("dragover")}} イベントのどちらにおいても、 その場所がドロップ可能な場所であるということを示します。多くの場合は、例えばリンクがドラッグされている時だけなど、特定の状況でのみ {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出したいと思うでしょう。 -

これを実現するには、条件を確かめて、条件が満たされている時だけイベントをキャンセルするような関数を使って下さい。条件が満たされていない時はイベントをキャンセルしないでおけば、ユーザーがマウスのボタンを放してもその場所へのドロップは行われません。

+これを実現するには、条件を確かめて、条件が満たされている時だけイベントをキャンセルするような関数を使って下さい。条件が満たされていない時はイベントをキャンセルしないでおけば、ユーザーがマウスのボタンを放してもその場所へのドロップは行われません。 -

ドロップを受け付けるか拒絶するかを決める最も一般的な方法は、データ転送の仕組みに含まれているドラッグデータの型を判別するものです。例えば、画像やリンク、もしくはその両方のみを受け付けるといった事ができます。これを実現するには、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} (プロパティ) の {{domxref("DataTransfer.types","types")}} プロパティを確認します。 types プロパティはドラッグが開始された時に登録されたタイプ文字列のリストで、最も適切なものから最も適切でないものの順で並んでいます。

+ドロップを受け付けるか拒絶するかを決める最も一般的な方法は、データ転送の仕組みに含まれているドラッグデータの型を判別するものです。例えば、画像やリンク、もしくはその両方のみを受け付けるといった事ができます。これを実現するには、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} (プロパティ) の {{domxref("DataTransfer.types","types")}} プロパティを確認します。 types プロパティはドラッグが開始された時に登録されたタイプ文字列のリストで、最も適切なものから最も適切でないものの順で並んでいます。 -
function doDragOver(event) {
+```js
+function doDragOver(event) {
   const isLink = event.dataTransfer.types.includes("text/uri-list");
   if (isLink) {
     event.preventDefault();
   }
-}
+} +``` -

この例では、型のリストの中に text/uri-list 型があるかどうかを確認するために contains メソッドを使用しています。もし条件が真であれば、イベントはキャンセルされて、ドロップが許可されるでしょう。もしドラッグデータがリンクを含んでいなければ、イベントはキャンセルされず、その場所でのドロップも行われません。

+この例では、型のリストの中に [text/uri-list](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#link "text/uri-list") 型があるかどうかを確認するために `contains` メソッドを使用しています。もし条件が真であれば、イベントはキャンセルされて、ドロップが許可されるでしょう。もしドラッグデータがリンクを含んでいなければ、イベントはキャンセルされず、その場所でのドロップも行われません。 -

実際に行われる処理の種類をより適切に示すために、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} や {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティのいずれか、あるいはその両方に値を指定したいと思う事もあるでしょう。当然ですが、イベントをキャンセルするのを忘れると、これらのプロパティの値を変えても何も起こりません。

+実際に行われる処理の種類をより適切に示すために、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} や {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティのいずれか、あるいはその両方に値を指定したいと思う事もあるでしょう。当然ですが、イベントをキャンセルするのを忘れると、これらのプロパティの値を変えても何も起こりません。 -

ドロップのフィードバック

+## ドロップのフィードバック -

その場所へのドロップが許可されていることをユーザーに示す方法はいくつかあります。マウスポインターは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値に応じて適切なものに変化します。

+その場所へのドロップが許可されていることをユーザーに示す方法はいくつかあります。マウスポインターは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値に応じて適切なものに変化します。 -

実際の正確な表示のされ方はユーザーのプラットフォームに依存しますが、通常は例えば「コピー」に対しては「＋」記号が表示され、また、ドロップが許可されていない時は「ここにはドロップできません」という意味のアイコンが表示されるでしょう。多くの場合において、このポインターによるフィードバックは十分に役立ちます。

+実際の正確な表示のされ方はユーザーのプラットフォームに依存しますが、通常は例えば「コピー」に対しては「＋」記号が表示され、また、ドロップが許可されていない時は「ここにはドロップできません」という意味のアイコンが表示されるでしょう。多くの場合において、このポインターによるフィードバックは十分に役立ちます。 -

それ以外にも必要に応じて、ユーザーインターフェースを更新して挿入箇所を示したりハイライト表示したりすることもできます。単にハイライト表示するだけであれば、ドロップ対象において CSS の -moz-drag-over 擬似クラスが利用できます。

+それ以外にも必要に応じて、ユーザーインターフェースを更新して挿入箇所を示したりハイライト表示したりすることもできます。単にハイライト表示するだけであれば、ドロップ対象において CSS の `-moz-drag-over` 擬似クラスが利用できます。 -
.droparea:-moz-drag-over {
+```css
+.droparea:-moz-drag-over {
   outline: 1px solid black;
 }
-
+``` -

この例においてdropareaクラスの要素は、 {{event("dragenter")}} イベントの中で {{domxref("Event.preventDefault","preventDefault()")}} メソッドが呼ばれて有効なドロップ対象となっている間、 1 ピクセルの黒い枠が表示されます。

+この例において`droparea`クラスの要素は、 {{event("dragenter")}} イベントの中で {{domxref("Event.preventDefault","preventDefault()")}} メソッドが呼ばれて有効なドロップ対象となっている間、 1 ピクセルの黒い枠が表示されます。 -
-

注: この擬似クラスは {{event("dragover")}} イベントでの状態の変化には反応しませんので、この擬似クラスでの指定を適用させるには {{event("dragenter")}} イベントをキャンセルしなくてはならない事に注意してください。

-
+> **Note:** **注:** この擬似クラスは {{event("dragover")}} イベントでの状態の変化には反応しませんので、この擬似クラスでの指定を適用させるには {{event("dragenter")}} イベントをキャンセルしなくてはならない事に注意してください。 -

より凝った視覚効果のために、例えばドロップが行われる位置に要素を挿入するなど、 {{event("dragenter")}} イベントの間に他の操作をすることもできます。この例なら、挿入される要素は、挿入箇所を示すマーカーあるいはドラッグされている要素が新しい位置に挿入された時の状態のプレビューなどとして利用できるでしょう。このような効果は、例えば image または separator 要素を生成して、 {{event("dragenter")}} イベントの処理中にドキュメント中に単に挿入するだけで実現できます。

+より凝った視覚効果のために、例えばドロップが行われる位置に要素を挿入するなど、 {{event("dragenter")}} イベントの間に他の操作をすることもできます。この例なら、挿入される要素は、挿入箇所を示すマーカーあるいはドラッグされている要素が新しい位置に挿入された時の状態のプレビューなどとして利用できるでしょう。このような効果は、例えば [image](/ja/XUL/image) または [separator](/ja/XUL/separator) 要素を生成して、 {{event("dragenter")}} イベントの処理中にドキュメント中に単に挿入するだけで実現できます。 -

{{event("dragover")}} イベントは、マウスポインターが現在指している要素において発行されます。挿入点のマーカーを {{event("dragover")}} イベントの発行に応じて移動させたいと思うのは自然な欲求でしょう。そのような場合には、他のマウスイベントでマウスポインターの位置を取得するために使われるのと同じ要領で、イベントの {{domxref("MouseEvent.clientX","clientX")}} と {{domxref("MouseEvent.clientY","clientY")}} プロパティを利用できます。

+{{event("dragover")}} イベントは、マウスポインターが現在指している要素において発行されます。挿入点のマーカーを {{event("dragover")}} イベントの発行に応じて移動させたいと思うのは自然な欲求でしょう。そのような場合には、他のマウスイベントでマウスポインターの位置を取得するために使われるのと同じ要領で、イベントの {{domxref("MouseEvent.clientX","clientX")}} と {{domxref("MouseEvent.clientY","clientY")}} プロパティを利用できます。 -

最後に、ドラッグ中にマウスポインターが要素の上を離れる時、 {{event("dragleave")}} イベントが発行されます。これは挿入点のマーカーやハイライト表示を消すのにちょうどいいタイミングです。このイベントをキャンセルする必要はありません。 -moz-drag-over 擬似クラスを使って指定されたハイライト表示やその他の視覚効果は、すべて自動的に消去されます。 {{event("dragleave")}} イベントは、ドラッグがキャンセルされた時でも常に発行されますので、このイベントによって、挿入点の消去などを確実に行うことができます。

+最後に、ドラッグ中にマウスポインターが要素の上を離れる時、 {{event("dragleave")}} イベントが発行されます。これは挿入点のマーカーやハイライト表示を消すのにちょうどいいタイミングです。このイベントをキャンセルする必要はありません。 `-moz-drag-over` 擬似クラスを使って指定されたハイライト表示やその他の視覚効果は、すべて自動的に消去されます。 {{event("dragleave")}} イベントは、ドラッグがキャンセルされた時でも常に発行されますので、このイベントによって、挿入点の消去などを確実に行うことができます。 -

ドロップの実行

+## ドロップの実行 -

ユーザーがマウスのボタンを離した時、ドラッグ＆ドロップの操作は終了します。

+ユーザーがマウスのボタンを離した時、ドラッグ＆ドロップの操作は終了します。 -

有効なドロップ対象となっている要素の上でマウスのボタンが離された場合、最後の {{event("dragenter")}} と {{event("dragover")}} イベントはキャンセルされて、ドロップが成功し、 {{event("drop")}} イベントがそのドロップ対象において発行されます。それ以外の場所でボタンが放された場合は、ドラッグ操作はキャンセルされ、 {{event("drop")}} イベントは発行されません。

+有効なドロップ対象となっている要素の上でマウスのボタンが離された場合、最後の {{event("dragenter")}} と {{event("dragover")}} イベントはキャンセルされて、ドロップが成功し、 {{event("drop")}} イベントがそのドロップ対象において発行されます。それ以外の場所でボタンが放された場合は、ドラッグ操作はキャンセルされ、 {{event("drop")}} イベントは発行されません。 -

{{event("drop")}} イベントの間、あなたはドロップされたデータをイベントから取得して、ドロップ位置に挿入することになります。どのドラッグ＆ドロップ操作が望まれていたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティで判別することができます。

+{{event("drop")}} イベントの間、あなたはドロップされたデータをイベントから取得して、ドロップ位置に挿入することになります。どのドラッグ＆ドロップ操作が望まれていたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティで判別することができます。 -

すべてのドラッグ＆ドロップ関連のイベントにおいて、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティはドラッグされた対象に関するデータを保持しています。データの取得には {{domxref("DataTransfer.getData","getData()")}} メソッドを利用することになるでしょう。

+すべてのドラッグ＆ドロップ関連のイベントにおいて、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティはドラッグされた対象に関するデータを保持しています。データの取得には {{domxref("DataTransfer.getData","getData()")}} メソッドを利用することになるでしょう。 -
function onDrop(event) {
+```js
+function onDrop(event) {
   const data = event.dataTransfer.getData("text/plain");
   event.target.textContent = data;
   event.preventDefault();
 }
-
+``` -

{{domxref("DataTransfer.getData","getData()")}} メソッドは、取得したいデータの型を引数として取ります。実行すると、ドラッグ操作の開始時に {{domxref("DataTransfer.setData","setData()")}} メソッドによって登録された値が文字列として返されます。その型に対するデータが存在しない場合は、空文字が返されます。当然ながら、直前の {{event("dragover")}} イベントでの処理においてチェックした時と同様に、あなたはデータの正しい形式が利用可能かどうかを知りたいと思うでしょう。

+{{domxref("DataTransfer.getData","getData()")}} メソッドは、取得したいデータの型を引数として取ります。実行すると、ドラッグ操作の開始時に {{domxref("DataTransfer.setData","setData()")}} メソッドによって登録された値が文字列として返されます。その型に対するデータが存在しない場合は、空文字が返されます。当然ながら、直前の {{event("dragover")}} イベントでの処理においてチェックした時と同様に、あなたはデータの正しい形式が利用可能かどうかを知りたいと思うでしょう。 -

上記の例では、まずデータを取得し、ドロップ対象の内容テキストとしてそれを挿入しています。これは p 要素や div 要素がドロップ対象の領域として使われる事を想定しており、ドラッグされたテキストをドロップ位置に挿入するという効果をもたらします。

+上記の例では、まずデータを取得し、ドロップ対象の内容テキストとしてそれを挿入しています。これは `p` 要素や `div` 要素がドロップ対象の領域として使われる事を想定しており、ドラッグされたテキストをドロップ位置に挿入するという効果をもたらします。 -

ウェブページにおいては、ドロップを受け付けた場合、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すべきです。これによって、ブラウザ内でのドロップ時の既定の挙動がキャンセルされます。例えば、リンクがウェブページにドロップされた場合、 Firefox はそのリンク先を読み込もうとします。イベントをキャンセルすることで、この動作は抑止されます。

+ウェブページにおいては、ドロップを受け付けた場合、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すべきです。これによって、ブラウザ内でのドロップ時の既定の挙動がキャンセルされます。例えば、リンクがウェブページにドロップされた場合、 Firefox はそのリンク先を読み込もうとします。イベントをキャンセルすることで、この動作は抑止されます。 -

他の形式でデータを取得することもできます。データがリンクであった場合、そのデータは text/uri-list 型でも提供されているでしょう。その場合、リンクを内容に挿入することができます。

+他の形式でデータを取得することもできます。データがリンクであった場合、そのデータは [`text/uri-list`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#link) 型でも提供されているでしょう。その場合、リンクを内容に挿入することができます。 -
function doDrop(event) {
+```js
+function doDrop(event) {
   const lines = event.dataTransfer.getData("text/uri-list").split("\n");
-  lines.filter(line => !line.startsWith("#"))
-    .forEach(line => {
+  lines.filter(line => !line.startsWith("#"))
+    .forEach(line => {
       const link = document.createElement("a");
       link.href = line;
       link.textContent = line;
@@ -273,48 +280,48 @@ dt.setData("text/plain", "https://www.mozilla.org");
     })
   event.preventDefault();
 }
-
+``` -

この例は、ドラッグされたデータからリンクを挿入します。名前から想像できる通り、 text/uri-list 型は実際に複数のURLの改行区切りのリストを含んでいる場合があります。このコードでは、 split を使って文字列を行ごとに分割し、各行に繰り返し処理を行って、それぞれをリンクとして文書中に挿入しています。ナンバー記号 (#) で始まるものはコメントとして除外していることに注意してください。

+この例は、ドラッグされたデータからリンクを挿入します。名前から想像できる通り、 [`text/uri-list`](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#link) 型は実際に複数の URL の改行区切りのリストを含んでいる場合があります。このコードでは、 [`split`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) を使って文字列を行ごとに分割し、各行に繰り返し処理を行って、それぞれをリンクとして文書中に挿入しています。ナンバー記号 (`#`) で始まるものはコメントとして除外していることに注意してください。 -

単純な使い方として、リストの中の最初の有効な URL を取得するために、特別な型 URL も利用できます。

+単純な使い方として、リストの中の最初の有効な URL を取得するために、特別な型 `URL` も利用できます。 -
const link = event.dataTransfer.getData("URL");
-
+```js +const link = event.dataTransfer.getData("URL"); +``` -

これによって、コメントの除外などの処理は一切不要になります。しかし、これはリストの中の最初の URL だけしか取得できないという制限があります。

+これによって、コメントの除外などの処理は一切不要になります。しかし、これはリストの中の最初の URL だけしか取得できないという制限があります。 -

URL 型は特別な省略表記用の型で、 {{domxref("DataTransfer.types","types")}} プロパティで取得できる型のリストには列挙されません。

+`URL` 型は特別な省略表記用の型で、 {{domxref("DataTransfer.types","types")}} プロパティで取得できる型のリストには列挙されません。 -

時には、複数の形式をサポートして、そのうち最も適切な形式で提供されたデータを取得したいと思う事もあるでしょう。以下の例では、3つの形式がドロップ対象によってサポートされています。

+時には、複数の形式をサポートして、そのうち最も適切な形式で提供されたデータを取得したいと思う事もあるでしょう。以下の例では、3 つの形式がドロップ対象によってサポートされています。 -

以下の例は、提供されたデータの中で最も適切なデータを返す例です。

+以下の例は、提供されたデータの中で最も適切なデータを返す例です。 -
function doDrop(event) {
+```js
+function doDrop(event) {
   const supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  const types = event.dataTransfer.types.filter(type => supportedTypes.includes(type));
+  const types = event.dataTransfer.types.filter(type => supportedTypes.includes(type));
   if (types.length) {
     const data = event.dataTransfer.getData(types[0]);
   }
   event.preventDefault();
 }
-
+``` -

ドラッグの終了

+## ドラッグの終了 -

ドラッグ操作が終了すると、 {{event("dragend")}} イベントがドラッグ元 ( {{event("dragstart")}} イベントが発行されるのと同じ要素) において発行されます。このイベントは、ドラッグ操作が成功したかキャンセルされたかに関わらず発行されます。どの操作が行われたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティを参照して知ることができます。

+ドラッグ操作が終了すると、 {{event("dragend")}} イベントがドラッグ元 (` {{event("dragstart")}}` イベントが発行されるのと同じ要素) において発行されます。このイベントは、ドラッグ操作が成功したかキャンセルされたかに関わらず発行されます。どの操作が行われたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティを参照して知ることができます。 -

{{event("dragend")}} イベントにおいて {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値がnoneである場合、ドラッグ操作がキャンセルされたことを意味します。それ以外の場合は、プロパティの値は実際に行われた操作の種類を示します。ドラッグ元はこの情報に基づいて、ドラッグされた項目を「移動」の操作の後に元の場所から削除することができます。 {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} プロパティの値は、ユーザーが（Escapeキーを押すなどして）ドラッグ操作をキャンセルした場合は true となり、不正なドロップ先だった場合などの他の理由でドラッグ操作がキャンセルされた場合や、ドロップに成功した場合はfalseとなります。

+{{event("dragend")}} イベントにおいて {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値が`none`である場合、ドラッグ操作がキャンセルされたことを意味します。それ以外の場合は、プロパティの値は実際に行われた操作の種類を示します。ドラッグ元はこの情報に基づいて、ドラッグされた項目を「移動」の操作の後に元の場所から削除することができます。 {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} プロパティの値は、ユーザーが（Escape キーを押すなどして）ドラッグ操作をキャンセルした場合は true となり、不正なドロップ先だった場合などの他の理由でドラッグ操作がキャンセルされた場合や、ドロップに成功した場合は false となります。 -

ドロップ操作は同じウィンドウの中または他のアプリケーションの上で行われ得ます。いずれの場合も常に {{event("dragend")}} イベントは発行されます。このイベントの {{domxref("MouseEvent.screenX","screenX")}} および {{domxref("MouseEvent.screenY","screenY")}} プロパティの値には、ドロップが行われたときの画面上での座標が設定されます。

+ドロップ操作は同じウィンドウの中または他のアプリケーションの上で行われ得ます。いずれの場合も常に {{event("dragend")}} イベントは発行されます。このイベントの {{domxref("MouseEvent.screenX","screenX")}} および {{domxref("MouseEvent.screenY","screenY")}} プロパティの値には、ドロップが行われたときの画面上での座標が設定されます。 -

{{event("dragend")}} イベントの伝搬が終了した後、ドラッグ＆ドロップの操作は完了します。

+{{event("dragend")}} イベントの伝搬が終了した後、ドラッグ＆ドロップの操作は完了します。 -

関連情報

+## 関連情報 - +- [HTML ドラッグ＆ドロップ API (概要)](/ja/docs/Web/API/HTML_Drag_and_Drop_API) +- [複数の項目のドラッグ＆ドロップ](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items) +- [推奨されるドラッグ型](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types) +- [HTML5 Living Standard: Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) diff --git a/files/ja/web/api/html_drag_and_drop_api/index.md b/files/ja/web/api/html_drag_and_drop_api/index.md index 915d16aea9c0c9..8e995b010994da 100644 --- a/files/ja/web/api/html_drag_and_drop_api/index.md +++ b/files/ja/web/api/html_drag_and_drop_api/index.md @@ -12,153 +12,112 @@ tags: - ドラッグ＆ドロップ translation_of: Web/API/HTML_Drag_and_Drop_API --- -
{{DefaultAPISidebar("HTML Drag and Drop API")}}
+{{DefaultAPISidebar("HTML Drag and Drop API")}} -

HTML ドラッグ & ドロップインターフェイスにより、アプリケーションはブラウザーでドラッグ＆ドロップ機能を使用することができます。ユーザーはマウスでドラッグ可能な要素を選択し、その要素をドロップ可能な要素へドラッグし、マウスボタンを離すことでドロップすることができます。ドラッグ操作の間、ドラッグ可能な要素の半透明の表示がマウスポインターに続きます。

+**HTML ドラッグ & ドロップ**インターフェイスにより、アプリケーションはブラウザーでドラッグ＆ドロップ機能を使用することができます。ユーザーはマウスで*ドラッグ可能*な要素を選択し、その要素を*ドロップ可能*な要素へドラッグし、マウスボタンを離すことでドロップすることができます。ドラッグ操作の間、*ドラッグ可能な*要素の半透明の表示がマウスポインターに続きます。 -

ウェブサイト、拡張機能、XUL アプリケーションでは、ドラッグ可能にできる要素の種類、ドラッグ可能な要素が生成するフィードバックの種類、およびドロップ可能な要素をカスタマイズできます。

+ウェブサイト、拡張機能、XUL アプリケーションでは、*ドラッグ可能*にできる要素の種類、*ドラッグ可能な*要素が生成するフィードバックの種類、および*ドロップ可能な*要素をカスタマイズできます。 -

この HTML ドラッグ＆ドロップの概要では、インターフェイスの説明、アプリケーションにドラッグ＆ドロップのサポートを追加するための基本的なステップ、およびインターフェイスの相互運用性の要約が含まれています。

+この HTML ドラッグ＆ドロップの概要では、インターフェイスの説明、アプリケーションにドラッグ＆ドロップのサポートを追加するための基本的なステップ、およびインターフェイスの相互運用性の要約が含まれています。 -

ドラッグイベント

+## ドラッグイベント -

HTML ドラッグ & ドロップ では {{domxref("Event","DOM イベントモデル")}} と {{domxref("MouseEvent","マウスイベント")}} を継承した {{domxref("DragEvent","ドラッグイベント")}} を使います。典型的なドラッグ操作は ユーザーがドラッグ可能な要素を選択したときと、ドロップ可能な要素に要素をドラッグしたとき、ドラッグ可能な要素を離したときに開始します。

+HTML ドラッグ & ドロップ では {{domxref("Event","DOM イベントモデル")}} と {{domxref("MouseEvent","マウスイベント")}} を継承した _{{domxref("DragEvent","ドラッグイベント")}}_ を使います。典型的な*ドラッグ操作は* ユーザーが*ドラッグ可能な*要素を選択したときと、*ドロップ可能な*要素に要素をドラッグしたとき、ドラッグ可能な要素を離したときに開始します。 -

ドラッグ操作のあいだ、いくつかのイベント種類が発生し、そのうちいくつかは {{domxref('Document/drag_event', 'drag')}} や {{domxref('Document/dragover_event', 'dragover')}} イベントのように、複数発生することもあります。

+ドラッグ操作のあいだ、いくつかのイベント種類が発生し、そのうちいくつかは {{domxref('Document/drag_event', 'drag')}} や {{domxref('Document/dragover_event', 'dragover')}} イベントのように、複数発生することもあります。 -

おのおのの ドラッグイベントタイプには関連したグローバルイベントハンドラーがあります。

+おのおのの [ドラッグイベントタイプ](/ja/docs/Web/API/DragEvent#Event_types)には関連した[グローバルイベントハンドラー](/ja/docs/Web/API/DragEvent#GlobalEventHandlers)があります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
イベントOn イベントハンドラー発生する条件…
{{domxref('Document/drag_event', 'drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}…ドラッグ項目 (要素や選択テキスト) がドラッグされた場合
{{domxref('Document/dragend_event', 'dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}…ドラッグ操作の終了 (マウスボタンを離したり、Esc キーを押したりした場合。詳しくはドラッグの終了を参照してください。)
{{domxref('Document/dragenter_event', 'dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}…ドラッグ項目が有効なドロップ対象に入った場合(Specifying Drop Targets を見てください)
{{domxref('Document/dragexit_event', 'dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}…要素がドラッグ操作の選択対象でなくなった場合
{{domxref('Document/dragleave_event', 'dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}…ドラッグ項目が有効なドロップ対象を離れた場合
{{domxref('Document/dragover_event', 'dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}…ドラッグ項目が有効なドロップ対象にドラッグされた場合、数百ミリ秒ごとに
{{domxref('Document/dragstart_event', 'dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}…ユーザーが項目をドラッグ開始した場合(ドラッグ操作の開始 を見てください)
{{domxref('Document/drop_event', 'drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}…項目が有効なドロップ対象にドロップされた場合(ドロップの実行 を見てください)
+| イベント | On イベントハンドラー | 発生する条件… | +| -------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{domxref('Document/drag_event', 'drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | …ドラッグ項目 (要素や選択テキスト) がドラッグされた場合 | +| {{domxref('Document/dragend_event', 'dragend')}} | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | …ドラッグ操作の終了 (マウスボタンを離したり、Esc キーを押したりした場合。詳しくは[ドラッグの終了](/ja/docs/DragDrop/Drag_Operations#dragend "DragDrop/Drag Operations#dragend")を参照してください。) | +| {{domxref('Document/dragenter_event', 'dragenter')}} | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | …ドラッグ項目が有効なドロップ対象に入った場合([Specifying Drop Targets](/ja/docs/DragDrop/Drag_Operations#droptargets "Specifying Drop Targets") を見てください) | +| {{domxref('Document/dragexit_event', 'dragexit')}} | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} | …要素がドラッグ操作の選択対象でなくなった場合 | +| {{domxref('Document/dragleave_event', 'dragleave')}} | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | …ドラッグ項目が有効なドロップ対象を離れた場合 | +| {{domxref('Document/dragover_event', 'dragover')}} | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | …ドラッグ項目が有効なドロップ対象にドラッグされた場合、数百ミリ秒ごとに | +| {{domxref('Document/dragstart_event', 'dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | …ユーザーが項目をドラッグ開始した場合([ドラッグ操作の開始](/ja/docs/DragDrop/Drag_Operations#dragstart "Starting a Drag Operation") を見てください) | +| {{domxref('Document/drop_event', 'drop')}} | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | …項目が有効なドロップ対象にドロップされた場合([ドロップの実行](/ja/docs/DragDrop/Drag_Operations#drop "Performing a Drop") を見てください) | -

メモ: dragstart と dragend イベントは、どちらも OS からブラウザーにファイルをドラッグしたときには発生しません。

+> **Note:** **メモ:** `dragstart` と `dragend` イベントは、どちらも OS からブラウザーにファイルをドラッグしたときには発生しません。 -

インターフェイス

+## インターフェイス -

HTML ドラッグとドロップのインターフェイスは {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} {{domxref("DataTransferItemList")}} です。

+HTML ドラッグとドロップのインターフェイスは {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} {{domxref("DataTransferItemList")}} です。 -

{{domxref("DragEvent")}} インターフェイスには、コンストラクターと {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティ一つがあり、これは {{domxref("DataTransfer")}} オブジェクトです。

+{{domxref("DragEvent")}} インターフェイスには、コンストラクターと {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティ一つがあり、これは {{domxref("DataTransfer")}} オブジェクトです。 -

{{domxref("DataTransfer")}} オブジェクトはドラッグイベントの状態、例えば (copy や move のような) ドラッグの種類や、ドラッグのデータ (1 つ以上の項目)や、各ドラッグ項目の MIME タイプのようなものを含んでいます。{{domxref("DataTransfer")}} オブジェクトにはドラッグデータを追加・削除するメソッドもあります。

+{{domxref("DataTransfer")}} オブジェクトはドラッグイベントの状態、例えば (`copy` や `move` のような) ドラッグの種類や、ドラッグのデータ (1 つ以上の項目)や、各*ドラッグ項目*の MIME タイプのようなものを含んでいます。{{domxref("DataTransfer")}} オブジェクトにはドラッグデータを追加・削除するメソッドもあります。 -

{{domxref("DragEvent")}} と {{domxref("DataTransfer")}} インターフェイスは、アプリケーションに HTML ドラッグ & ドロップ機能を追加するために必要な唯一のものです。 (Firefox では Gecko 独自拡張 を {{domxref("DataTransfer")}} オブジェクトへ施していますが、この拡張機能は Firefox でのみ動作します。)

+{{domxref("DragEvent")}} と {{domxref("DataTransfer")}} インターフェイスは、アプリケーションに HTML ドラッグ & ドロップ機能を追加するために必要な唯一のものです。 (Firefox では [Gecko 独自拡張](#gecko_specific_interfaces) を {{domxref("DataTransfer")}} オブジェクトへ施していますが、この拡張機能は Firefox でのみ動作します。) -

それぞれの {{domxref("DataTransfer")}} オブジェクトには {{domxref("DataTransfer.items","items")}} プロパティがあり、これは {{domxref("DataTransferItem")}} オブジェクトの {{domxref("DataTransferItemList","list")}} です。 {{domxref("DataTransferItem")}} オブジェクトは単一のドラッグ項目を表し、それぞれが {{domxref("DataTransferItem.kind","kind")}} プロパティ (string か file の値を取る) と項目の MIME タイプを表す {{domxref("DataTransferItem.type","type")}} プロパティを持ちます。{{domxref("DataTransferItem")}} オブジェクトにはドラッグ項目のデータを取得するメソッドもあります。

+それぞれの {{domxref("DataTransfer")}} オブジェクトには {{domxref("DataTransfer.items","items")}} プロパティがあり、これは {{domxref("DataTransferItem")}} オブジェクトの {{domxref("DataTransferItemList","list")}} です。 {{domxref("DataTransferItem")}} オブジェクトは単一の*ドラッグ項目*を表し、それぞれが {{domxref("DataTransferItem.kind","kind")}} プロパティ (`string` か `file` の値を取る) と項目の MIME タイプを表す {{domxref("DataTransferItem.type","type")}} プロパティを持ちます。{{domxref("DataTransferItem")}} オブジェクトにはドラッグ項目のデータを取得するメソッドもあります。 -

{{domxref("DataTransferItemList")}} オブジェクトは {{domxref("DataTransferItem")}} オブジェクトのリストです。このリストオブジェクトはリストにドラッグ項目を追加したり、リストからドラッグ項目を削除したり、ドラッグ項目のリストをクリアするメソッドを持ちます。

+{{domxref("DataTransferItemList")}} オブジェクトは {{domxref("DataTransferItem")}} オブジェクトのリストです。このリストオブジェクトはリストにドラッグ項目を追加したり、リストからドラッグ項目を削除したり、ドラッグ項目のリストをクリアするメソッドを持ちます。 -

{{domxref("DataTransfer")}} と{{domxref("DataTransferItem")}} インターフェイスの主な違いは、前者が同期の {{domxref("DataTransfer.getData","getData()")}} メソッドを使ってドラッグ項目のデータにアクセスするのに対し、後者は代わりに非同期の{{domxref("DataTransferItem.getAsString","getAsString()")}} メソッドを使うことです。.

+{{domxref("DataTransfer")}} と{{domxref("DataTransferItem")}} インターフェイスの主な違いは、前者が同期の {{domxref("DataTransfer.getData","getData()")}} メソッドを使ってドラッグ項目のデータにアクセスするのに対し、後者は代わりに非同期の{{domxref("DataTransferItem.getAsString","getAsString()")}} メソッドを使うことです。. -

メモ: {{domxref("DragEvent")}} と {{domxref("DataTransfer")}} はデスクトップブラウザーでは広く対応していますが、 {{domxref("DataTransferItem")}} と {{domxref("DataTransferItemList")}} インターフェイスのブラウザーの対応は限られています。相互運用性について、より詳しくは相互運用性を見てください。

+> **Note:** **メモ:** {{domxref("DragEvent")}} と {{domxref("DataTransfer")}} はデスクトップブラウザーでは広く対応していますが、 {{domxref("DataTransferItem")}} と {{domxref("DataTransferItemList")}} インターフェイスのブラウザーの対応は限られています。相互運用性について、より詳しくは[相互運用性](#interoperability)を見てください。 -

Gecko-特有のインターフェイス

+### Gecko-特有のインターフェイス -

Mozilla と Firefox は、標準のドラッグ＆ドロップのモデルに含まれていないいくつかの機能に対応しています。複数の項目や、文字列以外のデータ (ファイルなど) をドラッグしたりする補助になる便利な関数があります。詳しくは複数の項目のドラッグ＆ドロップを参照してください。加えて、{{domxref("DataTransfer")}} リファレンスページを見るとすべての Gecko 固有プロパティと Gecko 固有メソッドがわかります。

+Mozilla と Firefox は、標準のドラッグ＆ドロップのモデルに含まれていないいくつかの機能に対応しています。複数の項目や、文字列以外のデータ (ファイルなど) をドラッグしたりする補助になる*便利な関数*があります。詳しくは[複数の項目のドラッグ＆ドロップ](/ja/docs/DragDrop/Dragging_and_Dropping_Multiple_Items "DragDrop/Dragging and Dropping Multiple Items")を参照してください。加えて、{{domxref("DataTransfer")}} リファレンスページを見るとすべての [Gecko 固有プロパティ](/ja/docs/Web/API/DataTransfer#Gecko_properties)と [Gecko 固有メソッド](/ja/docs/Web/API/DataTransfer#Gecko_methods)がわかります。 -

基本

+## 基本 -

この節は、アプリにドラッグ&ドロップ機能を追加する基本手順のまとめです。

+この節は、アプリにドラッグ&ドロップ機能を追加する基本手順のまとめです。 -

ドラッグ可能なものを特定する

+### *ドラッグ可能なものを*特定する -

要素をドラッグ可能とするには、以下のコードのように {{htmlattrxref("draggable")}} 属性と {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} のグローバルイベントハンドラを追加することが求められます:

+要素を*ドラッグ可能*とするには、以下のコードのように {{htmlattrxref("draggable")}} 属性と {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} のグローバルイベントハンドラを追加することが求められます: -
<script>
+```html
+
 
-<p id="p1" draggable="true">この要素はドラッグできます。</p>
+

この要素はドラッグできます。

+``` -

詳しくは、以下の記事を参照してください。

+詳しくは、以下の記事を参照してください。 - +- [draggable 属性リファレンス](/ja/docs/Web/HTML/Global_attributes/draggable "draggable global attribute") +- [ドラッグ操作ガイド](/ja/docs/Web/Guide/HTML/Drag_operations#draggableattribute) -

ドラッグするデータの定義

+### ドラッグするデータの定義 -

アプリケーションは、ドラッグ操作にいくつでもデータ項目を含めることが自由にできます。各データ項目は特定 type の {{domxref("DOMString","string")}} —よくあるのは text/html のような MIME タイプです。

+アプリケーションは、ドラッグ操作にいくつでもデータ項目を含めることが自由にできます。各データ項目は特定 `type` の {{domxref("DOMString","string")}} —よくあるのは `text/html` のような MIME タイプです。 -

各{{domxref("DragEvent","ドラッグイベント")}}はイベントのデータを格納する{{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティを持ちます。このプロパティ (これは {{domxref("DataTransfer")}} オブジェクトです) にはドラッグデータを管理するメソッドもあります。{{domxref("DataTransfer.setData","setData()")}} メソッドはドラッグデータに項目を追加するのに使用され、その例は下記の通りです。

+各{{domxref("DragEvent","ドラッグイベント")}}はイベントのデータを格納する{{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティを持ちます。このプロパティ (これは {{domxref("DataTransfer")}} オブジェクトです) にはドラッグデータを管理するメソッドもあります。{{domxref("DataTransfer.setData","setData()")}} メソッドはドラッグデータに項目を追加するのに使用され、その例は下記の通りです。 -
function dragstart_handler(ev) {
+```js
+function dragstart_handler(ev) {
   // 異なる種類のドラッグデータを追加する
   ev.dataTransfer.setData("text/plain", ev.target.innerText);
   ev.dataTransfer.setData("text/html", ev.target.outerHTML);
   ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
 }
-
+``` -
    -
  • ドラッグ＆ドロップで使用される一般的なデータ型の一覧 (テキスト、HTML、リンク、ファイルなど) については、推奨されるドラッグ型をご覧ください。
    • -
  • ドラッグデータについて詳しくは、ドラッグデータをご覧ください。
    • -
+- ドラッグ＆ドロップで使用される一般的なデータ型の一覧 (テキスト、HTML、リンク、ファイルなど) については、[推奨されるドラッグ型](/ja/docs/DragDrop/Recommended_Drag_Types)をご覧ください。 +- ドラッグデータについて詳しくは、[ドラッグデータ](/ja/docs/DragDrop/Drag_Operations#dragdata)をご覧ください。 -

ドラッグ画像の定義

+### ドラッグ画像の定義 -

既定では、ブラウザーはドラッグ操作中にポインターの横に現れる画像を提供します。しかし以下の例のように、アプリケーションは {{domxref("DataTransfer.setDragImage","setDragImage()")}} メソッドでカスタム画像を定義できます。

+既定では、ブラウザーはドラッグ操作中にポインターの横に現れる画像を提供します。しかし以下の例のように、アプリケーションは {{domxref("DataTransfer.setDragImage","setDragImage()")}} メソッドでカスタム画像を定義できます。 -
function dragstart_handler(ev) {
+```js
+function dragstart_handler(ev) {
   // 画像を作成し、ドラッグ画像として使う。
   // 注: "example.gif" は実際の画像の URL に変更してください。
   // でないと、既定ののドラッグ画像が使用されます。
@@ -166,54 +125,44 @@ translation_of: Web/API/HTML_Drag_and_Drop_API
   img.src = 'example.gif';
   ev.dataTransfer.setDragImage(img, 10, 10);
 }
-
- -

ドラッグフィードバック画像について詳しくは、下記を参照してください。

- - +- [ドラッグフィードバック画像の設定](/ja/docs/DragDrop/Drag_Operations#dragfeedback) -

ドラッグ効果の定義

+### ドラッグ*効果*の定義 -

{{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはドラッグ&ドロップ操作中のユーザーへのフィードバックを管理するのに使います。よくあるのはドラッグ中にどのカーソルをブラウザーが表示するかに影響します。例えば、ユーザーがドロップターゲット上に持ってきたとき、ブラウザーのカーソルは起こる動作の種類を示すことがあります。

+{{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはドラッグ&ドロップ操作中のユーザーへのフィードバックを管理するのに使います。よくあるのはドラッグ中にどのカーソルをブラウザーが表示するかに影響します。例えば、ユーザーがドロップターゲット上に持ってきたとき、ブラウザーのカーソルは起こる動作の種類を示すことがあります。 -

3通りの効果が発生する可能性があります。

+3 通りの効果が発生する可能性があります。 -
    -
  1. copy はドラッグしたデータが現在の場所からドロップされる場所にコピーされることを示します。
    2. -
  2. move はドラッグデータが現在の場所からドロップされる場所に移動されることを示します。
    3. -
  3. link はドラッグデータが元からドロップ先にある種の関連や接続が作成されることを示します。
    4. -
+1. **`copy`** はドラッグしたデータが現在の場所からドロップされる場所にコピーされることを示します。 +2. **`move`** はドラッグデータが現在の場所からドロップされる場所に移動されることを示します。 +3. **`link`** はドラッグデータが元からドロップ先にある種の関連や接続が作成されることを示します。 -

ドラッグ操作の間、ある効果はある場所にだけ許可されることを示すために、ドラッグ効果は変更される場合があります。

+ドラッグ操作の間、ある効果はある場所にだけ許可されることを示すために、ドラッグ効果は変更される場合があります。 -

下記の例はこのプロパティの使い方を示します。

+下記の例はこのプロパティの使い方を示します。 -
function dragstart_handler(ev) {
+```js
+function dragstart_handler(ev) {
   ev.dataTransfer.dropEffect = "copy";
 }
-
- -

詳しくは以下を参照してください。

- -
    -
  • Drag の効果 +``` +詳しくは以下を参照してください。 -
    • -
+- [Drag の効果](/ja/docs/Web/Guide/HTML/Drag_operations#drageffects "Drag Effects") -

ドロップゾーンの定義

+### *ドロップゾーン*の定義 -

既定では、ブラウザーはほとんどの HTML 要素に何かがドロップされたとき、あらゆることが発生するのを防いでいます。この動作を変更して要素をドロップゾーンやドロップ可能にするには、要素は{{domxref("GlobalEventHandlers.ondragover","ondragover")}} と {{domxref("GlobalEventHandlers.ondrop","ondrop")}} イベントハンドラー属性を持たねばなりません。

+既定では、ブラウザーはほとんどの HTML 要素に何かがドロップされたとき、あらゆることが発生するのを防いでいます。この動作を変更して要素を*ドロップゾーン*や*ドロップ可能*にするには、要素は{{domxref("GlobalEventHandlers.ondragover","ondragover")}} と {{domxref("GlobalEventHandlers.ondrop","ondrop")}} イベントハンドラー属性を持たねばなりません。 -

以下の例は、この属性の使い方と、各属性の基本的なイベントハンドラーを示しています。

+以下の例は、この属性の使い方と、各属性の基本的なイベントハンドラーを示しています。 -
<script>
+```html
+
 
-<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
-
+

Drop Zone

+``` -

各ハンドラーが {{domxref("Event.preventDefault","preventDefault()")}} を呼んで、このイベントが (タッチイベントやポインターイベントなどに) 追加で処理されることを防いでいるのに注意してください

+各ハンドラーが {{domxref("Event.preventDefault","preventDefault()")}} を呼んで、このイベントが ([タッチイベント](/ja/docs/Web/API/Touch_events)や[ポインターイベント](/ja/docs/Web/API/Pointer_events)などに) 追加で処理されることを防いでいるのに注意してください -

詳しくは、以下を参照してください。

+詳しくは、以下を参照してください。 - +- [ドロップ先の指定](/ja/docs/Web/Guide/HTML/Drag_operations#droptargets) -

ドロップ効果を扱う

+### ドロップ*効果*を扱う -

{{domxref("Document/drop_event", "drop")}} イベントのハンドラーでは、アプリケーション固有の方法でドラッグデータを自由に処理できます。

+{{domxref("Document/drop_event", "drop")}} イベントのハンドラーでは、アプリケーション固有の方法でドラッグデータを自由に処理できます。 -

ふつう、アプリケーションは{{domxref("DataTransfer.getData","getData()")}} メソッドでドラッグ項目を取得して、そのようよ処理します。加えて、アプリケーションのセマンティクスは {{domxref("DataTransfer.dropEffect","dropEffect")}} の値や修飾キーの状態により異なります。

+ふつう、アプリケーションは{{domxref("DataTransfer.getData","getData()")}} メソッドでドラッグ項目を取得して、そのようよ処理します。加えて、アプリケーションのセマンティクスは {{domxref("DataTransfer.dropEffect","dropEffect")}} の値や修飾キーの状態により異なります。 -

下記の例では、ドラッグデータからソース要素の id を取得し、 id を使ってソース要素をドロップ要素に移動するドロップハンドラのを示しています。

+下記の例では、ドラッグデータからソース要素の `id` を取得し、 `id` を使ってソース要素をドロップ要素に移動するドロップハンドラのを示しています。 -
<script>
+```html
+
 
-<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
-<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
-
+

This element is draggable.

+
Drop Zone
+``` -

詳しくは、以下を参照してください。

+詳しくは、以下を参照してください。 - +- [ドロップの実行](/ja/docs/Web/Guide/HTML/Drag_operations#drop) -

ドラッグの終了

+### ドラッグの終了 -

ドラッグ操作の終わりに、 {{domxref("Document/dragent_event", "dragend")}} イベントがドラッグ元の要素で発生します。 — ドラッグが開始された対象の要素です。

+ドラッグ操作の終わりに、 {{domxref("Document/dragent_event", "dragend")}} イベントが*ドラッグ元の*要素で発生します。 — ドラッグが開始された対象の要素です。 -

このイベントはドラッグの完了とキャンセルのどちらでも発生します。 {{domxref("Document/dragent_event", "dragend")}} イベントハンドラーは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値をチェックしてドラッグ操作が成功したか否かを決定できます。

+このイベントはドラッグの完了とキャンセルのどちらでも発生します。 {{domxref("Document/dragent_event", "dragend")}} イベントハンドラーは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値をチェックしてドラッグ操作が成功したか否かを決定できます。 -

ドラッグ操作の終了を扱うことの詳細は、以下を参照してください。

+ドラッグ操作の終了を扱うことの詳細は、以下を参照してください。 - +- [ドラッグの終了](/ja/docs/DragDrop/Drag_Operations#dragend "Finishing a Drag") -

相互運用性

+## 相互運用性 -

DataTransferItem インターフェイスのブラウザー互換性テーブルに見られるように、ドラッグ&ドロップの相互接続性はデスクトップブラウザーでは相対的に広いです(サポートの少ない{{domxref("DataTransferItem")}} と{{domxref("DataTransferItemList")}} インターフェイスを除いて)。このデータはモバイルブラウザーでのドラッグ&ドロップサポートはとても低いことも示しています。

+[DataTransferItem インターフェイスのブラウザー互換性テーブル](/ja/docs/Web/API/DataTransferItem#Browser_compatibility)に見られるように、ドラッグ&ドロップの相互接続性はデスクトップブラウザーでは相対的に広いです(サポートの少ない{{domxref("DataTransferItem")}} と{{domxref("DataTransferItemList")}} インターフェイスを除いて)。このデータはモバイルブラウザーでのドラッグ&ドロップサポートはとても低いことも示しています。 -

例とデモ

+## 例とデモ - +- [Copying and moving elements with the `DataTransfer` interface](https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html) +- [Copying and moving elements with the `DataTransferListItem` interface](http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html) +- ファイルのドラッグ&ドロップ (Firefox のみ): +- ファイルのドラッグ&ドロップ (全ブラウザー): [https://jsbin.com/hiqasek/](https://jsbin.com/hiqasek/edit?html,js,output) +- Drag and Drop API を使った駐車場プロジェクト: ([ここで](https://glitch.com/edit/#!/park)編集できます) -

関連情報

+## 関連情報 - +- [ドラッグ操作](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations "Drag Operations") +- [複数アイテムのドラッグとドロップ](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items "Dragging and Dropping Multiple Items") +- [推奨されるドラッグ型](/ja/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types "Recommended Drag Types") +- [HTML5 Living Standard: Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd "Drag and Drop Standard") +- [Drag and Drop interoperability data from CanIUse](http://caniuse.com/#search=draganddrop "Drag and Drop interoperability data from CanIUse") diff --git a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.md b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.md index 519e7f033b5dc2..4bb47fcad52883 100644 --- a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.md +++ b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.md @@ -7,104 +7,105 @@ tags: translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types original_slug: DragDrop/Recommended_Drag_Types --- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+{{DefaultAPISidebar("HTML Drag and Drop API")}} -

HTML Drag and Drop API は、プレーンテキスト、URL、HTML コード、ファイルなど、さまざまな形式のデータのドラッグをサポートしています。このドキュメントでは、一般的なドラッグ可能なデータ形式のベストプラクティスについて説明しています。

+HTML Drag and Drop API は、プレーンテキスト、URL、HTML コード、ファイルなど、さまざまな形式のデータのドラッグをサポートしています。このドキュメントでは、一般的なドラッグ可能なデータ形式のベストプラクティスについて説明しています。 -
-

注意事項:
- mozSetDataAt() のような moz プレフィックスを持つこのドキュメントのすべてのメソッドとプロパティは、Gecko ベースのブラウザでのみ動作します。

-
+> **Note:** `mozSetDataAt()` のような `moz` プレフィックスを持つこのドキュメントのすべてのメソッドとプロパティは、Gecko ベースのブラウザでのみ動作します。 -

テキストのドラッグ

+## テキストのドラッグ -

テキストをドラッグする時は、text/plain 型を使用します。2番目の引数には、ドラッグした文字列を指定します。例えば、以下のようになります。

+テキストをドラッグする時は、`text/plain` 型を使用します。2 番目の引数には、ドラッグした文字列を指定します。例えば、以下のようになります。 -
event.dataTransfer.setData("text/plain", "これはドラッグされるテキストです");
-
+```js +event.dataTransfer.setData("text/plain", "これはドラッグされるテキストです"); +``` -

Web ページのテキストボックスや選択範囲の文字列のドラッグは、ブラウザが自動的に処理を行うので、自分で処理する必要はありません。

+Web ページのテキストボックスや選択範囲の文字列のドラッグは、ブラウザが自動的に処理を行うので、自分で処理する必要はありません。 -

そのデータが代替テキストでは表現できない物である場合を除いて、他のデータ形式をサポートしないアプリケーションやドロップ対象のためのフォールバック用に、常に text/plain 型のデータを提供することをおすすめします。そのために、データを追加する時には最後に text/plain 型のデータを登録しておいてください。

+そのデータが代替テキストでは表現できない物である場合を除いて、他のデータ形式をサポートしないアプリケーションやドロップ対象のためのフォールバック用に、常に `text/plain` 型のデータを提供することをおすすめします。そのために、データを追加する時には最後に `text/plain` 型のデータを登録しておいてください。 -

注: 古いコードにおいて、text/unicode や text といった型の記述を見かけることがあるかもしれません。これらはどちらも text/plain と等しく扱われ、プレーンテキスト型のデータとして登録・取得されます。

+> **Note:** 注: 古いコードにおいて、`text/unicode` や `text` といった型の記述を見かけることがあるかもしれません。これらはどちらも `text/plain` と等しく扱われ、プレーンテキスト型のデータとして登録・取得されます。 - +## リンクのドラッグ -

ドラッグされたハイパーリンクには、text/uri-list と text/plain の2種類のデータを含める必要があります。どちらの形式もリンクの URL をデータに使用しなければなりません。例えば、以下のようになります。

+ドラッグされたハイパーリンクには、`text/uri-list` と `text/plain` の*2 種類*のデータを含める必要があります。どちらの形式もリンクの URL をデータに使用しなければなりません。例えば、以下のようになります。 -
var dt = event.dataTransfer;
+```js
+var dt = event.dataTransfer;
 dt.setData("text/uri-list", "https://www.mozilla.org");
 dt.setData("text/plain", "https://www.mozilla.org");
-
+``` -

text/uri-list 型のフォールバックとして、text/plain 型を最後に設定します。

+`text/uri-list` 型のフォールバックとして、`text/plain` 型を最後に設定します。 -

注:URL 用の型は uri-list で、L ではなく I であることに注意してください。

+> **Note:** 注:URL 用の型は `uri-list` で、L ではなく I であることに注意してください。 -

複数のリンクをドラッグするには、それぞれのリンクを text/uri-list データ内で CRLF 改行で区切ってください。ナンバー記号 (#) で始まる行はコメントで、有効な URL として扱われません。コメントは、リンクの目的を示したり、リンクに関連づけられたタイトルを保持したりする目的で利用できます

+複数のリンクをドラッグするには、それぞれのリンクを `text/uri-list` データ内で CRLF 改行で区切ってください。ナンバー記号 (`#`) で始まる行はコメントで、有効な URL として扱われません。コメントは、リンクの目的を示したり、リンクに関連づけられたタイトルを保持したりする目的で利用できます -
-

複数のリンクのための text/plain 型のフォールバックは、すべての URL を含むべきですが、コメントを含めるべきではありません。

-
+> **Warning:** 複数のリンクのための `text/plain` 型のフォールバックは、すべての URL を含むべきですが、コメントを含めるべきではありません。 -

例えば、以下のサンプル text/uri-list データには、2つのリンクと1つのコメントが含まれています。

+例えば、以下のサンプル `text/uri-list` データには、2 つのリンクと 1 つのコメントが含まれています。 -
http://www.mozilla.org
+```
+http://www.mozilla.org
 #2つ目のリンク
 http://www.example.com
-
+``` -

ドロップされたリンクを取得する時は、コメントを含めて複数のリンクをドラッグした場合の処理を確実に行ってください。便宜上、text/uri-list 型のデータ内の最初の有効なリンクを参照するために、特別な型として URL を使用することができます。

+ドロップされたリンクを取得する時は、コメントを含めて複数のリンクをドラッグした場合の処理を確実に行ってください。便宜上、`text/uri-list` 型のデータ内の最初の有効なリンクを参照するために、特別な型として `URL` を使用することができます。 -
-

URL 型でデータを追加しないでください - それを行うと、代わりに text/uri-list 型のデータとして登録されます。

-
+> **Warning:** `URL` 型でデータを追加しないでください - それを行うと、代わりに `text/uri-list` 型のデータとして登録されます。 -
var url = event.dataTransfer.getData("URL");
-
+```js +var url = event.dataTransfer.getData("URL"); +``` -

Mozilla 特有の型として、text/x-moz-url 型のデータを見かけることがあるかもしれません。この型が表示される場合は、text/uri-list 型の前に表示されるはずです。この型のデータは、リンクの URL に続いてリンクのタイトルが保持されており。例えば、以下のようになります。

+Mozilla 特有の型として、`text/x-moz-url` 型のデータを見かけることがあるかもしれません。この型が表示される場合は、`text/uri-list` 型の前に表示されるはずです。この型のデータは、リンクの URL に続いてリンクのタイトルが保持されており。例えば、以下のようになります。 -
http://www.mozilla.org
+```
+http://www.mozilla.org
 Mozilla
 http://www.example.com
 Example
-
+``` -

HTMLとXMLのドラッグ

+## HTML と XML のドラッグ -

HTML の内容は text/html 型を使用します。この型のデータはドラッグされる HTML をシリアライズしたものであるべきです。具体的には、この型のデータとして登録されるのに適した値は、要素の {{domxref("Element.innerHTML","innerHTML")}} プロパティの値です。

+HTML の内容は `text/html` 型を使用します。この型のデータはドラッグされる HTML をシリアライズしたものであるべきです。具体的には、この型のデータとして登録されるのに適した値は、要素の `{{domxref("Element.innerHTML","innerHTML")}}` プロパティの値です。 -

XML の内容は text/xml 型を使用することができますが、内容は整形式の XML に変換しておくべきです。

+XML の内容は `text/xml` 型を使用することができますが、内容は整形式の XML に変換しておくべきです。 -

また、text/plain 型を使用して、HTML または XML のプレーンテキストでの表現を提供することもできます。その場合のデータは単純なテキストであるべきで、タグや属性などのソース文字列を含めるべきではありません。例えば、以下のようになります。

+また、`text/plain` 型を使用して、HTML または XML のプレーンテキストでの表現を提供することもできます。その場合のデータは単純なテキストであるべきで、タグや属性などのソース文字列を含めるべきではありません。例えば、以下のようになります。 -
var dt = event.dataTransfer;
-dt.setData("text/html", "こんにちは、<strong>見知らぬ人</strong>");
+```js
+var dt = event.dataTransfer;
+dt.setData("text/html", "こんにちは、見知らぬ人");
 dt.setData("text/plain", "こんにちは、見知らぬ人");
-
+``` -

ファイルのドラッグ

+## ファイルのドラッグ -

ローカルのファイルは application/x-moz-file 型で、 nsIFile のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。

+ローカルのファイルは `application/x-moz-file` 型で、 [nsIFile](/ja/XPCOM_Interface_Reference/nsIFile "nsIFile") のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。 -

ファイルを文字列にはできないため、データを登録するには {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} メソッドを使用する必要があります。同様に、データを取得するには {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドを使わなくてはなりません。

+ファイルを文字列にはできないため、データを登録するには {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} メソッドを使用する必要があります。同様に、データを取得するには {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドを使わなくてはなりません。 -
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
-
+```js +event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0); +``` -

可能であれば、text/uri-list 型と text/plain 型の両方を使ってファイルの URL を含めてください。これらの型は最後に登録されるべきで、それによって、 application/x-moz-file 型は優先度の高い、より適切な型となります。

+可能であれば、`text/uri-list` 型と `text/plain` 型の両方を使ってファイルの URL を含めてください。これらの型は最後に登録されるべきで、それによって、 `application/x-moz-file` 型は優先度の高い、より適切な型となります。 -

複数のファイルは、データ転送中に複数のアイテムとしてドロップ中に受信されます。これについての詳細は、複数の項目のドラッグ＆ドロップを参照してください。

+複数のファイルは、データ転送中に複数のアイテムとしてドロップ中に受信されます。これについての詳細は、[複数の項目のドラッグ＆ドロップ](/DragDrop/Dragging_and_Dropping_Multiple_Items "Dragging and Dropping Multiple Items")を参照してください。 -

以下の例は、ドロップしたファイルを受信するための領域を作成する方法を示しています。

+以下の例は、ドロップしたファイルを受信するための領域を作成する方法を示しています。 -
<listbox ondragenter="return checkDrag(event)"
+```xml
+
 
-<script>
+
+```
 
-
この例では、データ転送に application/x-moz-file 型が含まれている場合にのみ、イベントが false を返します。ドロップイベントの間、ファイル型に関連付けられたデータが取得され、ファイルのファイル名がリストボックスに追加されます。{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、nsISupports を返すので、nsIFile 型に変換するために、ここでは instanceof 演算子を使用していることに注意してください。これは、誤ってファイルではない型のデータを登録した場合のためのチェックとしても有効です。

+この例では、データ転送に `application/x-moz-file` 型が含まれている場合にのみ、イベントが false を返します。ドロップイベントの間、ファイル型に関連付けられたデータが取得され、ファイルのファイル名がリストボックスに追加されます。{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、`nsISupports` を返すので、nsIFile 型に変換するために、ここでは `instanceof` 演算子を使用していることに注意してください。これは、誤ってファイルではない型のデータを登録した場合のためのチェックとしても有効です。
 
-
DataTransfer.types の更新

+### DataTransfer.types の更新
 
-
最新の仕様では、{{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく、{{domxref("DOMString")}} で固定した配列を返すようになっています（これは Firefox 52 以上でサポートされています）。

+最新の仕様では、{{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく、{{domxref("DOMString")}} で固定した配列を返すようになっています（これは Firefox 52 以上でサポートされています）。
 
-
その結果、contains メソッドはもう機能しません。代わりに includes メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。

+その結果、[contains](/ja/docs/Web/API/Node/contains) メソッドはもう機能しません。代わりに [includes](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。
 
-
if ([...event.dataTransfer.types].includes('text/html')) {
+```js
+if ([...event.dataTransfer.types].includes('text/html')) {
   // 実行するコード
-}

+}
+```
 
-
特徴検出を使用して、どのメソッドがサポートされている型なのかを判断し、適切なコードを実行することができます。

+特徴検出を使用して、どのメソッドがサポートされている`型`なのかを判断し、適切なコードを実行することができます。
 
-
画像のドラッグ

+## 画像のドラッグ
 
-
画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に text/uri-list 型を使用します。データは、画像の URL、または画像がWeb上やディスク上に無い場合は データ URL である必要があります。

+画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に `text/uri-list` 型を使用します。データは、画像の URL、または画像が Web 上やディスク上に無い場合は [データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) である必要があります。
 
-
リンクと同様に、text/plain 型のデータには URL も含まれている必要があります。しかし、データ URL は通常のテキストの内容には有用ではないので、このような状況では text/plain 型のデータを除外した方がよいでしょう。

+リンクと同様に、`text/plain` 型のデータには URL も含まれている必要があります。しかし、[データ URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) は通常のテキストの内容には有用ではないので、このような状況では `text/plain` 型のデータを除外した方がよいでしょう。
 
-
Chrome などの特権的なコードでは、画像の種類に応じて、image/jpeg、image/png、image/gif のいずれかの形式を使用することもできます。データは、nsIInputStream インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。

+Chrome などの特権的なコードでは、画像の種類に応じて、`image/jpeg`、`image/png`、`image/gif` のいずれかの形式を使用することもできます。データは、[nsIInputStream](/ja/XPCOM_Interface_Reference/nsIInputStream "nsIInputStream") インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。
 
-
画像がディスク上にある場合は、application/x-moz-file 型も含める必要があります。実際に、これは画像ファイルをドラッグする一般的なやり方です。

+画像がディスク上にある場合は、`application/x-moz-file` 型も含める必要があります。実際に、これは画像ファイルをドラッグする一般的なやり方です。
 
-
最も適切なデータ形式からそうでない形式まで、正しい順序でデータを登録することが重要です。最初に image/jpeg のような標準的な画像型を設定し、次に application/x-moz-file 型を設定します。次に、text/uri-list 型を設定し、最後に text/plain 型を設定します。例えば、以下のようになります。

+最も適切なデータ形式からそうでない形式まで、正しい順序でデータを登録することが重要です。最初に `image/jpeg` のような標準的な画像型を設定し、次に `application/x-moz-file` 型を設定します。次に、`text/uri-list` 型を設定し、最後に `text/plain` 型を設定します。例えば、以下のようになります。
 
-
var dt = event.dataTransfer;
+```js
+var dt = event.dataTransfer;
 dt.mozSetDataAt("image/png", stream, 0);
 dt.mozSetDataAt("application/x-moz-file", file, 0);
 dt.setData("text/uri-list", imageurl);
 dt.setData("text/plain", imageurl);
-

+```
 
-
{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、テキスト以外のデータに使用されることに注意してください。内容によっては、これらの型の一部しか含まれていない場合があるので、ドロップされた画像を受信する時には、どの型が利用可能になっているかを確認することが重要です。

+{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、テキスト以外のデータに使用されることに注意してください。内容によっては、これらの型の一部しか含まれていない場合があるので、ドロップされた画像を受信する時には、どの型が利用可能になっているかを確認することが重要です。
 
-
ノードのドラッグ

+## ノードのドラッグ
 
-
ドキュメント内のノードや要素は、application/x-moz-node 型を使ってドラッグすることができます。型のデータは DOM ノードでなければなりません。これにより、ドロップ対象はドラッグが開始された実際のノードを受け取ることができます。ノードがドロップされていても、異なるドメインからの呼び出し元はそのノードにアクセスできないことに注意してください。

+ドキュメント内のノードや要素は、`application/x-moz-node` 型を使ってドラッグすることができます。型のデータは DOM ノードでなければなりません。これにより、ドロップ対象はドラッグが開始された実際のノードを受け取ることができます。ノードがドロップされていても、異なるドメインからの呼び出し元はそのノードにアクセスできないことに注意してください。
 
-
ノードの内容は常に text/plain 型の代替文字列で提供するべきです。

+ノードの内容は常に `text/plain` 型の代替文字列で提供するべきです。
 
-
独自データのドラッグ

+## 独自データのドラッグ
 
-
独自の目的のために、他の型を使うこともできます。そのデータが特定のサイトやアプリケーションに固有のものでない限り、常に text/plain 型の代替文字列を含めるようにしてください。代替テキストを用意しなかった場合は、他の場所にドロップできなくなります。

+独自の目的のために、他の型を使うこともできます。そのデータが特定のサイトやアプリケーションに固有のものでない限り、常に `text/plain` 型の代替文字列を含めるようにしてください。代替テキストを用意しなかった場合は、他の場所にドロップできなくなります。
 
-
OS のフォルダにファイルをドラッグ

+## OS のフォルダにファイルをドラッグ
 
-
既存のドラッグイベントセッションにファイルを追加したり、コードが対象フォルダーの場所の通知を受信したときに、オペレーティングシステム内のフォルダーに対してのドロップ操作だった場合、ファイルをディスクに書き出したい場合があります。これは拡張機能（またはその他の特権コード）でのみ動作し、application/moz-file-promise 型を使用する必要があります。次のサンプルでは、この高度なケースの概要を説明します。

+既存のドラッグイベントセッションにファイルを追加したり、コードが対象フォルダーの場所の通知を受信したときに、オペレーティングシステム内のフォルダーに対してのドロップ操作だった場合、ファイルをディスクに書き出したい場合があります。これは拡張機能（またはその他の特権コード）でのみ動作し、`application/moz-file-promise` 型を使用する必要があります。次のサンプルでは、この高度なケースの概要を説明します。
 
-
// currentEvent is an existing drag operation event
+```js
+// currentEvent is an existing drag operation event
 
 currentEvent.dataTransfer.setData("text/x-moz-url", URL);
 currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
-currentEvent.dataTransfer.setData("application/x-moz-file-promise-dest-filename", leafName);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-dest-filename", leafName);
 currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
                   new dataProvider(success,error),
                   0, Components.interfaces.nsISupports);
@@ -196,7 +201,7 @@ dataProvider.prototype = {
        console.log("URL file orignal is = " + url);
 
        var namePrimitive = {};
-       aTransferable.getTransferData('application/x-moz-file-promise-dest-filename', namePrimitive, dataSize);
+       aTransferable.getTransferData('application/x-moz-file-promise-dest-filename', namePrimitive, dataSize);
        var name = namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data;
 
        console.log("target filename is = " + name);
@@ -217,13 +222,11 @@ dataProvider.prototype = {
     }
   }
 }
-

+```
 
-
関連情報

+## 関連情報
 
-
+- [HTML Drag and Drop API (Overview)](/Web/API/HTML_Drag_and_Drop_API "HTML Drag and Drop API")
+- [Drag Operations](Web/Guide/HTML/Drag_operations "Drag Operations")
+- [Dragging and Dropping Multiple Items](/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items "Dragging and Dropping Multiple Items")
+- [HTML5 Living Standard: Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd "Drag and Drop Standard")
diff --git a/files/ja/web/api/htmlaudioelement/index.md b/files/ja/web/api/htmlaudioelement/index.md
index 87d50b4a2e23bd..4307431cd79329 100644
--- a/files/ja/web/api/htmlaudioelement/index.md
+++ b/files/ja/web/api/htmlaudioelement/index.md
@@ -9,116 +9,78 @@ tags:
   - Reference
 translation_of: Web/API/HTMLAudioElement
 ---
-
HTMLAudioElement インターフェイスは {{HTMLElement("audio")}} 要素のプロパティと、操作するメソッドを提供します。 {{domxref("HTMLMediaElement")}} インターフェイスから派生しています。

+**`HTMLAudioElement`** インターフェイスは {{HTMLElement("audio")}} 要素のプロパティと、操作するメソッドを提供します。 {{domxref("HTMLMediaElement")}} インターフェイスから派生しています。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
固有のプロパティはありません。親である {{domxref("HTMLMediaElement")}} および {{domxref("HTMLElement")}} からプロパティを継承しています。

+_固有のプロパティはありません。親である {{domxref("HTMLMediaElement")}} および {{domxref("HTMLElement")}} からプロパティを継承しています。_
 
-
メソッド

+## メソッド
 
-
{{domxref("HTMLMediaElement")}} および {{domxref("HTMLElement")}} からメソッドを継承しています。

+_{{domxref("HTMLMediaElement")}} および {{domxref("HTMLElement")}} からメソッドを継承しています。_
 
-
コンストラクター

+### コンストラクター
 
-
構文

+#### 構文
 
-
mySound = new Audio([URLString]);
-

+```
+mySound = new Audio([URLString]);
+```
 
-
説明

+#### 説明
 
-
audio 要素のコンストラクターです。返されるオブジェクトの preload プロパティは auto に設定され、 src プロパティは引数の値が設定されます。ブラウザーはオブジェクトを返す前、非同期的にリソースの選択を始めます。

+audio 要素のコンストラクターです。返されるオブジェクトの `preload` プロパティは `auto` に設定され、 `src` プロパティは引数の値が設定されます。ブラウザーはオブジェクトを返す前、*非同期的に*リソースの選択を始めます。
 
-
メモ: new Audio() で作成された audio 要素は、音声を再生中にガベージコレクションされることはありません。 pause() メソッドが呼ばれるか、再生が終了するまで、再生を続けます。

+_メモ: `new Audio()` で作成された audio 要素は、音声を再生中にガベージコレクションされることはありません。 `pause()` メソッドが呼ばれるか、再生が終了するまで、再生を続けます。_
 
-
引数

+#### _引数_
 
-

- 
URLString (期待される型: {{domxref("DOMString")}}; 任意)

- 
構築される HTMLAudioElement の src  プロパティ

-

+- _`URLString` (期待される型: {{domxref("DOMString")}}; 任意)_
+  - : _構築される `HTMLAudioElement` の `src `プロパティ_
 
-
通常メソッド

+### _通常メソッド_
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
名前と引数返値説明
mozCurrentSampleOffset() {{non-standard_inline}}unsigned long longmozWriteAudio() によって作成された音声ストリームの、現在のオフセットを示します。このオフセットは、ストリームの先頭からのサンプル番号で指定されます。

-    
mozSetup(in PRUint32 channels, in PRUint32 rate) {{non-standard_inline}}

-   		void書き込み用の音声ストリームを初期化します。引数でチャンネル数 (1 でモノラル、 2 でステレオ) とサンプリング周波数 (例えば 44.1kHz の場合は 44100) を指定できます。
mozWriteAudio(in jsval data) {{non-standard_inline}}unsigned longストリームの現在のオフセットに音声を書き込みます。実際にストリームに書き込まれたバイト数を返します。

+| _名前と引数_                                                                          | _返値_                 | _説明_                                                                                                                                                                   |
+| ------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| _`mozCurrentSampleOffset()` {{non-standard_inline}}_                         | _`unsigned long long`_ | _`mozWriteAudio()` によって作成された音声ストリームの、現在のオフセットを示します。このオフセットは、ストリームの先頭からのサンプル番号で指定されます。_                 |
+| _`mozSetup(in PRUint32 channels, in PRUint32 rate)` {{non-standard_inline}}_ | _`void`_               | _書き込み用の音声ストリームを初期化します。引数でチャンネル数 (`1` でモノラル、 `2` でステレオ) とサンプリング周波数 (例えば 44.1kHz の場合は `44100`) を指定できます。_ |
+| _`mozWriteAudio(in jsval data) `{{non-standard_inline}}_                     | _`unsigned long`_      | _ストリームの現在のオフセットに音声を書き込みます。実際にストリームに書き込まれたバイト数を返します。_                                                                   |
 
-
例

+## _例_
 
-
基本的な使用

+### _基本的な使用_
 
-
HTMLAudioElement を完全に JavaScript で生成します。

+_`HTMLAudioElement` を完全に JavaScript で生成します。_
 
-
var flush = new Audio('toilet_flush.wav');
+```
+var flush = new Audio('toilet_flush.wav');
 flush.play();
-

+```
 
-
audio 要素でもっと一般的に使用されるプロパティとしては、 src, currentTime, duration, paused, muted, volume などがあります。

+_audio 要素でもっと一般的に使用されるプロパティとしては、 `src`, `currentTime`, `duration`, `paused`, `muted`, `volume` などがあります。_
 
-
var flush = new Audio('toilet_flush.wav');
-flush.addEventListener('loadeddata',() => {
+```
+var flush = new Audio('toilet_flush.wav');
+flush.addEventListener('loadeddata',() => {
     var duration = flush.duration; // the duration variable now holds the duration (in seconds) of the audio clip
-})

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmlaudioelement", "HTMLAudioElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}{{Spec2('HTML5 W3C')}} 

-
-
ブラウザーの対応

-
-
{{Compat("api.HTMLAudioElement")}}

-
-
関連情報

-
-
    
- 
  • このインタフェースを実装した HTML 要素: {{HTMLElement("audio")}}
    • 
-

-
-
{{APIRef("HTML DOM")}}

+})
+```
+
+## _仕様書_
+
+| _仕様書_                                                                                                                   | _状態_                             | _備考_ |
+| -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ |
+| _{{SpecName('HTML WHATWG', "#htmlaudioelement", "HTMLAudioElement")}}_                             | _{{Spec2('HTML WHATWG')}}_ |        |
+| _{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}_ | _{{Spec2('HTML5 W3C')}}_     | \_\_   |
+
+## _ブラウザーの対応_
+
+_{{Compat("api.HTMLAudioElement")}}_
+
+## _関連情報_
+
+- _このインタフェースを実装した HTML 要素: {{HTMLElement("audio")}}_
+
+_{{APIRef("HTML DOM")}}_
diff --git a/files/ja/web/api/htmlbrelement/index.md b/files/ja/web/api/htmlbrelement/index.md
index 1e6b1642bfc452..9cdb6dc07420e6 100644
--- a/files/ja/web/api/htmlbrelement/index.md
+++ b/files/ja/web/api/htmlbrelement/index.md
@@ -8,57 +8,34 @@ tags:
   - Reference
 translation_of: Web/API/HTMLBRElement
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLBRElementインターフェースはHTML改行要素 ({{htmlelement("br")}}) を表現します。{{domxref("HTMLElement")}}より継承しています。

+**`HTMLBRElement`** インターフェースは HTML 改行要素 ({{htmlelement("br")}}) を表現します。{{domxref("HTMLElement")}}より継承しています。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
属性

+## 属性
 
-
親である{{domxref("HTMLElement")}}より属性を継承しています。

+_親である{{domxref("HTMLElement")}}より属性を継承しています。_
 
-

- 
{{domxref("HTMLBRElement.clear")}} {{deprecated_inline}}

- 
は{domxref("DOMString")}}であり，回り込みオブジェクトの周囲の文章を回り込ませるよう指示します。

-

+- {{domxref("HTMLBRElement.clear")}} {{deprecated_inline}}
+  - : は{domxref("DOMString")}}であり，回り込みオブジェクトの周囲の文章を回り込ませるよう指示します。
 
-
メソッド

+## メソッド
 
-
固有のメソッドなし。親である{{domxref("HTMLElement")}}よりメソッドを継承しています。

+_固有のメソッドなし。親である\_\_{{domxref("HTMLElement")}}よりメソッドを継承しています。_
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態備考
{{SpecName('HTML WHATWG', "#htmlbrelement", "HTMLBRElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}}より変更なし。
{{SpecName('HTML5 W3C', "textlevel-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML5 W3C')}}{{SpecName("DOM2 HTML")}}より変更なし。

+| 仕様                                                                                                             | 状態                             | 備考                                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmlbrelement", "HTMLBRElement")}}                             | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}}より変更なし。 |
+| {{SpecName('HTML5 W3C', "textlevel-semantics.html#the-br-element", "HTMLBRElement")}} | {{Spec2('HTML5 W3C')}}     | {{SpecName("DOM2 HTML")}}より変更なし。 |
 
-
ブラウザ互換性

+## ブラウザ互換性
 
-

+{{Compat("api.HTMLBRElement")}}
 
+## 関連項目
 
-
{{Compat("api.HTMLBRElement")}}

-

-
-
関連項目

-
-
    
- 
  • 本インターフェースを実装しているHTML要素: {{HTMLElement("br")}}
    • 
-

+- 本インターフェースを実装している HTML 要素: {{HTMLElement("br")}}
diff --git a/files/ja/web/api/htmlcanvaselement/capturestream/index.md b/files/ja/web/api/htmlcanvaselement/capturestream/index.md
index e9f109201948ca..01155e27b8a28e 100644
--- a/files/ja/web/api/htmlcanvaselement/capturestream/index.md
+++ b/files/ja/web/api/htmlcanvaselement/capturestream/index.md
@@ -13,29 +13,29 @@ tags:
   - Web
 translation_of: Web/API/HTMLCanvasElement/captureStream
 ---
-
{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}

+{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
 
-
HTMLCanvasElement.captureStream() メソッドは、canvas の前面をリアルタイムにキャプチャした動画を {{domxref("CanvasCaptureMediaStream")}} として返すメソッドです。

+**`HTMLCanvasElement`\*\***`.captureStream()`\*\* メソッドは、canvas の前面をリアルタイムにキャプチャした動画を {{domxref("CanvasCaptureMediaStream")}} として返すメソッドです。
 
-
構文

+## 構文
 
-
MediaStream = canvas.captureStream(frameRate);
-

+```
+MediaStream = canvas.captureStream(frameRate);
+```
 
-
引数

+### 引数
 
-

- 
frameRate {{optional_inline}}

- 
キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、canvas が変化するたびにフレームが新しくキャプチャされます。0 を指定した場合、フレームが 1 枚だけキャプチャされます。

-

+- `frameRate` {{optional_inline}}
+  - : キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、canvas が変化するたびにフレームが新しくキャプチャされます。0 を指定した場合、フレームが 1 枚だけキャプチャされます。
 
-
戻り値

+### 戻り値
 
-
{{domxref("MediaStream")}} オブジェクトへの参照を返します。

+{{domxref("MediaStream")}} オブジェクトへの参照を返します。
 
-
使用例

+## 使用例
 
-
// キャプチャしたい canvas 要素を取得
+```js
+// キャプチャしたい canvas 要素を取得
 var canvasElt = document.querySelector('canvas');
 
 // ストリームの取得
@@ -45,36 +45,21 @@ var stream = canvasElt.captureStream(25); // 25 FPS
 // 例：RTCPeerConnection を使って別のコンピュータに送信
 // ここで pc は既に生成された RTCPeerConnection オブジェクト
 pc.addStream(stream);
-

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書策定状況備考
{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}{{Spec2('Media Capture DOM Elements')}}初期定義

-
-
ブラウザ実装状況

-
-
{{Compat("api.HTMLCanvasElement.captureStream")}}

-
-
関連情報

-
-
    
- 
  • {{domxref("CanvasCaptureMediaStream")}} - 戻り値のインターフェイス
    • 
- 
  • {{domxref("HTMLMediaElement.captureStream()")}} - media 要素からストリームをキャプチャするメソッド
    • 
- 
  • {{domxref("MediaStream")}}
    • 
- 
  • {{domxref("Media Capture and Streams API")}}
    • 
-

+```
+
+## 仕様
+
+| 仕様書                                                                                                                                                                                                                   | 策定状況                                             | 備考     |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------- |
+| {{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}} | {{Spec2('Media Capture DOM Elements')}} | 初期定義 |
+
+## ブラウザ実装状況
+
+{{Compat("api.HTMLCanvasElement.captureStream")}}
+
+## 関連情報
+
+- {{domxref("CanvasCaptureMediaStream")}} - 戻り値のインターフェイス
+- {{domxref("HTMLMediaElement.captureStream()")}} - media 要素からストリームをキャプチャするメソッド
+- {{domxref("MediaStream")}}
+- {{domxref("Media Capture and Streams API")}}
diff --git a/files/ja/web/api/htmlcanvaselement/index.md b/files/ja/web/api/htmlcanvaselement/index.md
index 362fba0e236aa9..5256e14a462150 100644
--- a/files/ja/web/api/htmlcanvaselement/index.md
+++ b/files/ja/web/api/htmlcanvaselement/index.md
@@ -11,88 +11,54 @@ tags:
   - TopicStub
 translation_of: Web/API/HTMLCanvasElement
 ---
-

-
{{APIRef("Canvas API")}}

-

+{{APIRef("Canvas API")}}
 
-
HTMLCanvasElementインタフェースはcanvas要素のレイアウトや表現の操作のための属性やメソッドを提供します。HTMLCanvasElementは{{domxref("HTMLElement")}}インタフェースのプロパティやメソッドも利用可能です。

+**`HTMLCanvasElement`** インタフェースは canvas 要素のレイアウトや表現の操作のための属性やメソッドを提供します。`HTMLCanvasElement`は{{domxref("HTMLElement")}}インタフェースのプロパティやメソッドも利用可能です。
 
-
属性

+## 属性
 
-
{{domxref("HTMLElement")}}から継承する属性の他に以下の属性を持ちます。

+_{{domxref("HTMLElement")}}から継承する属性の他に以下の属性を持ちます。_
 
-

- 
{{domxref("HTMLCanvasElement.height")}}

- 
正のinteger で {{htmlattrxref("height", "canvas")}} というHTMLの{{HTMLElement("canvas")}}要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として150を用います。

- 
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}

- 
{{jsxref("Boolean")}}で{{htmlattrxref("moz-opaque", "canvas")}}という{{HTMLElement("canvas")}}要素で指定されたものを反映したものです。この属性はcanvasが半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。

- 
{{domxref("HTMLCanvasElement.width")}}

- 
正のinteger で{{htmlattrxref("width", "canvas")}} というHTMLの{{HTMLElement("canvas")}}要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として300を用います。

-

+- {{domxref("HTMLCanvasElement.height")}}
+  - : 正の`integer` で {{htmlattrxref("height", "canvas")}} という HTML の{{HTMLElement("canvas")}}要素の属性で指定された CSS ピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として`150`を用います。
+- {{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+  - : {{jsxref("Boolean")}}で{{htmlattrxref("moz-opaque", "canvas")}}という{{HTMLElement("canvas")}}要素で指定されたものを反映したものです。この属性は canvas が半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。
+- {{domxref("HTMLCanvasElement.width")}}
+  - : 正の`integer` で{{htmlattrxref("width", "canvas")}} という HTML の{{HTMLElement("canvas")}}要素の属性で指定された CSS ピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として`300`を用います。
 
-
メソッド

+## メソッド
 
-
{{domxref("HTMLElement")}}から継承するメソッドの他に以下のメソッドを持ちます。

+_{{domxref("HTMLElement")}}から継承するメソッドの他に以下のメソッドを持ちます。_
 
-

- 
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}

- 
Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.

- 
{{domxref("HTMLCanvasElement.getContext()")}}

- 

- 
Canvasの描画コンテキストを返すか、サポートされていないコンテキストIDの場合nullを返します。

-  描画コンテキストを用いてCanvasに描画することができます。

-  getContextの引数に"2d"を渡すと{{domxref("CanvasRenderingContext2D")}} オブジェクトを、"experimental-webgl"(または"webgl")を渡すと {{domxref("WebGLRenderingContext")}}オブジェクトを返します。

-  "experimental-webgl"または"webgl"コンテキストは、ブラウザがWebGLに対応している場合に限り使用できます。

- 

- 
{{domxref("HTMLCanvasElement.toDataURL()")}}

- 
Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to png). The returned image is in a resolution of 96dpi.

- 
{{domxref("HTMLCanvasElement.toBlob()")}}

- 
Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.

- 
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}

- 
Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.

- 
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}

- 
Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.

-

+- {{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+  - : Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.
+- {{domxref("HTMLCanvasElement.getContext()")}}
+  - : Canvas の描画コンテキストを返すか、サポートされていないコンテキスト ID の場合 null を返します。
+    描画コンテキストを用いて Canvas に描画することができます。
+    getContext の引数に`"2d"`を渡すと{{domxref("CanvasRenderingContext2D")}} オブジェクトを、`"experimental-webgl"`(または`"webgl"`)を渡すと {{domxref("WebGLRenderingContext")}}オブジェクトを返します。
+    `"experimental-webgl"`または`"webgl"`コンテキストは、ブラウザが WebGL に対応している場合に限り使用できます。
+- {{domxref("HTMLCanvasElement.toDataURL()")}}
+  - : Returns a data-URL containing a representation of the image in the format specified by the `type` parameter (defaults to `png`). The returned image is in a resolution of 96dpi.
+- {{domxref("HTMLCanvasElement.toBlob()")}}
+  - : Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
+- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+  - : Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.
+- {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+  - : Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified `name`. If `type` is not specified, the image type is `image/png`.
 
-
Specifications

+## Specifications
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Adds the method captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object.

-    The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Initial definition.

+| Specification                                                                                                                                        | Status                                               | Comment                                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}} | {{Spec2('Media Capture DOM Elements')}} | Adds the method `captureStream()`.                                                                                                                                                                                      |
+| {{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}                                                     | {{Spec2('HTML WHATWG')}}                     | The method `getContext()` now returns a {{domxref("RenderingContext")}} rather than an opaque `object`. The methods `probablySupportsContext()`, `setContext()` and `transferControlToProxy()`have been added. |
+| {{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}                                     | {{Spec2('HTML5.1')}}                         |                                                                                                                                                                                                                         |
+| {{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}                                     | {{Spec2('HTML5 W3C')}}                         | Initial definition.                                                                                                                                                                                                     |
 
-
Browser compatibility

+## Browser compatibility
 
-
{{Compat("api.HTMLCanvasElement")}}

+{{Compat("api.HTMLCanvasElement")}}
 
-
See also

+## See also
 
-
    
- 
  • HTML element implementing this interface: {{HTMLElement("canvas")}}.
    • 
-

+- HTML element implementing this interface: {{HTMLElement("canvas")}}.
diff --git a/files/ja/web/api/htmlcanvaselement/toblob/index.md b/files/ja/web/api/htmlcanvaselement/toblob/index.md
index 0bc625258a2424..4d2a8e08231ca5 100644
--- a/files/ja/web/api/htmlcanvaselement/toblob/index.md
+++ b/files/ja/web/api/htmlcanvaselement/toblob/index.md
@@ -9,42 +9,38 @@ tags:
   - Reference
 translation_of: Web/API/HTMLCanvasElement/toBlob
 ---
-

-

-
{{APIRef("Canvas API")}}

-

-

+{{APIRef("Canvas API")}}
 
-
HTMLCanvasElement.toBlob() メソッドは、 キャンバスに含まれる画像を表す {{domxref("Blob")}} オブジェクトを生成します；このファイルは、ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリに保存されます。type が指定されてない場合、画像の type は、 image/png です。生成された画像の解像度は、96dpi です。

- image/jpeg 画像と一緒に使用される 3 つ目の引数は、出力の品質を指定します。

+**`HTMLCanvasElement.toBlob()`** メソッドは、 キャンバスに含まれる画像を表す {{domxref("Blob")}} オブジェクトを生成します；このファイルは、ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリに保存されます。`type` が指定されてない場合、画像の type は、 `image/png` です。生成された画像の解像度は、96dpi です。
+`image/jpeg` 画像と一緒に使用される 3 つ目の引数は、出力の品質を指定します。
 
-
構文

+## 構文
 
-
void canvas.toBlob(callback, mimeType, qualityArgument);
-

+```
+void canvas.toBlob(callback, mimeType, qualityArgument);
+```
 
-
パラメーター

+### パラメーター
 
-

- 
callback

- 
引数として {{domxref("Blob")}} オブジェクトを受け取るコールバック関数。

- 
mimeType {{optional_inline}}

- 
画像フォーマットを示す {{domxref("DOMString")}}。既定の型は image/png。

- 
qualityArgument {{optional_inline}}

- 
要求した type が image/jpeg  か image/webp だった場合、画像の品質を示す 0 から 1 の {{jsxref("Number")}}。type 引数がそのほかの値だった場合、既定の値が画質に使用される。ほかの引数は無視される。

-

+- callback
+  - : 引数として {{domxref("Blob")}} オブジェクトを受け取るコールバック関数。
+- `mimeType` {{optional_inline}}
+  - : 画像フォーマットを示す {{domxref("DOMString")}}。既定の型は `image/png`。
+- `qualityArgument` {{optional_inline}}
+  - : 要求した type が `image/jpeg `か `image/webp` だった場合、画像の品質を示す `0` から `1` の {{jsxref("Number")}}。type 引数がそのほかの値だった場合、既定の値が画質に使用される。ほかの引数は無視される。
 
-
戻り値

+### 戻り値
 
-
なし。

+なし。
 
-
例

+## 例
 
-
キャンバスに表示されている画像を取得する

+### キャンバスに表示されている画像を取得する
 
-
一度キャンバスにコンテンツを描画したら、これを何らかのサポートされている画像フォーマットに変換できます。たとえば、下記のコードスニペットは、ID が "canvas" の {{HTMLElement("canvas")}} 要素を取得して、PNG 画像としてコピーしてから、ドキュメントに新しい {{HTMLElement("img")}} 要素を追加しています。この画像ソースはキャンバスを使用して生成されたものです。

+一度キャンバスにコンテンツを描画したら、これを何らかのサポートされている画像フォーマットに変換できます。たとえば、下記のコードスニペットは、ID が "canvas" の {{HTMLElement("canvas")}} 要素を取得して、PNG 画像としてコピーしてから、ドキュメントに新しい {{HTMLElement("img")}} 要素を追加しています。この画像ソースはキャンバスを使用して生成されたものです。
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 
 canvas.toBlob(function(blob) {
   var newImg = document.createElement("img"),
@@ -58,18 +54,20 @@ canvas.toBlob(function(blob) {
   newImg.src = url;
   document.body.appendChild(newImg);
 });
-

+```
 
-
ここでは、PNG 画像を生成していることに注意してください；toBlob() の呼び出しに 2 つ目のパラメーターを追加した場合、画像の種類を指定できます。たとえば、 JPEG フォーマットの画像を取得できます：

+ここでは、PNG 画像を生成していることに注意してください；`toBlob()` の呼び出しに 2 つ目のパラメーターを追加した場合、画像の種類を指定できます。たとえば、 JPEG フォーマットの画像を取得できます：
 
-
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

+```js
+ canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
+```
 
-

-
キャンバスをアイコンに変換する方法（Mozilla のみ）

+### キャンバスをアイコンに変換する方法（Mozilla のみ）
 
-
キャンバスをアイコンに変換するには、-moz-parse を使用します。Windows XP は PNG から ico への変換をサポートしていませんが、代わりに bmp を使用できます。download 属性を設定することで、ダウンロードリンクを生成できます。download 属性の値は、ファイル名として使用される名前です。

+キャンバスをアイコンに変換するには、`-moz-parse` を使用します。Windows XP は PNG から ico への変換をサポートしていませんが、代わりに bmp を使用できます。download 属性を設定することで、ダウンロードリンクを生成できます。download 属性の値は、ファイル名として使用される名前です。
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var d = canvas.width;
 ctx = canvas.getContext("2d");
 ctx.beginPath();
@@ -91,16 +89,15 @@ function blobCallback(iconName) {
   }
 }
 canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
-              '-moz-parse-options:format=bmp;bpp=32');

-

+              '-moz-parse-options:format=bmp;bpp=32');
+```
 
-
OS.File（chrome/add-on コンテクストのみ）で toBlob をディスクに保存する

+### OS.File（chrome/add-on コンテクストのみ）で toBlob をディスクに保存する
 
-

-
このテクニックは画像をデスクトップに保存しますが、Web サイトには公開されていない OS API として Firefox chrome コンテクストか add-on コードでのみ役立ちます。

-

+> **Note:** このテクニックは画像をデスクトップに保存しますが、Web サイトには公開されていない OS API として Firefox chrome コンテクストか add-on コードでのみ役立ちます。
 
-
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var d = canvas.width;
 ctx = canvas.getContext("2d");
 ctx.beginPath();
@@ -135,44 +132,27 @@ function blobCallback(iconName) {
 }
 
 canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
-              '-moz-parse-options:format=bmp;bpp=32');

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} の最新のスナップショットから変更なし。
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}変更なし。
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}初期定義を含む {{SpecName('HTML WHATWG')}} のスナップショット。

-
-
ブラウザ実装状況

-
-
{{Compat("api.HTMLCanvasElement.toBlob")}}

-
-
ポリフィル

-
-
toDataURL に基づいた低パフォーマンスのポリフィルです。

-
-
if (!HTMLCanvasElement.prototype.toBlob) {
+              '-moz-parse-options:format=bmp;bpp=32');
+```
+
+## 仕様
+
+| 仕様                                                                                                                     | 状態                             | コメント                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}} | {{Spec2('HTML WHATWG')}} | {{SpecName('HTML5 W3C')}} の最新のスナップショットから変更なし。  |
+| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}} | {{Spec2('HTML5.1')}}     | 変更なし。                                                               |
+| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}} | {{Spec2('HTML5 W3C')}}     | 初期定義を含む {{SpecName('HTML WHATWG')}} のスナップショット。 |
+
+## ブラウザ実装状況
+
+{{Compat("api.HTMLCanvasElement.toBlob")}}
+
+## ポリフィル
+
+toDataURL に基づいた低パフォーマンスのポリフィルです。
+
+```js
+if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
   value: function (callback, type, quality) {
 
@@ -180,7 +160,7 @@ canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
         len = binStr.length,
         arr = new Uint8Array(len);
 
-    for (var i=0; i<len; i++ ) {
+    for (var i=0; i
+```
 
-
関連項目

+## 関連項目
 
-
    
- 
  • これが定義されているインターフェース： {{domxref("HTMLCanvasElement")}}
    • 
- 
  • {{domxref("Blob")}}
    • 
-

+- これが定義されているインターフェース： {{domxref("HTMLCanvasElement")}}
+- {{domxref("Blob")}}
diff --git a/files/ja/web/api/htmlcanvaselement/todataurl/index.md b/files/ja/web/api/htmlcanvaselement/todataurl/index.md
index 3e18cfcf788cdb..79a4b2323079fd 100644
--- a/files/ja/web/api/htmlcanvaselement/todataurl/index.md
+++ b/files/ja/web/api/htmlcanvaselement/todataurl/index.md
@@ -3,77 +3,78 @@ title: HTMLCanvasElement.toDataURL()
 slug: Web/API/HTMLCanvasElement/toDataURL
 translation_of: Web/API/HTMLCanvasElement/toDataURL
 ---
-
{{APIRef("Canvas API")}}

+{{APIRef("Canvas API")}}
 
-
HTMLCanvasElement.toDataURL() メソッドは、 type パラメータ（デフォルトはPNG形式）で指定される画像フォーマット形式の data URI を返すメソッドです。返り値となる画像の解像度は96 dpiです。

+**`HTMLCanvasElement.toDataURL()`** メソッドは、 `type` パラメータ（デフォルトは[PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics)形式）で指定される画像フォーマット形式の [data URI](/ja/docs/Web/HTTP/data_URIs) を返すメソッドです。返り値となる画像の解像度は 96 dpi です。
 
-
    
- 
  • キャンバスの幅か高さが、0 もしくは maximum canvas size より大きい場合、文字列 "data:,"を返します。
    • 
- 
  • image/png 形式を指定したにもかかわらず返り値が data:image/png で始まる場合、要求された形式には対応していません。
    • 
- 
  • Chrome は image/webp 形式に対応します。
    • 
-

+- キャンバスの幅か高さが、`0` もしくは [maximum canvas size](/ja/docs/Web/HTML/Element/canvas#Maximum_canvas_size) より大きい場合、文字列 `"data:,"`を返します。
+- `image/png` 形式を指定したにもかかわらず返り値が `data:image/png` で始まる場合、要求された形式には対応していません。
+- Chrome は `image/webp` 形式に対応します。
 
-
構文

+## 構文
 
-
canvas.toDataURL(type, encoderOptions);
-

+```
+canvas.toDataURL(type, encoderOptions);
+```
 
-
パラメーター

+### パラメーター
 
-

- 
type {{optional_inline}}

- 
画像フォーマットを示す {{domxref("DOMString")}} 。 指定しなかった場合、デフォルトのフォーマット形式は image/png です。

- 
encoderOptions {{optional_inline}}

- 
0 から 1 の間の {{jsxref("Number")}} で示す、 image/jpeg や image/webp のような非可逆圧縮を使う画像フォーマットの画質です。

- この引数がその他の値だった場合、デフォルトの画質が使われます。デフォルト値は 0.92 です。その他の引数は無視されます。

-

+- `type` {{optional_inline}}
+  - : 画像フォーマットを示す {{domxref("DOMString")}} 。 指定しなかった場合、デフォルトのフォーマット形式は `image/png` です。
+- `encoderOptions` {{optional_inline}}
+  - : `0` から `1` の間の {{jsxref("Number")}} で示す、 `image/jpeg` や `image/webp` のような非可逆圧縮を使う画像フォーマットの画質です。
+    この引数がその他の値だった場合、デフォルトの画質が使われます。デフォルト値は `0.92` です。その他の引数は無視されます。
 
-
戻り値

+### 戻り値
 
-
要求されたdata URIを含む {{domxref("DOMString")}} 。

+要求された[data URI](/ja/docs/Web/HTTP/data_URIs)を含む {{domxref("DOMString")}} 。
 
-
例外

+### 例外
 
-

- 
SecurityError

- 
キャンバスのビットマップがorigin cleanではありません。少なくとも一部、ドキュメントがロードされたサイト以外のサイトからロードされた、またはロードされた可能性のあるコンテンツを含んでいます。（訳注：いわゆる「汚染されたキャンバス」の問題です。画像とキャンバスをオリジン間で利用できるようにするもあわせて参照してください）

-

+- `SecurityError`
+  - : キャンバスのビットマップが origin clean ではありません。少なくとも一部、ドキュメントがロードされたサイト以外のサイトからロードされた、またはロードされた可能性のあるコンテンツを含んでいます。（訳注：いわゆる「汚染されたキャンバス」の問題です。[画像とキャンバスをオリジン間で利用できるようにする](/ja/docs/Web/HTML/CORS_enabled_image)もあわせて参照してください）
 
-
例

+## 例
 
-
このような {{HTMLElement("canvas")}} 要素を用意します

+このような {{HTMLElement("canvas")}} 要素を用意します
 
-
<canvas id="canvas" width="5" height="5"></canvas>
-

+```html
+
+```
 
-
以下のコードによりキャンバスのData URLを取得できます。

+以下のコードによりキャンバスの Data URL を取得できます。
 
-
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var dataURL = canvas.toDataURL();
 console.log(dataURL);
 // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
 // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
-

+```
 
-
JPEGの画質を設定する

+### JPEG の画質を設定する
 
-
var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
+```js
+var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
 // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
 var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
 var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
-

+```
 
-
Example: Dynamically change images

+### Example: Dynamically change images
 
-
You can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example):

+You can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example):
 
-
HTML

+#### HTML
 
-
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />

+```html
+Description of my picture
+```
 
-
JavaScript

+#### JavaScript
 
-
window.addEventListener('load', removeColors);
+```js
+window.addEventListener('load', removeColors);
 
 function showColorImg() {
   this.style.display = 'none';
@@ -90,7 +91,7 @@ function removeColors() {
       nImgsLen = aImages.length,
       oCanvas = document.createElement('canvas'),
       oCtx = oCanvas.getContext('2d');
-  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
     oColorImg = aImages[nImgId];
     nWidth = oColorImg.offsetWidth;
     nHeight = oColorImg.offsetHeight;
@@ -100,7 +101,7 @@ function removeColors() {
     oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
     aPix = oImgData.data;
     nPixLen = aPix.length;
-    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
       aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
     }
     oCtx.putImageData(oImgData, 0, 0);
@@ -112,44 +113,22 @@ function removeColors() {
     oColorImg.style.display = "none";
     oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
   }
-}

-
-
Specifications

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.

-
-
Browser compatibility

-
-
-
-
{{Compat("api.HTMLCanvasElement.toDataURL")}}

-
-
See also

-
-
    
- 
  • The interface defining it, {{domxref("HTMLCanvasElement")}}.
    • 
- 
  • Data URIs in the HTTP reference.
    • 
-

+}
+```
+
+## Specifications
+
+| Specification                                                                                                                    | Status                           | Comment                                                                                 |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML WHATWG')}} | No change since the latest snapshot, {{SpecName('HTML5 W3C')}}                   |
+| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5.1')}}     |                                                                                         |
+| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5 W3C')}}     | Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition. |
+
+## Browser compatibility
+
+{{Compat("api.HTMLCanvasElement.toDataURL")}}
+
+## See also
+
+- The interface defining it, {{domxref("HTMLCanvasElement")}}.
+- [Data URIs](/ja/docs/Web/HTTP/data_URIs) in the [HTTP](/ja/docs/Web/HTTP) reference.
diff --git a/files/ja/web/api/htmlcollection/index.md b/files/ja/web/api/htmlcollection/index.md
index 4ba42171e95f21..0e4634fe7caac4 100644
--- a/files/ja/web/api/htmlcollection/index.md
+++ b/files/ja/web/api/htmlcollection/index.md
@@ -10,39 +10,36 @@ tags:
   - Reference
 translation_of: Web/API/HTMLCollection
 ---
-
{{APIRef("DOM")}}

+{{APIRef("DOM")}}
 
-
HTMLCollection インターフェイスは、 (文書内の順序における) 要素の一般的なコレクション ({{jsxref("Functions/arguments", "arguments")}} のような配列風のオブジェクト) を表し、リストから選択するためのメソッドとプロパティを提供します。

+**`HTMLCollection`** インターフェイスは、 (文書内の順序における) 要素の一般的なコレクション ({{jsxref("Functions/arguments", "arguments")}} のような配列風のオブジェクト) を表し、リストから選択するためのメソッドとプロパティを提供します。
 
-
注: このインターフェイスは歴史的な理由で HTMLCollection と呼ばれています (現代の DOM より前は、このインターフェイスを実装するコレクションが、アイテムとして HTML 要素しか持てませんでした)。

+> **Note:** **注:** このインターフェイスは歴史的な理由で `HTMLCollection` と呼ばれています (現代の DOM より前は、このインターフェイスを実装するコレクションが、アイテムとして HTML 要素しか持てませんでした)。
 
-
HTML DOM 内の HTMLCollection は生きて (live) います。それらは元になった document が変更された時点で自動的に更新されます。

+HTML DOM 内の `HTMLCollection` は生きて (live) います。それらは元になった document が変更された時点で自動的に更新されます。
 
-
プロパティ

+## プロパティ
 
-

- 
{{domxref("HTMLCollection.length")}} {{readonlyInline}}

- 
collection 内のアイテム数を返します。

-

+- {{domxref("HTMLCollection.length")}} {{readonlyInline}}
+  - : collection 内のアイテム数を返します。
 
-
メソッド

+## メソッド
 
-

- 
{{domxref("HTMLCollection.item()")}}

- 
リスト内の指定された index (先頭はゼロ) 位置にある特定のノードを返します。index が範囲外なら null を返します。

- 
これは collection[i] のアクセスの代替手段です (こちらは i が範囲外の場合は undefined を返します)。これは主に、 JavaScript 以外の DOM 実装で有用です。

- 
{{domxref("HTMLCollection.namedItem()")}}

- 
name で指定した文字列に ID、または代替として name が一致するノードを返します。name とのマッチングは HTML 限定で、参照した要素が name 属性をサポートする場合に限って、最終手段として行われます。指定した名前のノードがない場合は null を返します。

- 
これは collection[name] のアクセスの代替手段です (こちらは name が存在しない場合、 undefined を返します)。これは主に、 JavaScript 以外の DOM 実装で有用です。

-

+- {{domxref("HTMLCollection.item()")}}
+  - : リスト内の指定された `index` (先頭はゼロ) 位置にある特定のノードを返します。`index` が範囲外なら `null` を返します。
+    これは `collection[i]` のアクセスの代替手段です (こちらは `i` が範囲外の場合は `undefined` を返します)。これは主に、 JavaScript 以外の DOM 実装で有用です。
+- {{domxref("HTMLCollection.namedItem()")}}
+  - : `name` で指定した文字列に ID、または代替として name が一致するノードを返します。name とのマッチングは HTML 限定で、参照した要素が `name` 属性をサポートする場合に限って、最終手段として行われます。指定した名前のノードがない場合は `null` を返します。
+    これは `collection[name]` のアクセスの代替手段です (こちらは `name` が存在しない場合、 `undefined` を返します)。これは主に、 JavaScript 以外の DOM 実装で有用です。
 
-
JavaScript での使用法

+## JavaScript での使用法
 
-
HTMLCollection は名前やインデックスでも、自身のメンバーをプロパティとして直接公開します。HTML の ID は : や . を有効な文字として含むことができ、これらはプロパティとしてアクセスするために角括弧構文を使用しなければなりません。現在の HTMLCollections は純粋な数値の ID を認識しません。このような ID は配列へのアクセスと競合しますが、HTML5 では許容しています。

+`HTMLCollection` は名前やインデックスでも、自身のメンバーをプロパティとして直接公開します。HTML の ID は `:` や `.` を有効な文字として含むことができ、これらはプロパティとしてアクセスするために角括弧構文を使用しなければなりません。現在の `HTMLCollections` は純粋な数値の ID を認識しません。このような ID は配列へのアクセスと競合しますが、HTML5 では許容しています。
 
-
例えば、文書内に 1 つの <form> 要素があるものと仮定してください。その id は myForm です。

+例えば、文書内に 1 つの `
` 要素があるものと仮定してください。その `id` は `myForm` です。
 
-
var elem1, elem2;
+```js
+var elem1, elem2;
 
 // document.forms は HTMLCollection
 
@@ -56,34 +53,20 @@ elem2 = document.forms.namedItem("myForm");
 
 alert(elem1 === elem2); // 表示: "true"
 
-elem1 = document.forms["named.item.with.periods"];

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }}

-
-
ブラウザーの互換性

-
-
{{Compat("api.HTMLCollection")}}

-
-
関連情報

-
-
    
- 
  • {{domxref("NodeList")}}
    • 
- 
  • {{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}
    • 
-

+elem1 = document.forms["named.item.with.periods"];
+```
+
+## 仕様書
+
+| 仕様書                                                                               | 状態                             | 備考 |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ---- |
+| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} |      |
+
+## ブラウザーの互換性
+
+{{Compat("api.HTMLCollection")}}
+
+## 関連情報
+
+- {{domxref("NodeList")}}
+- {{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}
diff --git a/files/ja/web/api/htmlcontentelement/index.md b/files/ja/web/api/htmlcontentelement/index.md
index 478454c27a971f..df7617bbe1567f 100644
--- a/files/ja/web/api/htmlcontentelement/index.md
+++ b/files/ja/web/api/htmlcontentelement/index.md
@@ -9,47 +9,35 @@ tags:
   - リファレンス
 translation_of: Web/API/HTMLContentElement
 ---
-
{{ APIRef("Web Components") }}

+{{ APIRef("Web Components") }}
 
-
{{Deprecated_header}}

+{{Deprecated_header}}
 
-
HTMLContentElement インターフェースは {{HTMLElement("content")}} HTML要素を表しており、Shadow DOM で使用されています。

+**`HTMLContentElement`** インターフェースは {{HTMLElement("content")}} HTML 要素を表しており、[Shadow DOM](/ja/docs/Web/Web_Components/Shadow_DOM) で使用されています。
 
-
プロパティ

+## プロパティ
 
-
このインターフェースは {{domxref("HTMLElement")}} のプロパティを継承してます。

+_このインターフェースは {{domxref("HTMLElement")}} のプロパティを継承してます。_
 
-

- 
{{domxref("HTMLContentElement.select")}}

- 
{{ htmlattrxref("select", "content") }} というHTMLの属性を反映している {{domxref("DOMString")}} です。その値は、<content> 要素 の代わりに挿入するコンテンツを選択する、カンマで区切られたCSSセレクタのリストです。

-

+- {{domxref("HTMLContentElement.select")}}
+  - : {{ htmlattrxref("select", "content") }} という HTML の属性を反映している {{domxref("DOMString")}} です。その値は、`` 要素 の代わりに挿入するコンテンツを選択する、カンマで区切られた CSS セレクタのリストです。
 
-
メソッド

+## メソッド
 
-
このインターフェースは {{domxref("HTMLElement")}} のメソッドを継承しています。

+_このインターフェースは {{domxref("HTMLElement")}} のメソッドを継承しています。_
 
-

- 
{{domxref("HTMLContentElement.getDistributedNodes()")}}

- 
この <content> 要素を {{glossary("distributed nodes")}} と関連づける静的な  {{domxref("NodeList")}} を返します。

-

+- {{domxref("HTMLContentElement.getDistributedNodes()")}}
+  - : この `` 要素を {{glossary("distributed nodes")}} と関連づける静的な {{domxref("NodeList")}} を返します。
 
-
仕様

+## 仕様
 
-
この機能はどの標準企画によっても定義されていません。

+この機能はどの標準企画によっても定義されていません。
 
-
ブラウザ互換性

+## ブラウザ互換性
 
+{{Compat("api.HTMLContentElement")}}
 
+## 参照
 
-
{{Compat("api.HTMLContentElement")}}

-
-
参照

-
-
    
- 
  • このインターフェースを実装している {{HTMLElement("content")}} HTML 要素
    • 
- 
  • Shadow DOM
    • 
-

-
-

- 
 

-

+- このインターフェースを実装している {{HTMLElement("content")}} HTML 要素
+- [Shadow DOM](/ja/docs/Web/Web_Components/Shadow_DOM)
diff --git a/files/ja/web/api/htmldataelement/index.md b/files/ja/web/api/htmldataelement/index.md
index ddc2047bbce352..1fb483a5f24e95 100644
--- a/files/ja/web/api/htmldataelement/index.md
+++ b/files/ja/web/api/htmldataelement/index.md
@@ -7,57 +7,34 @@ tags:
   - Reference
 translation_of: Web/API/HTMLDataElement
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLDataElementインターフェースは{{HTMLElement("data")}}要素を扱うための（継承される通常の{{domxref("HTMLElement")}}より高度な）固有の属性を提供します。

+**`HTMLDataElement`** インターフェースは{{HTMLElement("data")}}要素を扱うための（継承される通常の{{domxref("HTMLElement")}}より高度な）固有の属性を提供します。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
属性

+## 属性
 
-
親である{{domxref("HTMLElement")}}から属性を継承しています。

+_親である{{domxref("HTMLElement")}}から属性を継承しています。_
 
-

- 
{{domxref("HTMLDataElement.value")}}

- 
は{{domxref("DOMString")}}であり，{{htmlattrxref("value", "data")}} HTML属性に含まれる機械可読な要素の値を示しています。

-

+- {{domxref("HTMLDataElement.value")}}
+  - : は{{domxref("DOMString")}}であり，{{htmlattrxref("value", "data")}} HTML 属性に含まれる機械可読な要素の値を示しています。
 
-
メソッド

+## メソッド
 
-
固有のメソッドなし。親である{{domxref("HTMLElement")}}からメソッドを継承しています。

+_固有のメソッドなし。親である{{domxref("HTMLElement")}}からメソッドを継承しています。_
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmldataelement", "HTMLDataElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}}{{Spec2('HTML5 W3C')}}

+| 仕様書                                                                                                                   | 状態                             | 備考 |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---- |
+| {{SpecName('HTML WHATWG', "#htmldataelement", "HTMLDataElement")}}                                 | {{Spec2('HTML WHATWG')}} |      |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}} | {{Spec2('HTML5 W3C')}}     |      |
 
-
ブラウザ互換性

+## ブラウザ互換性
 
-

+{{Compat("api.HTMLDataElement")}}
 
+## 関連項目
 
-
{{Compat("api.HTMLDataElement")}}

-

-
-
関連項目

-
-
    
- 
  • 本インターフェースを実装するHTML要素: {{HTMLElement("data")}}.
    • 
-

+- 本インターフェースを実装する HTML 要素: {{HTMLElement("data")}}.
diff --git a/files/ja/web/api/htmldetailselement/index.md b/files/ja/web/api/htmldetailselement/index.md
index 33fb7304d398f2..214f2a770ed6b2 100644
--- a/files/ja/web/api/htmldetailselement/index.md
+++ b/files/ja/web/api/htmldetailselement/index.md
@@ -3,46 +3,34 @@ title: HTMLDetailsElement
 slug: Web/API/HTMLDetailsElement
 translation_of: Web/API/HTMLDetailsElement
 ---
-

-
translation in progress

-

+> **Note:** translation in progress
 
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
The HTMLDetailsElement interface provides special properties (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating {{HTMLElement("details")}} elements.

+The **`HTMLDetailsElement`** interface provides special properties (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating {{HTMLElement("details")}} elements.
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
Properties

+## Properties
 
-
Inherits properties from its parent, {{domxref("HTMLElement")}}.

+_Inherits properties from its parent, {{domxref("HTMLElement")}}._
 
-

- 
{{domxref("HTMLDetailsElement.open")}}

- 
Is a {{domxref("boolean")}} reflecting the {{htmlattrxref("open", "details")}} HTML attribute, indicating whether or not the element’s contents (not counting the {{HTMLElement("summary")}}) is to be shown to the user.

-

+- {{domxref("HTMLDetailsElement.open")}}
+  - : Is a {{domxref("boolean")}} reflecting the {{htmlattrxref("open", "details")}} HTML attribute, indicating whether or not the element’s contents (not counting the {{HTMLElement("summary")}}) is to be shown to the user.
 
-
Methods

+## Methods
 
-
No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.

+_No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}._
 
-
Specifications

+## Specifications
 
-
+- [HTML Living Standard](https://html.spec.whatwg.org/multipage/interactive-elements.html#htmldetailselement)
+- [HTML 5.2 (W3C Proposed Recommendation)](https://www.w3.org/TR/html52/interactive-elements.html#htmldetailselement)
 
-
Browser compatibility

+## Browser compatibility
 
-

+{{Compat("api.HTMLDetailsElement")}}
 
+## See also
 
-
{{Compat("api.HTMLDetailsElement")}}

-

-
-
See also

-
-
    
- 
  • The HTML element implementing this interface: {{HTMLElement("details")}}
    • 
-

+- The HTML element implementing this interface: {{HTMLElement("details")}}
diff --git a/files/ja/web/api/htmldetailselement/toggle_event/index.md b/files/ja/web/api/htmldetailselement/toggle_event/index.md
index 6a3c8b6e410bbc..c6977db23be0cb 100644
--- a/files/ja/web/api/htmldetailselement/toggle_event/index.md
+++ b/files/ja/web/api/htmldetailselement/toggle_event/index.md
@@ -11,66 +11,72 @@ tags:
   - イベント
 translation_of: Web/API/HTMLDetailsElement/toggle_event
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
toggle イベントは、 {{HtmlElement("details")}} 要素の open/closed の状態がトグル切り替えされたときに発生します。

+**`toggle`** イベントは、 {{HtmlElement("details")}} 要素の `open`/`closed` の状態がトグル切り替えされたときに発生します。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティなし
既定のアクション{{HtmlElement("details")}} 要素の open の状態をトグル切り替えする。
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティなし
既定のアクション
+        {{HtmlElement("details")}} 要素の
+        open の状態をトグル切り替えする。
+      

 

 
-
例

+## 例
 
-
この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。

+この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。
 
-
HTML

+### HTML
 
-
<aside id="log">
-  <b>Open chapters:</b>
-  <div data-id="ch1" hidden>I</div>
-  <div data-id="ch2" hidden>II</div>
-  <div data-id="ch3" hidden>III</div>
-</aside>
-<section id="summaries">
-  <b>Chapter summaries:</b>
-  <details id="ch1">
-    <summary>Chapter I</summary>
+```html
+
+

+  Chapter summaries:
+  

+    Chapter I
     Philosophy reproves Boethius for the foolishness of his complaints against Fortune. Her very nature is caprice.
-  </details>
-  <details id="ch2">
-    <summary>Chapter II</summary>
+  

+  

+    Chapter II
     Philosophy in Fortune's name replies to Boethius' reproaches, and proves that the gifts of Fortune are hers to give and to take away.
-  </details>
-  <details id="ch3">
-    <summary>Chapter III</summary>
+  

+  

+    Chapter III
     Boethius falls back upon his present sense of misery. Philosophy reminds him of the brilliancy of his former fortunes.
-  </details>
-</section>

+  
+
+```
 
-
CSS

+### CSS
 
-
body {
+```css
+body {
   display: flex;
   flex-direction: row-reverse;
 }
@@ -82,43 +88,33 @@ translation_of: Web/API/HTMLDetailsElement/toggle_event
 
 #summaries {
   flex-grow: 1;
-}

+}
+```
 
-
JavaScript

+### JavaScript
 
-
function logItem(e) {
+```js
+function logItem(e) {
   const item = document.querySelector(`[data-id=${e.target.id}]`);
   item.toggleAttribute('hidden');
 }
 
 const chapters = document.querySelectorAll('details');
-chapters.forEach((chapter) => {
+chapters.forEach((chapter) => {
   chapter.addEventListener('toggle', logItem);
-});

-
-
結果

-
-
{{EmbedLiveSample("Examples", 700, 200)}}

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', 'indices.html#event-toggle', 'toggle event')}}{{Spec2("HTML WHATWG")}}

+});
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples", 700, 200)}}
+
+## 仕様書
+
+| 仕様書                                                                                           | 状態                             | 備考 |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-toggle', 'toggle event')}} | {{Spec2("HTML WHATWG")}} |      |
 
-
ブラウザーの対応

+## ブラウザーの対応
 
-
{{Compat("api.HTMLDetailsElement.toggle_event")}}

+{{Compat("api.HTMLDetailsElement.toggle_event")}}
diff --git a/files/ja/web/api/htmldialogelement/cancel_event/index.md b/files/ja/web/api/htmldialogelement/cancel_event/index.md
index 93a8ef6824a631..28f9b5040aa769 100644
--- a/files/ja/web/api/htmldialogelement/cancel_event/index.md
+++ b/files/ja/web/api/htmldialogelement/cancel_event/index.md
@@ -12,66 +12,68 @@ tags:
   - イベント
 translation_of: Web/API/HTMLDialogElement/cancel_event
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
cancel イベントは、ユーザーが現在開いているダイアログを閉じたいと操作したときに {{HTMLElement("dialog")}} に発生します。例えば、ユーザーがブラウザーの UI の中で Esc キーを押したり、「ダイアログを閉じる」ボタンをクリックしたりしたときにブラウザーがこのイベントを発生させることがあります。

+**`cancel`** イベントは、ユーザーが現在開いているダイアログを閉じたいと操作したときに {{HTMLElement("dialog")}} に発生します。例えば、ユーザーがブラウザーの UI の中で Esc キーを押したり、「ダイアログを閉じる」ボタンをクリックしたりしたときにブラウザーがこのイベントを発生させることがあります。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
バブリングなし
キャンセル可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/oncancel", "oncancel")}}
バブリングなし
キャンセル可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ
+        {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}
+      

 

 
-
例

+## 例
 
-
ライブ例

+### ライブ例
 
-
HTML

+#### HTML
 
-
<dialog class="example-dialog">
-    <button class="close" type="reset">Close</button>
-</dialog>
+```html
+
+    
+
 
-<button class="open-dialog">Open dialog</button>
+
 
-<div class="result"></div>

+

+```
 
-
+```
 
-
JS

+#### JS
 
-
const result = document.querySelector('.result');
+```js
+const result = document.querySelector('.result');
 
 const dialog = document.querySelector('.example-dialog');
 
-dialog.addEventListener('cancel', (event) => {
+dialog.addEventListener('cancel', (event) => {
   result.textContent = 'dialog was canceled';
 });
 
 const openDialog = document.querySelector('.open-dialog');
-openDialog.addEventListener('click', () => {
+openDialog.addEventListener('click', () => {
   if (typeof dialog.showModal === 'function') {
       dialog.showModal();
       result.textContent = '';
@@ -81,40 +83,27 @@ openDialog.addEventListener('click', () => {
 });
 
 const closeButton = document.querySelector('.close');
-closeButton.addEventListener('click', () => {
+closeButton.addEventListener('click', () => {
     dialog.close();
 });
-

-
-
結果

-
-
{{ EmbedLiveSample('Live_example', '100%', '100px') }}

-
-
仕様書

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
- 
-
仕様書状態
{{ SpecName('HTML WHATWG', 'indices.html#event-cancel', 'cancel') }}{{Spec2('HTML WHATWG')}}

+```
+
+#### 結果
+
+{{ EmbedLiveSample('Live_example', '100%', '100px') }}
+
+## 仕様書
+
+| 仕様書                                                                                       | 状態                             |
+| -------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{ SpecName('HTML WHATWG', 'indices.html#event-cancel', 'cancel') }} | {{Spec2('HTML WHATWG')}} |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat("api.HTMLDialogElement.cancel_event")}}

+{{Compat("api.HTMLDialogElement.cancel_event")}}
 
-
関連情報

+## 関連情報
 
-
    
- 
  • {{domxref("GlobalEventHandlers.oncancel")}}
    • 
- 
  • HTML {{HTMLElement("dialog")}} element
    • 
- 
  • {{domxref("HTMLDialogElement/close_event", "close")}}
    • 
-

+- {{domxref("GlobalEventHandlers.oncancel")}}
+- HTML {{HTMLElement("dialog")}} element
+- {{domxref("HTMLDialogElement/close_event", "close")}}
diff --git a/files/ja/web/api/htmldialogelement/close_event/index.md b/files/ja/web/api/htmldialogelement/close_event/index.md
index 884bb287e6cf62..4cc5f21c43137c 100644
--- a/files/ja/web/api/htmldialogelement/close_event/index.md
+++ b/files/ja/web/api/htmldialogelement/close_event/index.md
@@ -14,56 +14,38 @@ tags:
 translation_of: Web/API/GlobalEventHandlers/onclose
 original_slug: Web/API/GlobalEventHandlers/onclose
 ---
-
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}

+{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
 
-
onclose は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、ダイアログ要素に送信された {{event("close")}} イベントを処理するための {{domxref("EventHandler", "イベントハンドラー")}} です。

+**`onclose`** は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、ダイアログ要素に送信された {{event("close")}} イベントを処理するための {{domxref("EventHandler", "イベントハンドラー")}} です。
 
-
close イベントは、ユーザーが <dialog> を閉じたときに発生します。

+`close` イベントは、ユーザーが `` を閉じたときに発生します。
 
-

-
注: ウィンドウのクローズを処理するには、{{domxref("WindowEventHandlers.onbeforeunload", "onbeforeunload")}} または {{domxref("WindowEventHandlers.onunload", "onunload")}} を使用します。

-

+> **Note:** **注:** ウィンドウのクローズを処理するには、{{domxref("WindowEventHandlers.onbeforeunload", "onbeforeunload")}} または {{domxref("WindowEventHandlers.onunload", "onunload")}} を使用します。
 
-
構文

+## 構文
 
-
target.onclose = functionRef;
-

+```
+target.onclose = functionRef;
+```
 
-
値

+### 値
 
-
functionRef は、関数名または関数式です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。

+`functionRef` は、関数名または[関数式](/ja/docs/Web/JavaScript/Reference/Operators/function)です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。
 
-
一度に1つのオブジェクトに割り当てることができる onclose ハンドラーは1つだけです。代わりに、より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。

+一度に 1 つのオブジェクトに割り当てることができる `onclose` ハンドラーは 1 つだけです。代わりに、より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}}

+| 仕様書                                                                                           | 状態                             | 備考 |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} |      |
 
-
ブラウザの互換性

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

+{{Compat("api.GlobalEventHandlers.onclose")}}
 
+## 関連情報
 
-
{{Compat("api.GlobalEventHandlers.onclose")}}

-

-
-
関連情報

-
-
    
- 
  • {{event("close")}} event
    • 
- 
  • HTML {{HTMLElement("dialog")}} element
    • 
- 
  • Related event handler: {{domxref("GlobalEventHandlers.oncancel")}}
    • 
-

+- {{event("close")}} event
+- HTML {{HTMLElement("dialog")}} element
+- Related event handler: {{domxref("GlobalEventHandlers.oncancel")}}
diff --git a/files/ja/web/api/htmldialogelement/index.md b/files/ja/web/api/htmldialogelement/index.md
index 699f85340a8069..582e864076cf68 100644
--- a/files/ja/web/api/htmldialogelement/index.md
+++ b/files/ja/web/api/htmldialogelement/index.md
@@ -11,72 +11,67 @@ tags:
   - インターフェイス
 translation_of: Web/API/HTMLDialogElement
 ---
-
{{APIRef("HTML DOM")}}{{SeeCompatTable}}

-
-
HTMLDialogElement インターフェイスは {{HTMLElement("dialog")}} 要素を操作するメソッドを提供します。 {{domxref("HTMLElement")}} インターフェースからプロパティとメソッドを継承しています。

-
-
{{InheritanceDiagram(600, 80)}}

-
-
プロパティ

-
-
親である {{domxref("HTMLElement")}} からプロパティを継承しています。

-
-

- 
{{domxref("HTMLDialogElement.open")}}

- 
{{domxref("Boolean")}} で、ダイアログが対話可能であることを示す {{htmlattrxref("open", "dialog")}} 属性の値を反映します。

- 
{{domxref("HTMLDialogElement.returnValue")}}

- 
{{domxref("DOMString")}} で、ダイアログの返値を設定させたり返したりします。

-

-
-
メソッド

-
-
親である {{domxref("HTMLElement")}} からメソッドを継承しています。

-
-

- 
{{domxref("HTMLDialogElement.close()")}}

- 
ダイアログを閉じます。任意で引数として {{domxref("DOMString")}} を渡すことができ、これがダイアログの returnValue を更新します。

- 
{{domxref("HTMLDialogElement.show()")}}

- 
ダイアログをモードレスで開きます。すなわち、その間のダイアログの外のコンテンツとの対話ができます。

- 
{{domxref("HTMLDialogElement.showModal()")}}

- 
ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外との対話はブロックされます。

-

-
-
イベント

-
-

- 
{{domxref("HTMLDialogElement/close_event", "close")}}

- 
ダイアログが閉じられたときに発生します。

- {{domxref("GlobalEventHandlers/onclose", "onclose")}} プロパティからも利用できます。

-

-
-
例

-
-
以下の例は単純なボタンを表示し、クリックすると、 {{htmlelement("dialog")}} でフォームを {{domxref("HTMLDialogElement.showModal()")}} 関数によって開きます。そこから Cancel ボタンを押して ({{domxref("HTMLDialogElement.close()")}} 関数で) ダイアログを閉じるか、 submit ボタンでフォームを送信するかします。

-
-
  <!-- Simple pop-up dialog box, containing a form -->
-  <dialog id="favDialog">
-    <form method="dialog">
-      <section>
-        <p><label for="favAnimal">Favorite animal:</label>
-        <select id="favAnimal" name="favAnimal">
-          <option></option>
-          <option>Brine shrimp</option>
-          <option>Red panda</option>
-          <option>Spider monkey</option>
-        </select></p>
-      </section>
-      <menu>
-        <button id="cancel" type="reset">Cancel</button>
-        <button type="submit">Confirm</button>
-      </menu>
-    </form>
-  </dialog>
-
-  <menu>
-    <button id="updateDetails">Update details</button>
-  </menu>
-
-  <script>
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+
+**`HTMLDialogElement`** インターフェイスは {{HTMLElement("dialog")}} 要素を操作するメソッドを提供します。 {{domxref("HTMLElement")}} インターフェースからプロパティとメソッドを継承しています。
+
+{{InheritanceDiagram(600, 80)}}
+
+## プロパティ
+
+_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
+
+- {{domxref("HTMLDialogElement.open")}}
+  - : {{domxref("Boolean")}} で、ダイアログが対話可能であることを示す {{htmlattrxref("open", "dialog")}} 属性の値を反映します。
+- {{domxref("HTMLDialogElement.returnValue")}}
+  - : {{domxref("DOMString")}} で、ダイアログの返値を設定させたり返したりします。
+
+## メソッド
+
+_親である {{domxref("HTMLElement")}} からメソッドを継承しています。_
+
+- {{domxref("HTMLDialogElement.close()")}}
+  - : ダイアログを閉じます。任意で引数として {{domxref("DOMString")}} を渡すことができ、これがダイアログの `returnValue` を更新します。
+- {{domxref("HTMLDialogElement.show()")}}
+  - : ダイアログをモードレスで開きます。すなわち、その間のダイアログの外のコンテンツとの対話ができます。
+- {{domxref("HTMLDialogElement.showModal()")}}
+  - : ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外との対話はブロックされます。
+
+## イベント
+
+- {{domxref("HTMLDialogElement/close_event", "close")}}
+  - : ダイアログが閉じられたときに発生します。
+    {{domxref("GlobalEventHandlers/onclose", "onclose")}} プロパティからも利用できます。
+
+## 例
+
+以下の例は単純なボタンを表示し、クリックすると、 {{htmlelement("dialog")}} でフォームを {{domxref("HTMLDialogElement.showModal()")}} 関数によって開きます。そこから _Cancel_ ボタンを押して ({{domxref("HTMLDialogElement.close()")}} 関数で) ダイアログを閉じるか、 submit ボタンでフォームを送信するかします。
+
+```html
+  
+  
+    
+      

+        

+        

+      

+      
+        
+        
+      
+    
+  
+
+  
+    
+  
+
+  
+```
+
+> **Note:** **メモ**: この例は GitHub 上の [htmldialogelement-basic](https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html) ([ライブで表示](https://mdn.github.io/dom-examples/htmldialogelement-basic/)) として見つけることができます。
+
+## 仕様書
+
+| 仕様書                                                                                                                   | 状態                             | 備考     |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}                             | {{Spec2('HTML WHATWG')}} |          |
+| {{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}} | {{Spec2('HTML5.1')}}     | 初回定義 |
+
+## ブラウザーの互換性
+
+{{Compat("api.HTMLDialogElement")}}
+
+## 関連情報
+
+- このインターフェイスを実装している HTML 要素: {{ HTMLElement("dialog") }}
diff --git a/files/ja/web/api/htmldocument/index.md b/files/ja/web/api/htmldocument/index.md
index 684f45ff27baa6..9f6e5857cadb1f 100644
--- a/files/ja/web/api/htmldocument/index.md
+++ b/files/ja/web/api/htmldocument/index.md
@@ -13,36 +13,21 @@ tags:
   - Reference
 translation_of: Web/API/HTMLDocument
 ---
-
{{APIRef("HTML DOM")}}{{deprecated_header}}

+{{APIRef("HTML DOM")}}{{deprecated_header}}
 
-
HTMLDocument は、document オブジェクトに HTML 特有の機能を追加するために、{{domxref("Document")}} インターフェイスを拡張する抽象的なインターフェイスです。これは HTML 文書のルートを表し、その中に DOM の階層全体が存在しています。

+**`HTMLDocument`** は、document オブジェクトに HTML 特有の機能を追加するために、{{domxref("Document")}} インターフェイスを拡張する抽象的なインターフェイスです。これは HTML 文書のルートを表し、その中に [DOM](/ja/docs/Web/API/Document_Object_Model) の階層全体が存在しています。
 
-
注記: HTMLDocument は非推奨になり、そのメンバーは {{domxref("Document")}} インターフェイスの直接のメンバーとして指定されています。コードの根本的な性質のためにブラウザーではこの移行に時間がかかっており、個々のメソッドやプロパティは、ブラウザーごとに異なるタイミングで移動しています。

+**注記:** `HTMLDocument` は非推奨になり、そのメンバーは {{domxref("Document")}} インターフェイスの直接のメンバーとして指定されています。コードの根本的な性質のためにブラウザーではこの移行に時間がかかっており、個々のメソッドやプロパティは、ブラウザーごとに異なるタイミングで移動しています。
 
-
HTMLDocument のメンバーは、{{DOMxRef("Document")}} インターフェイスの文書で見つけることができます。

+`HTMLDocument` のメンバーは、{{DOMxRef("Document")}} インターフェイスの文書で見つけることができます。
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
{{SpecName("HTML WHATWG", "#htmldocument", "HTMLDocument")}}{{Spec2("HTML WHATWG")}}HTMLDocument インターフェイスを、{{DOMxRef("Document")}} の拡張に転換。
{{SpecName("DOM2 HTML", "html.html#ID-26809268", "HTMLDocument")}}{{Spec2('DOM2 HTML')}}DOM 1 の後継
{{SpecName("DOM1", "level-one-html.html#ID-26809268", "HTMLDocument")}}{{Spec2("DOM1")}}初期定義

+| {{SpecName("HTML WHATWG", "#htmldocument", "HTMLDocument")}}                 | {{Spec2("HTML WHATWG")}} | `HTMLDocument` インターフェイスを、{{DOMxRef("Document")}} の拡張に転換。 |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------- |
+| {{SpecName("DOM2 HTML", "html.html#ID-26809268", "HTMLDocument")}}         | {{Spec2('DOM2 HTML')}}     | DOM 1 の後継                                                                       |
+| {{SpecName("DOM1", "level-one-html.html#ID-26809268", "HTMLDocument")}} | {{Spec2("DOM1")}}         | 初期定義                                                                           |
 
-
ブラウザー実装状況

+## ブラウザー実装状況
 
-
{{Compat("api.HTMLDocument")}}

+{{Compat("api.HTMLDocument")}}
diff --git a/files/ja/web/api/htmlfieldsetelement/index.md b/files/ja/web/api/htmlfieldsetelement/index.md
index 5cf5e0fdadae20..6cadf0500a7c54 100644
--- a/files/ja/web/api/htmlfieldsetelement/index.md
+++ b/files/ja/web/api/htmlfieldsetelement/index.md
@@ -9,95 +9,59 @@ tags:
   - インターフェイス
 translation_of: Web/API/HTMLFieldSetElement
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLFieldSetElement インターフェイスは、 ({{domxref("HTMLElement")}} から継承したものより詳細に) {{ HTMLElement("fieldset") }} 要素のレイアウトと表示を操作するための特別なプロパティやメソッドを提供します。

+**`HTMLFieldSetElement`** インターフェイスは、 ({{domxref("HTMLElement")}} から継承したものより詳細に) {{ HTMLElement("fieldset") }} 要素のレイアウトと表示を操作するための特別なプロパティやメソッドを提供します。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
親である {{domxref("HTMLElement")}} からプロパティを継承しています。

+_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
 
-

- 
{{domxref("HTMLFieldSetElement.disabled")}}

- 
 {{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("disabled", "fieldset")}} 属性を反映し、ユーザーがこのコントロールと対話できるかどうかを示します。

- 
{{domxref("HTMLFieldSetElement.elements")}}{{ReadOnlyInline}}

- 
このフィールドセットに所属する要素です。このプロパティの型は、ブラウザーが実装している仕様書のバージョンによって異なります。

- 
{{domxref("HTMLFieldSetElement.form")}}{{ReadOnlyInline}}

- 
 {{domxref("HTMLFormControlsCollection")}} または {{domxref("HTMLCollection")}} で、この要素がフォーム内にあった場合、含んでいるフォーム要素を参照します。

- このフィールドセットがフォーム要素の子孫でなかった場合は、この属性は関連付けられた同じ文書内の何れかのフォームになるか、一致するものがなければ null になります。

- 
{{domxref("HTMLFieldSetElement.name")}}

- 
 {{domxref("DOMString")}} で、 HTML の {{htmlattrxref("name", "fieldset")}} 属性を反映し、フォームを送信するときに使われるフィールドセットの名前が入ります。

- 
{{domxref("HTMLFieldSetElement.type")}}{{ReadOnlyInline}}

- 
 {{domxref("DOMString")}} で "fieldset" です。

- 
{{domxref("HTMLFieldSetElement.validationMessage")}}

- 
 {{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の候補にならない場合 (willValidate が false の場合) や、制約を満たしている場合は空文字列になります。

- 
{{domxref("HTMLFieldSetElement.validity")}}

- 
 {{domxref("ValidityState")}} で、この要素がある妥当性の状態を表します。

- 
{{domxref("HTMLFieldSetElement.willValidate")}}

- 
 {{jsxref("Boolean")}} で false です。 {{HTMLElement("fieldset")}} オブジェクトは制約検証の対象になることがないからです。

-

+- {{domxref("HTMLFieldSetElement.disabled")}}
+  - : {{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("disabled", "fieldset")}} 属性を反映し、ユーザーがこのコントロールと対話できるかどうかを示します。
+- {{domxref("HTMLFieldSetElement.elements")}}{{ReadOnlyInline}}
+  - : このフィールドセットに所属する要素です。このプロパティの型は、ブラウザーが実装している仕様書のバージョンによって異なります。
+- {{domxref("HTMLFieldSetElement.form")}}{{ReadOnlyInline}}
+  - : {{domxref("HTMLFormControlsCollection")}} または {{domxref("HTMLCollection")}} で、この要素がフォーム内にあった場合、含んでいるフォーム要素を参照します。
+    このフィールドセットがフォーム要素の子孫でなかった場合は、この属性は関連付けられた同じ文書内の何れかのフォームになるか、一致するものがなければ `null` になります。
+- {{domxref("HTMLFieldSetElement.name")}}
+  - : {{domxref("DOMString")}} で、 HTML の {{htmlattrxref("name", "fieldset")}} 属性を反映し、フォームを送信するときに使われるフィールドセットの名前が入ります。
+- {{domxref("HTMLFieldSetElement.type")}}{{ReadOnlyInline}}
+  - : {{domxref("DOMString")}} で "`fieldset`" です。
+- {{domxref("HTMLFieldSetElement.validationMessage")}}
+  - : {{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の候補にならない場合 (`willValidate` が `false` の場合) や、制約を満たしている場合は空文字列になります。
+- {{domxref("HTMLFieldSetElement.validity")}}
+  - : {{domxref("ValidityState")}} で、この要素がある妥当性の状態を表します。
+- {{domxref("HTMLFieldSetElement.willValidate")}}
+  - : {{jsxref("Boolean")}} で `false` です。 {{HTMLElement("fieldset")}} オブジェクトは制約検証の対象になることがないからです。
 
-
メソッド

+## メソッド
 
-
親である {{domxref("HTMLElement")}} からメソッドを継承しています。

+_親である {{domxref("HTMLElement")}} からメソッドを継承しています。_
 
-

- 
{{domxref("HTMLFieldSetElement.checkValidity()")}}

- 
常に true を返します。 {{HTMLElement("fieldset")}} オブジェクトは制約検証の対象になることがないためです。

- 
{{domxref("HTMLFieldSetElement.reportValidity()")}}

- 
常に true を返します。 {{HTMLElement("fieldset")}} オブジェクトは制約検証の対象になることがないためです。

- 
{{domxref("HTMLFieldSetElement.setCustomValidity()")}}

- 
独自の検証メッセージをフィールドセットに設定します。メッセージが空文字列でなければ、フィールドセットには独自の検証エラーが発生している状態であり、検証に合格していません。

-

+- {{domxref("HTMLFieldSetElement.checkValidity()")}}
+  - : 常に `true` を返します。 {{HTMLElement("fieldset")}} オブジェクトは制約検証の対象になることがないためです。
+- {{domxref("HTMLFieldSetElement.reportValidity()")}}
+  - : 常に `true` を返します。 {{HTMLElement("fieldset")}} オブジェクトは制約検証の対象になることがないためです。
+- {{domxref("HTMLFieldSetElement.setCustomValidity()")}}
+  - : 独自の検証メッセージをフィールドセットに設定します。メッセージが空文字列でなければ、フィールドセットには独自の検証エラーが発生している状態であり、検証に合格していません。
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmlfieldsetelement", "HTMLFieldSetElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "forms.html#the-fieldset-element", "HTMLFieldSetElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "forms.html#the-fieldset-element", "HTMLFieldSetElement")}}{{Spec2('HTML5 W3C')}}disabled, elements, name, type, valdiationMessage, validity, and willValidate プロパティが追加された。

-    checkValidity(), setCustomValidity() メソッドが追加された。
{{SpecName('DOM2 HTML', 'html.html#ID-7365882', 'HTMLFieldSetElement')}}{{Spec2('DOM2 HTML')}}変更なし
{{SpecName('DOM1', 'level-one-html.html#ID-7365882', 'HTMLFieldSetElement')}}{{Spec2('DOM1')}}初回定義

+| 仕様書                                                                                                           | 状態                             | 備考                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#htmlfieldsetelement", "HTMLFieldSetElement")}}             | {{Spec2('HTML WHATWG')}} |                                                                                                                                                                                      |
+| {{SpecName('HTML5.1', "forms.html#the-fieldset-element", "HTMLFieldSetElement")}}     | {{Spec2('HTML5.1')}}     |                                                                                                                                                                                      |
+| {{SpecName('HTML5 W3C', "forms.html#the-fieldset-element", "HTMLFieldSetElement")}} | {{Spec2('HTML5 W3C')}}     | `disabled`, `elements`, `name`, `type`, `valdiationMessage`, `validity`, and `willValidate` プロパティが追加された。 `checkValidity()`, `setCustomValidity()` メソッドが追加された。 |
+| {{SpecName('DOM2 HTML', 'html.html#ID-7365882', 'HTMLFieldSetElement')}}                 | {{Spec2('DOM2 HTML')}}     | 変更なし                                                                                                                                                                             |
+| {{SpecName('DOM1', 'level-one-html.html#ID-7365882', 'HTMLFieldSetElement')}}         | {{Spec2('DOM1')}}         | 初回定義                                                                                                                                                                             |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat("api.HTMLFieldSetElement")}}

+{{Compat("api.HTMLFieldSetElement")}}
 
-
関連情報

+## 関連情報
 
-
    
- 
  • このインターフェイスを実装している HTML 要素: {{ HTMLElement("fieldset") }}
    • 
-

+- このインターフェイスを実装している HTML 要素: {{ HTMLElement("fieldset") }}
diff --git a/files/ja/web/api/htmlformcontrolscollection/index.md b/files/ja/web/api/htmlformcontrolscollection/index.md
index dd931879be3024..b427a15e151a40 100644
--- a/files/ja/web/api/htmlformcontrolscollection/index.md
+++ b/files/ja/web/api/htmlformcontrolscollection/index.md
@@ -6,28 +6,18 @@ tags:
   - DOM Reference
 translation_of: Web/API/HTMLFormControlsCollection
 ---
-

- {{ApiRef}}

-
HTMLFormControlsCollection は、HTML フォームコントロール要素のコレクションを表すインタフェースです。 {{domxref("HTMLCollection")}} から継承されるプロパティとメソッドの他に、追加メソッドがひとつ提供されます。

-
このインタフェースは {{domxref("HTMLFormElement")}} インタフェースの {{domxref("HTMLFormElement.elements","elements")}} プロパティ及び HTMLFieldSetElement インタフェースの elements プロパティで用いられます。

-
メソッド

-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
メソッド名 & 引数戻り値説明
namedItem ({{domxref("DOMString")}} name 内)object指定した name と一致する name 属性または id 属性を持つコレクション内のノードまたはノードリストを取得。一致するノードが存在しない場合は null が取得される。

-
仕様書

-
+{{ApiRef}}
+
+HTMLFormControlsCollection は、HTML フォームコントロール要素のコレクションを表すインタフェースです。 {{domxref("HTMLCollection")}} から継承されるプロパティとメソッドの他に、追加メソッドがひとつ提供されます。
+
+このインタフェースは {{domxref("HTMLFormElement")}} インタフェースの {{domxref("HTMLFormElement.elements","elements")}} プロパティ及び `HTMLFieldSetElement` インタフェースの `elements` プロパティで用いられます。
+
+## メソッド
+
+| メソッド名 & 引数                                      | 戻り値   | 説明                                                                                                                                                             |
+| ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `namedItem` ({{domxref("DOMString")}} name 内) | `object` | 指定した name と一致する `name` 属性または `id` 属性を持つコレクション内のノードまたはノードリストを取得。一致するノードが存在しない場合は `null` が取得される。 |
+
+## 仕様書
+
+- [HTML 5, Section 2.7.2.3 HTMLFormControlsCollection](http://www.w3.org/TR/html5/common-dom-interfaces.html#htmlformcontrolscollection)
diff --git a/files/ja/web/api/htmlinputelement/select_event/index.md b/files/ja/web/api/htmlinputelement/select_event/index.md
index ccd0cc5a0125ec..42cb8eee7537d8 100644
--- a/files/ja/web/api/htmlinputelement/select_event/index.md
+++ b/files/ja/web/api/htmlinputelement/select_event/index.md
@@ -12,74 +12,75 @@ tags:
 translation_of: Web/API/Element/select_event
 original_slug: Web/API/Element/select_event
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
select イベントは、いくらかのテキストが選択されたときに発生します。

+**`select`** イベントは、いくらかのテキストが選択されたときに発生します。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
バブリングあり
キャンセル不可
インターフェイスユーザーインターフェイスから作成された場合は {{domxref("UIEvent")}}、それ以外ならば {{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onselect", "onselect")}}
バブリングあり
キャンセル不可
インターフェイス
+        ユーザーインターフェイスから作成された場合は
+        {{domxref("UIEvent")}}、それ以外ならば
+        {{domxref("Event")}}
+      
イベントハンドラープロパティ
+        {{domxref("GlobalEventHandlers.onselect", "onselect")}}
+      

 

 
-
このイベントはすべての言語のすべての要素で利用できる訳ではありません。例えば、 HTML では、 select イベントはフォームの {{HtmlElement('input/text', '<input type="text">')}} および {{HtmlElement("textarea")}} 要素からのみ発生します。

+このイベントはすべての言語のすべての要素で利用できる訳ではありません。例えば、 HTML では、 `select` イベントはフォームの `{{HtmlElement('input/text', '<input type="text">')}}` および {{HtmlElement("textarea")}} 要素からのみ発生します。
 
-
例

+## 例
 
-
選択範囲をログ出力

+### 選択範囲をログ出力
 
-
<input value="この要素のテキストの一部を選択してみてください。">
-<p id="log"></p>

+```html
+
+

+```
 
-
function logSelection(event) {
+```js
+function logSelection(event) {
   const log = document.getElementById('log');
   const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
   log.textContent = `You selected: ${selection}`;
 }
 
 const input = document.querySelector('input');
-input.addEventListener('select', logSelection);

+input.addEventListener('select', logSelection);
+```
 
-
{{EmbedLiveSample("Selection_logger")}}

+{{EmbedLiveSample("Selection_logger")}}
 
-
onselect による同等の処理

+### onselect による同等の処理
 
-
イベントハンドラーを {{domxref("GlobalEventHandlers.onselect", "onselect")}} プロパティで設定することもできます。

+イベントハンドラーを {{domxref("GlobalEventHandlers.onselect", "onselect")}} プロパティで設定することもできます。
 
-
input.onselect = logSelection;

+```js
+input.onselect = logSelection;
+```
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
- 
-
仕様書状態
{{SpecName('UI Events', '#event-type-select', 'select')}}{{Spec2('UI Events')}}

+| 仕様書                                                                       | 状態                         |
+| ---------------------------------------------------------------------------- | ---------------------------- |
+| {{SpecName('UI Events', '#event-type-select', 'select')}} | {{Spec2('UI Events')}} |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat("api.Element.select_event")}}

+{{Compat("api.Element.select_event")}}
diff --git a/files/ja/web/api/htmlkeygenelement/index.md b/files/ja/web/api/htmlkeygenelement/index.md
index 3c5ce39f228520..58d5067f8394e4 100644
--- a/files/ja/web/api/htmlkeygenelement/index.md
+++ b/files/ja/web/api/htmlkeygenelement/index.md
@@ -11,133 +11,39 @@ tags:
   - Reference
 translation_of: Web/API/HTMLKeygenElement
 ---
-
{{ APIRef("HTML DOM") }}

-
-

-
ノート：このページでは、仕様としての Keygen 要素インターフェースを説明しており、現在 Gecko に実装されているものではありません。詳細と状態については、{{Bug(101019)}} を見てください。

-

-
-
{{HTMLElement("keygen")}} 要素は、keygen 要素のレイアウトやプレゼンテーションを操作するための（継承によって使用できる通常の {{domxref("element")}} オブジェクトインターフェースを越えた）特殊なプロパティとメソッドを提供する HTMLKeygenElement インターフェースを公開します。

-
-
プロパティ

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
名前型説明
autofocusBoolean{{ htmlattrxref("autofocus", "keygen") }} HTML 属性の反映です。ページがロードされたとき、フォームコントローが input にフォーカスされているべきことを表します。
challengeDOMString{{ htmlattrxref("challenge", "keygen") }} HTML 属性の繁栄です。送信されたキーにパッケージされた challenge 文字列を含みます。
disabledBoolean{{ htmlattrxref("disabled", "keygen") }} HTML 属性の繁栄です。コントロールが操作できないことを示します。
formreadonly HTMLFormElementコントロールの form オーナーを表します。定義されていた場合、 {{ htmlattrxref("form", "keygen") }} HTML 属性を反映します。
keytypeDOMString{{ htmlattrxref("keytype", "keygen") }} HTML 属性を反映します。使用されるキーの種類を含みます。
labels {{ unimplemented_inline(556743) }}readonly NodeListkeygen 要素に関連する label 要素のリストです。
nameDOMString{{ htmlattrxref("name", "keygen") }} HTML 属性を反映します。フォームデータと送信されるコントロールの名前を含みます。
typereadonly DOMStringkeygen の値です。
validationMessagereadonly DOMString（もしあれば） コントロールが満たさない制約検証を表示するためのローカライズされたメッセージです。コントロールが制約検証の対象ではない場合（willValidate が false）や制約を満たしている場合、空文字です。
validityreadonly ValidityStateこの要素の有効性です。
willValidateBooleankeygen オブジェクトは決して制約検証の候補にならないため、常に false を返します。

-
-
メソッド

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
名前と引数戻り値説明
checkValidity()Booleankeygen オブジェクトは決して制約検証の候補にならないため、常に true を返します。
setCustomValidity(in DOMString error)void要素にカスタム検証メッセージを設定します。このメッセージが空文字ではなく、要素がカスタム検証エラーを扱えない場合、検証は行われません。

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('HTML WHATWG', "forms.html#the-keygen-element", "HTMLKeygenElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} から変更なし。
{{SpecName('HTML5.1', "forms.html#the-keygen-element", "HTMLKeygenElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "forms.html#the-keygen-element", "HTMLKeygenElement")}}{{Spec2('HTML5 W3C')}}初期定義。

-     

-
-
 

+{{ APIRef("HTML DOM") }}
+
+> **Note:** このページでは、仕様としての Keygen 要素インターフェースを説明しており、現在 Gecko に実装されているものではありません。詳細と状態については、{{Bug(101019)}} を見てください。
+
+{{HTMLElement("keygen")}} 要素は、`keygen` 要素のレイアウトやプレゼンテーションを操作するための（継承によって使用できる通常の {{domxref("element")}} オブジェクトインターフェースを越えた）特殊なプロパティとメソッドを提供する **`HTMLKeygenElement`** インターフェースを公開します。
+
+## プロパティ
+
+| 名前                                                  | 型                                                                                                            | 説明                                                                                                                                                                                                         |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `autofocus`                                           | [`Boolean`](/ja/JavaScript/Reference/Global_Objects/Boolean "en/JavaScript/Reference/Global Objects/Boolean") | {{ htmlattrxref("autofocus", "keygen") }} HTML 属性の反映です。ページがロードされたとき、フォームコントローが input にフォーカスされているべきことを表します。                                |
+| `challenge`                                           | [`DOMString`](/ja/DOM/DOMString "En/DOM/DOMString")                                                           | {{ htmlattrxref("challenge", "keygen") }} HTML 属性の繁栄です。送信されたキーにパッケージされた challenge 文字列を含みます。                                                                  |
+| `disabled`                                            | [`Boolean`](/ja/JavaScript/Reference/Global_Objects/Boolean "en/JavaScript/Reference/Global Objects/Boolean") | {{ htmlattrxref("disabled", "keygen") }} HTML 属性の繁栄です。コントロールが操作できないことを示します。                                                                                         |
+| `form`                                                | `readonly HTMLFormElement`                                                                                    | コントロールの form オーナーを表します。定義されていた場合、 {{ htmlattrxref("form", "keygen") }} HTML 属性を反映します。                                                                        |
+| `keytype`                                             | [`DOMString`](/ja/DOM/DOMString "En/DOM/DOMString")                                                           | {{ htmlattrxref("keytype", "keygen") }} HTML 属性を反映します。使用されるキーの種類を含みます。                                                                                                 |
+| `labels `{{ unimplemented_inline(556743) }} | `readonly NodeList`                                                                                           | keygen 要素に関連する label 要素のリストです。                                                                                                                                                               |
+| `name`                                                | [`DOMString`](https://developer.mozilla.org/En/DOM/DOMString "En/DOM/DOMString")                              | {{ htmlattrxref("name", "keygen") }} HTML 属性を反映します。フォームデータと送信されるコントロールの名前を含みます。                                                                             |
+| `type`                                                | `readonly `[`DOMString`](/ja/DOM/DOMString "En/DOM/DOMString")                                                | `keygen` の値です。                                                                                                                                                                                          |
+| `validationMessage`                                   | `readonly `[`DOMString`](/ja/DOM/DOMString "En/DOM/DOMString")                                                | （もしあれば） コントロールが満たさない制約検証を表示するためのローカライズされたメッセージです。コントロールが制約検証の対象ではない場合（**willValidate** が false）や制約を満たしている場合、空文字です。 |
+| `validity`                                            | `readonly ValidityState`                                                                                      | この要素の有効性です。                                                                                                                                                                                       |
+| `willValidate`                                        | [`Boolean`](/ja/JavaScript/Reference/Global_Objects/Boolean "en/JavaScript/Reference/Global Objects/Boolean") | `keygen` オブジェクトは決して制約検証の候補にならないため、常に false を返します。                                                                                                                           |
+
+## メソッド
+
+| 名前と引数                              | 戻り値                                                                                                        | 説明                                                                                                                                   |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `checkValidity()`                       | [`Boolean`](/ja/JavaScript/Reference/Global_Objects/Boolean "en/JavaScript/Reference/Global Objects/Boolean") | `keygen` オブジェクトは決して制約検証の候補にならないため、常に true を返します。                                                      |
+| `setCustomValidity(in DOMString error)` | `void`                                                                                                        | 要素にカスタム検証メッセージを設定します。このメッセージが空文字ではなく、要素がカスタム検証エラーを扱えない場合、検証は行われません。 |
+
+## 仕様
+
+| 仕様                                                                                                         | 状態                             | コメント                                        |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('HTML WHATWG', "forms.html#the-keygen-element", "HTMLKeygenElement")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} から変更なし。 |
+| {{SpecName('HTML5.1', "forms.html#the-keygen-element", "HTMLKeygenElement")}}     | {{Spec2('HTML5.1')}}     |                                                 |
+| {{SpecName('HTML5 W3C', "forms.html#the-keygen-element", "HTMLKeygenElement")}}     | {{Spec2('HTML5 W3C')}}     | 初期定義。                                      |
diff --git a/files/ja/web/api/htmllegendelement/index.md b/files/ja/web/api/htmllegendelement/index.md
index 0b448591d57344..6681511e1c0093 100644
--- a/files/ja/web/api/htmllegendelement/index.md
+++ b/files/ja/web/api/htmllegendelement/index.md
@@ -8,97 +8,40 @@ tags:
   - Reference
 translation_of: Web/API/HTMLLegendElement
 ---
-
{{ APIRef("HTML DOM") }}

+{{ APIRef("HTML DOM") }}
 
-
HTMLLegendElement は、{{HTMLElement("legend")}} 要素のプロパティにアクセスできるようにするインターフェイスです。 {{domxref("HTMLElement")}} インターフェイスからプロパティとメソッドを継承します。

+**`HTMLLegendElement`** は、{{HTMLElement("legend")}} 要素のプロパティにアクセスできるようにするインターフェイスです。 {{domxref("HTMLElement")}} インターフェイスからプロパティとメソッドを継承します。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
親の {{domxref("HTMLElement")}} からプロパティを継承します。

+_親の {{domxref("HTMLElement")}} からプロパティを継承します。_
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
名前説明型
form {{readonlyInline}}
-    
この凡例（legend）が属するフォーム。 凡例に親として fieldset 要素がある場合、この属性は親の fieldset 要素の form 属性と同じ値を返します。 それ以外の場合は、null を返します。

-   		{{domxref("HTMLFormElement")}}
accessKey要素へのアクセスを与える1文字のアクセスキー。{{domxref("DOMString")}}
align {{obsolete_inline}}フォームのセットに対する相対的な配置。{{domxref("DOMString")}}

+| 名前                             | 説明                                                                                                                                                                                      | 型                                       |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| `form` {{readonlyInline}}  | この凡例（legend）が属するフォーム。 凡例に親として `fieldset` 要素がある場合、この属性は親の `fieldset` 要素の **`form`** 属性と同じ値を返します。 それ以外の場合は、`null` を返します。 | {{domxref("HTMLFormElement")}} |
+| `accessKey`                      | 要素へのアクセスを与える 1 文字のアクセスキー。                                                                                                                                           | {{domxref("DOMString")}}         |
+| `align` {{obsolete_inline}} | フォームのセットに対する相対的な配置。                                                                                                                                                    | {{domxref("DOMString")}}         |
 
-
メソッド

+## メソッド
 
-
固有のメソッドはありません。 親の {{domxref("HTMLElement")}} からメソッドを継承します。

+_固有のメソッドはありません。 親の {{domxref("HTMLElement")}} からメソッドを継承します。_
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('HTML WHATWG', "#htmllegendelement", "HTMLLegendElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "forms.html#the-legend-element", "HTMLLegendElement")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "forms.html#the-legend-element", "HTMLLegendElement")}}{{Spec2('HTML5 W3C')}}accessKey プロパティが {{domxref("HTMLElement")}} で定義されました。

-    align プロパティが廃止されました。
{{SpecName('DOM2 HTML', 'html.html#ID-21482039', 'HTMLLegendElement')}}{{Spec2('DOM2 HTML')}}{{SpecName("DOM1")}} からの変更はありません。
{{SpecName('DOM1', 'level-one-html.html#ID-21482039', 'HTMLLegendElement')}}{{Spec2('DOM1')}}初期定義

+| 仕様                                                                                                     | 状態                             | コメント                                                                                                              |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmllegendelement", "HTMLLegendElement")}}             | {{Spec2('HTML WHATWG')}} |                                                                                                                       |
+| {{SpecName('HTML5.1', "forms.html#the-legend-element", "HTMLLegendElement")}} | {{Spec2('HTML5.1')}}     |                                                                                                                       |
+| {{SpecName('HTML5 W3C', "forms.html#the-legend-element", "HTMLLegendElement")}} | {{Spec2('HTML5 W3C')}}     | `accessKey` プロパティが {{domxref("HTMLElement")}} で定義されました。 `align` プロパティが廃止されました。 |
+| {{SpecName('DOM2 HTML', 'html.html#ID-21482039', 'HTMLLegendElement')}}         | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}} からの変更はありません。                                                                 |
+| {{SpecName('DOM1', 'level-one-html.html#ID-21482039', 'HTMLLegendElement')}}     | {{Spec2('DOM1')}}         | 初期定義                                                                                                              |
 
-
ブラウザーの互換性

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

+{{Compat("api.HTMLLegendElement")}}
 
+## 関連情報
 
-
{{Compat("api.HTMLLegendElement")}}

-

-
-
関連情報

-
-
    
- 
  • このインターフェイスを実装する HTML 要素: {{HTMLElement("legend")}}
    • 
-

+- このインターフェイスを実装する HTML 要素: {{HTMLElement("legend")}}
diff --git a/files/ja/web/api/htmlmapelement/index.md b/files/ja/web/api/htmlmapelement/index.md
index 7371c556540faf..17b7fb99e3bbee 100644
--- a/files/ja/web/api/htmlmapelement/index.md
+++ b/files/ja/web/api/htmlmapelement/index.md
@@ -8,67 +8,38 @@ tags:
   - リファレンス
 translation_of: Web/API/HTMLMapElement
 ---
-

-
{{ APIRef("HTML DOM") }}

-

+{{ APIRef("HTML DOM") }}
 
-
HTMLMapElement インターフェイスは、map 要素のレイアウトと表示を操作するための特別なプロパティとメソッド (継承によっても利用可能な通常のオブジェクト {{domxref("HTMLElement")}} インターフェイスを超えるもの) を提供します。

+**`HTMLMapElement`** インターフェイスは、map 要素のレイアウトと表示を操作するための特別なプロパティとメソッド (継承によっても利用可能な通常のオブジェクト {{domxref("HTMLElement")}} インターフェイスを超えるもの) を提供します。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
親の {{domxref("HTMLElement")}} からプロパティを継承しています。

+_親の {{domxref("HTMLElement")}} からプロパティを継承しています。_
 
-

- 
{{domxref("HTMLMapElement.name")}}

- 
Is a {{domxref("DOMString")}} representing the {{HTMLElement("map")}} element for referencing it other context. If the id attribute is set, this must have the same value; and it cannot be null or empty.

- 
{{domxref("HTMLMapElement.areas")}} {{readonlyInline}}

- 
Is a live {{domxref("HTMLCollection")}} representing the {{HTMLElement("area")}} elements associated to this {{HTMLElement("map")}}.

-

+- {{domxref("HTMLMapElement.name")}}
+  - : Is a {{domxref("DOMString")}} representing the {{HTMLElement("map")}} element for referencing it other context. If the `id` attribute is set, this must have the same value; and it cannot be `null` or empty.
+- {{domxref("HTMLMapElement.areas")}} {{readonlyInline}}
+  - : Is a live {{domxref("HTMLCollection")}} representing the {{HTMLElement("area")}} elements associated to this {{HTMLElement("map")}}.
 
-
メソッド

+## メソッド
 
-
特定のメソッドはありません。親である {{domxref("HTMLElement")}} からメソッドを継承します。

+_特定のメソッドはありません。親である {{domxref("HTMLElement")}} からメソッドを継承します。_
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書ステータスコメント
{{SpecName('HTML WHATWG', "#htmlmapelement", "HTMLMapElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-map-element", "HTMLMapElement")}}{{Spec2('HTML5 W3C')}}images プロパティを追加します。
{{SpecName('DOM2 HTML', 'html.html#ID-94109203', 'HTMLAreaElement')}}{{Spec2('DOM2 HTML')}}{{SpecName("DOM1")}} からの変更はありません。
{{SpecName('DOM1', 'level-one-html.html#ID-94109203', 'HTMLAreaElement')}}{{Spec2('DOM1')}}初期定義

+| 仕様書                                                                                                               | ステータス                       | コメント                                              |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmlmapelement", "HTMLMapElement")}}                                 | {{Spec2('HTML WHATWG')}} |                                                       |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#the-map-element", "HTMLMapElement")}} | {{Spec2('HTML5 W3C')}}     | `images` プロパティを追加します。                     |
+| {{SpecName('DOM2 HTML', 'html.html#ID-94109203', 'HTMLAreaElement')}}                         | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}} からの変更はありません。 |
+| {{SpecName('DOM1', 'level-one-html.html#ID-94109203', 'HTMLAreaElement')}}                 | {{Spec2('DOM1')}}         | 初期定義                                              |
 
-
ブラウザの互換性

+## ブラウザの互換性
 
-
{{Compat("api.HTMLMapElement")}}

+{{Compat("api.HTMLMapElement")}}
 
-
あわせて参照

+## あわせて参照
 
-
    
- 
  • HTML element implementing this interface: {{ HTMLElement("map") }}.
    • 
-

+- HTML element implementing this interface: {{ HTMLElement("map") }}.
diff --git a/files/ja/web/api/htmlmodelement/index.md b/files/ja/web/api/htmlmodelement/index.md
index a8b090bb6df6d8..340980fe1fe6f9 100644
--- a/files/ja/web/api/htmlmodelement/index.md
+++ b/files/ja/web/api/htmlmodelement/index.md
@@ -8,61 +8,34 @@ tags:
   - Reference
 translation_of: Web/API/HTMLModElement
 ---
-
{{ APIRef("HTML DOM") }}

+{{ APIRef("HTML DOM") }}
 
-
HTMLModElement インターフェイスは、 (継承によって {{domxref("HTMLElement")}} を通じて利用できる通常のメソッドやプロパティに加えて) 改変 (modification) 要素、すなわち {{HTMLElement("del")}} と {{HTMLElement("ins")}} を操作するための特有のプロパティを提供します。

+**`HTMLModElement`** インターフェイスは、 (継承によって {{domxref("HTMLElement")}} を通じて利用できる通常のメソッドやプロパティに加えて) 改変 (modification) 要素、すなわち {{HTMLElement("del")}} と {{HTMLElement("ins")}} を操作するための特有のプロパティを提供します。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
親である {{domxref("HTMLElement")}} からプロパティを継承しています。

+_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
 
-

- 
{{domxref("HTMLModElement.cite")}}

- 
{{domxref("DOMString")}} で、 HTML の {{htmlattrxref("cite", "del")}} 属性の値を反映します。変更点についての説明を含むリソースの URI が入ります。

- 
{{domxref("HTMLModElement.dateTime")}}

- 
{{domxref("DOMString")}} で、 HTML の {{htmlattrxref("datetime", "del")}} 属性の値を反映します。変更されたタイムスタンプを示す日時文字列が入ります。

-

+- {{domxref("HTMLModElement.cite")}}
+  - : {{domxref("DOMString")}} で、 HTML の {{htmlattrxref("cite", "del")}} 属性の値を反映します。変更点についての説明を含むリソースの URI が入ります。
+- {{domxref("HTMLModElement.dateTime")}}
+  - : {{domxref("DOMString")}} で、 HTML の {{htmlattrxref("datetime", "del")}} 属性の値を反映します。変更されたタイムスタンプを示す日時文字列が入ります。
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "edits.html#htmlmodelement", "HTMLAnchorElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} から変更なし。
{{SpecName('HTML5 W3C', "edits.html#htmlmodelement", "HTMLAnchorElement")}}{{Spec2('HTML5 W3C')}}{{SpecName("DOM2 HTML")}} から変更なし。
{{SpecName('DOM2 HTML', 'html.html#ID-79359609', 'HTMLModElement')}}{{Spec2('DOM2 HTML')}}{{SpecName("DOM1")}} から変更なし。
{{SpecName('DOM1', 'level-one-html.html#ID-79359609', 'HTMLModElement')}}{{Spec2('DOM1')}}初回定義

+| 仕様書                                                                                                   | 状態                             | 備考                                            |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('HTML WHATWG', "edits.html#htmlmodelement", "HTMLAnchorElement")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} から変更なし。 |
+| {{SpecName('HTML5 W3C', "edits.html#htmlmodelement", "HTMLAnchorElement")}}     | {{Spec2('HTML5 W3C')}}     | {{SpecName("DOM2 HTML")}} から変更なし。 |
+| {{SpecName('DOM2 HTML', 'html.html#ID-79359609', 'HTMLModElement')}}             | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}} から変更なし。     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-79359609', 'HTMLModElement')}}         | {{Spec2('DOM1')}}         | 初回定義                                        |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat("api.HTMLModElement")}}

+{{Compat("api.HTMLModElement")}}
 
-
関連情報

+## 関連情報
 
-
    
- 
  • このインターフェイスを実装している HTML 要素: {{HTMLElement("ins")}}, {{HTMLElement("del")}}
    • 
-

+- このインターフェイスを実装している HTML 要素: {{HTMLElement("ins")}}, {{HTMLElement("del")}}
diff --git a/files/ja/web/api/htmloptionelement/index.md b/files/ja/web/api/htmloptionelement/index.md
index 37c389b313a3a7..37966812678473 100644
--- a/files/ja/web/api/htmloptionelement/index.md
+++ b/files/ja/web/api/htmloptionelement/index.md
@@ -9,89 +9,53 @@ tags:
   - Reference
 translation_of: Web/API/HTMLOptionElement
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLOptionElement インターフェイスは {{HTMLElement("option")}} 要素を表し、 {{domxref("HTMLElement")}} インターフェイスのすべてのクラスとメソッドを継承しています。

+**`HTMLOptionElement`** インターフェイスは {{HTMLElement("option")}} 要素を表し、 {{domxref("HTMLElement")}} インターフェイスのすべてのクラスとメソッドを継承しています。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
親である {{domxref("HTMLElement")}} からプロパティを継承しています。

+_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
 
-

- 
{{domxref("HTMLOptionElement.defaultSelected")}}

- 
true または false の値を取り、選択肢が既定で選択されているかどうかを示す HTML の {{htmlattrxref("selected", "option")}} 属性の初期値を表します。

+- {{domxref("HTMLOptionElement.defaultSelected")}}
+  - : `true` または `false` の値を取り、選択肢が既定で選択されているかどうかを示す HTML の {{htmlattrxref("selected", "option")}} 属性の初期値を表します。
+- {{domxref("HTMLOptionElement.disabled")}}
+  - : `true` または `false` の値を取り、その選択肢が選択できないことを示す HTML の {{htmlattrxref("disabled", "option")}} 属性の値を表します。選択肢は無効状態の {{HTMLElement("optgroup")}} 要素の子である場合も無効になります。
+- {{domxref("HTMLOptionElement.form")}} {{readonlyInline}}
+  - : {{domxref("HTMLFormElement")}} で、この選択肢が {{HTMLElement("select")}} 要素の子孫であった場合は、対応する {{HTMLElement("select")}} 要素の `form` と同じ値を表します。見つからない場合は null になります。
+- {{domxref("HTMLOptionElement.index")}} {{readonlyInline}}
+  - : `long` 値で、所属する選択肢のリスト内におけるツリー順の位置を表します。その選択肢がリストに含まれていない場合、例えば {{HTMLElement("datalist")}} 要素の一部である場合などは、値は `0` になります。
+- {{domxref("HTMLOptionElement.label")}} {{readonlyInline}}
+  - : {{domxref("DOMString")}} で、この選択肢のラベルを提供する HTML の {{htmlattrxref("label", "option")}} 属性の値を反映します。この属性が特に設定されていない場合は、この値を読み取ると要素のテキストコンテンツが返されます。
+- {{domxref("HTMLOptionElement.selected")}}
+  - : `true` または `false` の値を取り、この選択肢が現在選択されているかどうかを示します。
+- {{domxref("HTMLOptionElement.text")}}
+  - : {{domxref("DOMString")}} で、この要素のテキストコンテンツが入ります。
+- {{domxref("HTMLOptionElement.value")}}
+  - : {{domxref("DOMString")}} で、 HTML の {{htmlattrxref("value", "option")}} 属性が存在する場合は、その値を反映します。存在しない場合は {{domxref("Node.textContent")}} プロパティの値を反映します。
 
- 
{{domxref("HTMLOptionElement.disabled")}}

- 
true または false の値を取り、その選択肢が選択できないことを示す HTML の {{htmlattrxref("disabled", "option")}} 属性の値を表します。選択肢は無効状態の {{HTMLElement("optgroup")}} 要素の子である場合も無効になります。

+## メソッド
 
- 
{{domxref("HTMLOptionElement.form")}} {{readonlyInline}}

- 
{{domxref("HTMLFormElement")}} で、この選択肢が {{HTMLElement("select")}} 要素の子孫であった場合は、対応する {{HTMLElement("select")}} 要素の form と同じ値を表します。見つからない場合は null になります。

+_親である {{domxref("HTMLElement")}} からメソッドを継承しています。_
 
- 
{{domxref("HTMLOptionElement.index")}} {{readonlyInline}}

- 
long 値で、所属する選択肢のリスト内におけるツリー順の位置を表します。その選択肢がリストに含まれていない場合、例えば {{HTMLElement("datalist")}} 要素の一部である場合などは、値は 0 になります。

+- Option()
+  - : `HTMLOptionElement` オブジェクトを生成するコンストラクターです。 4 つの値、表示するテキストである `text`、関連付ける値である `value`、 `defaultSelected` の値、 `selected` の値を取ります。後三者は省略可能です。
 
- 
{{domxref("HTMLOptionElement.label")}} {{readonlyInline}}

- 
{{domxref("DOMString")}} で、この選択肢のラベルを提供する HTML の {{htmlattrxref("label", "option")}} 属性の値を反映します。この属性が特に設定されていない場合は、この値を読み取ると要素のテキストコンテンツが返されます。

+## 仕様書
 
- 
{{domxref("HTMLOptionElement.selected")}}

- 
true または false の値を取り、この選択肢が現在選択されているかどうかを示します。

- 
{{domxref("HTMLOptionElement.text")}}

- 
{{domxref("DOMString")}} で、この要素のテキストコンテンツが入ります。

- 
{{domxref("HTMLOptionElement.value")}}

- 
{{domxref("DOMString")}} で、 HTML の {{htmlattrxref("value", "option")}} 属性が存在する場合は、その値を反映します。存在しない場合は {{domxref("Node.textContent")}} プロパティの値を反映します。

-

+| 仕様書                                                                                                   | 状態                             | 備考                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#htmloptionelement", "HTMLOptionElement")}}             | {{Spec2('HTML WHATWG')}} |                                                                                                                                                                                                        |
+| {{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}} | {{Spec2('HTML5 W3C')}}     | コンストラクターである `Option()` を追加した。 `form` プロパティが `null` 値を取れるようになった。                                                                                                     |
+| {{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}         | {{Spec2('DOM2 HTML')}}     | `selected` プロパティの意味を変更した。その選択肢が現在選択されているかどうかを示すようになり、最初に選択されているかどうかではなくなった。 `defaultSelected` プロパティが読み取り専用ではなくなった。 |
+| {{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}     | {{Spec2('DOM1')}}         | 初回定義                                                                                                                                                                                               |
 
-
メソッド

+## ブラウザーの互換性
 
-
親である {{domxref("HTMLElement")}} からメソッドを継承しています。

+{{Compat("api.HTMLOptionElement")}}
 
-

- 
Option()

- 
HTMLOptionElement オブジェクトを生成するコンストラクターです。 4 つの値、表示するテキストである text、関連付ける値である value、 defaultSelected の値、 selected の値を取ります。後三者は省略可能です。

-

+## 関連情報
 
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmloptionelement", "HTMLOptionElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}{{Spec2('HTML5 W3C')}}コンストラクターである Option() を追加した。

-    form プロパティが null 値を取れるようになった。
{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM2 HTML')}}selected プロパティの意味を変更した。その選択肢が現在選択されているかどうかを示すようになり、最初に選択されているかどうかではなくなった。

-    defaultSelected プロパティが読み取り専用ではなくなった。
{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM1')}}初回定義

-
-
ブラウザーの互換性

-
-
{{Compat("api.HTMLOptionElement")}}

-
-
関連情報

-
-
    
- 
  • このインターフェイスを実装している HTML 要素: {{HTMLElement("option")}}.
    • 
-

+- このインターフェイスを実装している HTML 要素: {{HTMLElement("option")}}.
diff --git a/files/ja/web/api/htmloptionelement/option/index.md b/files/ja/web/api/htmloptionelement/option/index.md
index 097c789cf786e7..a3f444c3e1b1d5 100644
--- a/files/ja/web/api/htmloptionelement/option/index.md
+++ b/files/ja/web/api/htmloptionelement/option/index.md
@@ -12,36 +12,36 @@ tags:
   - NeedsSpecTable
 translation_of: Web/API/HTMLOptionElement/Option
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
Option() コンストラクターは、新しい {{domxref("HTMLOptionElement")}} を生成します。

+**`Option()`** コンストラクターは、新しい {{domxref("HTMLOptionElement")}} を生成します。
 
-
構文

+## 構文
 
-
var optionElementReference = new Option(text, value, defaultSelected, selected);

+```js
+var optionElementReference = new Option(text, value, defaultSelected, selected);
+```
 
-
引数

+### 引数
 
-

-  
text {{optional_inline}}

-  
{{domxref("DOMString")}} で、要素の内容、すなわち表示するテキストを表します。これが指定されていない場合は、 "" (空文字列) が既定値として使用されます。

-  
value {{optional_inline}}

-  
{{domxref("DOMString")}} で、この {{domxref("HTMLOptionElement")}} の値、すなわち対応する {{htmlelement("option")}} 要素の value 属性を表します。指定されなかった場合は、 text の値が value、例えば、フォームがサーバーへ送信されるときの {{htmlelement("select")}} 要素の値として使用されます。

-  
defaultSelected {{optional_inline}}

-  
true または false のどちらかの値で、 {{htmlattrxref("selected", "option")}} 属性の値を設定するものです。すなわち、ページが最初に読み込まれたときに、この {{htmlelement("option")}} が {{htmlelement("select")}} 要素で選択される既定値になるようにします。これが指定されていない場合は、既定値の false が使用されます。なお、 true を指定しても、その選択肢が selected になっていない場合は、 selected にはなりません。

-  
selected {{optional_inline}}

-  
true または false のどちらかの値で、その選択肢の選択状態を設定します。既定値は false (未選択) です。省略された場合、 defaultSelected 引数が true であっても、その選択肢は選択されません。

-

+- `text` {{optional_inline}}
+  - : {{domxref("DOMString")}} で、要素の内容、すなわち表示するテキストを表します。これが指定されていない場合は、 "" (空文字列) が既定値として使用されます。
+- `value` {{optional_inline}}
+  - : {{domxref("DOMString")}} で、この {{domxref("HTMLOptionElement")}} の値、すなわち対応する {{htmlelement("option")}} 要素の value 属性を表します。指定されなかった場合は、 text の値が value、例えば、フォームがサーバーへ送信されるときの {{htmlelement("select")}} 要素の値として使用されます。
+- `defaultSelected` {{optional_inline}}
+  - : `true` または `false` のどちらかの値で、 {{htmlattrxref("selected", "option")}} 属性の値を設定するものです。すなわち、ページが最初に読み込まれたときに、この {{htmlelement("option")}} が {{htmlelement("select")}} 要素で選択される既定値になるようにします。これが指定されていない場合は、既定値の false が使用されます。なお、 true を指定しても、その選択肢が selected になっていない場合は、 selected にはなりません。
+- `selected` {{optional_inline}}
+  - : `true` または `false` のどちらかの値で、その選択肢の選択状態を設定します。既定値は false (未選択) です。省略された場合、 defaultSelected 引数が true であっても、その選択肢は選択されません。
 
-
例

+## 例
 
-
単に新しい選択肢を追加する

+### 単に新しい選択肢を追加する
 
-
 /* 以下の HTML があると想定する
-<select id='s'>
+```js
+ /* 以下の HTML があると想定する
+
 */
 
 var s = document.getElementById('s');
@@ -50,16 +50,17 @@ var options = [Four, Five, Six];
 options.forEach(function(element,key) {
     s[key] = new Option(element,key);
 });
-

+```
 
-
様々な引数で選択肢を追加する

+### 様々な引数で選択肢を追加する
 
-
/* 以下の HTML があると想定する
-<select id="s">
-    <option>First</option>
-    <option>Second</option>
-    <option>Third</option>
-</select>
+```js
+/* 以下の HTML があると想定する
+
 */
 
 var s = document.getElementById('s');
@@ -70,30 +71,24 @@ options.forEach(function(element, key) {
     s[s.options.length] = new Option(element, s.options.length, false, false);
   }
   if (element == 'one') {
-    s[s.options.length] = new Option(element, s.options.length, true, false); // "selected" 属性を追加する
+    s[s.options.length] = new Option(element, s.options.length, true, false); // "selected" 属性を追加する
   }
   if (element == 'two') {
-    s[s.options.length] = new Option(element, s.options.length, false, true); // "view" の中で選択されるだけ
+    s[s.options.length] = new Option(element, s.options.length, false, true); // "view" の中で選択されるだけ
   }
 });
 
 /* 結果
-<select id="s">
-  <option value="0">zero</option>
-  <option value="1" selected="">one</option>
-  <option value="2">two</option> // ユーザーにはこれが 'selected' に見える
-</select>
-*/

-
-
仕様書

-
-
-  
-    
-      
-    
-    
-      
-    
-  
-
仕様書
{{SpecName('HTML WHATWG','#dom-option','Option()')}}

+
+*/
+```
+
+## 仕様書
+
+| 仕様書                                                               |
+| -------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG','#dom-option','Option()')}} |
diff --git a/files/ja/web/api/htmloutputelement/index.md b/files/ja/web/api/htmloutputelement/index.md
index 9f51f9a744c887..8ceafc837a828a 100644
--- a/files/ja/web/api/htmloutputelement/index.md
+++ b/files/ja/web/api/htmloutputelement/index.md
@@ -9,104 +9,77 @@ tags:
   - インターフェイス
 translation_of: Web/API/HTMLOutputElement
 ---
-
{{APIRef("HTML DOM")}}

-
-
HTMLOutputElement インターフェイスは、 ({{domxref("HTMLElement")}} から継承したものより詳細に) {{HTMLElement("output")}} 要素のレイアウトと表示を操作するためのプロパティやメソッドを提供します。

-
-
{{InheritanceDiagram(600, 120)}}

-
-
プロパティ

-
-
このインターフェイスは、親である {{domxref("HTMLElement")}} からプロパティを継承しています。

-
-

- 
{{domxref("HTMLOutputElement.defaultValue")}}

- 
{{domxref("DOMString")}} で、要素の既定値を表し、初期値は空文字列です。

- 
{{domxref("HTMLOutputElement.form")}}{{ReadOnlyInline}}

- 
{{domxref("HTMLFormElement")}} で、コントロールに関連付けられたフォームを表し、定義されていれば HTML の {{htmlattrxref("form", "output")}} 属性を反映します。

- 
{{domxref("HTMLOutputElement.htmlFor")}}{{ReadOnlyInline}}

- 
{{domxref("DOMTokenList")}} で、 HTML の {{htmlattrxref("for", "output")}} 要素を反映し、計算値の value に貢献 (または他の形で影響) する同じ文書内の他の要素の ID のリストが入ります。

- 
{{domxref("HTMLOutputElement.labels")}}{{ReadOnlyInline}}

- 
{{domxref("NodeList")}} で、この要素に関連付けられた {{HTMLElement("label")}} 要素です。

- 
{{domxref("HTMLOutputElement.name")}}

- 
{{domxref("DOMString")}} で、 HTML の {{htmlattrxref("name", "output")}} 属性を反映し、フォームデータと共に送信されるコントロールの名前が入ります。

- 
{{domxref("HTMLOutputElement.type")}}{{ReadOnlyInline}}

- 
{{domxref("DOMString")}} で "output" です。

- 
{{domxref("HTMLOutputElement.validationMessage")}}{{ReadOnlyInline}}

- 
{{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (willValidate が false の場合) や、制約を満たしている場合は空文字列になります。

- 
{{domxref("HTMLOutputElement.validity")}}{{ReadOnlyInline}}

- 
{{domxref("ValidityState")}} で、この要素がある妥当性の状態を表します。

- 
{{domxref("HTMLOutputElement.value")}}

- 
{{domxref("DOMString")}} で、要素の内容の値を表します。 {{domxref("Node.textContent")}} プロパティと同様です。

- 
{{domxref("HTMLOutputElement.willValidate")}}{{ReadOnlyInline}}

- 
{{jsxref("Boolean")}} で、要素が制約検証の対象になるかどうかを示します。

-

-
-
メソッド

-
-
このインターフェイスは、親である {{domxref("HTMLElement")}} からメソッドを継承しています。

-
-

- 
{{domxref("HTMLOutputElement.checkValidity()")}}

- 
要素の妥当性をチェックし、チェック結果を {{jsxref("Boolean")}} で返します。

- 
{{domxref("HTMLOutputElement.reportValidity()")}}

- 
このメソッドは、もしあれば、要素の制約に関する問題をユーザーに報告します。問題があれば、要素上で {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを発生させ、 false を返します。問題がなければ true を返します。

- 
問題が報告された場合、ユーザーエージェントは要素にフォーカスを移し、文書のスクロール位置を変更したり、他の動作を行ったりして要素にユーザーの関心を集めることがあります。この要素に複数の問題が同時に発生した場合、ユーザーエージェントは複数の制約検証を報告することがあります。要素が表示されない場合、ユーザーエージェントはユーザーに通知する代わりに実行中のスクリプトにエラーを報告することがあります。

- 
{{domxref("HTMLOutputElement.setCustomValidity()")}}

- 
独自の検証メッセージをフィールドセットに設定します。メッセージが空文字列でなければ、フィールドセットには独自の検証エラーが発生している状態であり、検証に合格していません。

-

-
-
モード

-
-
この要素は2つのモードのどちらかで動作します。既定モードと値モードです。

-
-
既定モード

-
-
最初は、要素は既定モードであり、要素の中身は要素の値と既定値の両方を表します。

-
-
要素が既定モードである場合、何らかの形で要素の子孫が変更されたとき、 defaultValue プロパティは {{domxref("Node.textContent","textContent")}} プロパティの値が設定されます。

-
-
フォームをリセットすると、要素は既定モードになり、 {{domxref("Node.textContent","textContent")}} プロパティに defaultValue プロパティの値が設定されます。

-
-
値モード

-
-
要素は value プロパティの内容が設定されたときに、値モードへと移行します。 value プロパティはそれ以外は {{domxref("Node.textContent","textContent")}} プロパティと同様の動作をします。要素が値モードである場合、既定値には defaultValue プロパティからしかアクセスできません。

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmloutputelement", "HTMLOutputElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "forms.html#the-output-element", "HTMLOutputElement")}}{{Spec2('HTML5.1')}}変更なし
{{SpecName('HTML5 W3C', "forms.html#the-output-element", "HTMLOutputElement")}}{{Spec2('HTML5 W3C')}}初回定義

-
-
ブラウザーの互換性

-
-
{{Compat("api.HTMLOutputElement")}}

-
-
関連情報

-
-
    
- 
  • このインターフェイスを実装している HTML 要素: {{ HTMLElement("output") }}
    • 
-

+{{APIRef("HTML DOM")}}
+
+**`HTMLOutputElement`** インターフェイスは、 ({{domxref("HTMLElement")}} から継承したものより詳細に) {{HTMLElement("output")}} 要素のレイアウトと表示を操作するためのプロパティやメソッドを提供します。
+
+{{InheritanceDiagram(600, 120)}}
+
+## プロパティ
+
+_このインターフェイスは、親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
+
+- {{domxref("HTMLOutputElement.defaultValue")}}
+  - : {{domxref("DOMString")}} で、要素の既定値を表し、初期値は空文字列です。
+- {{domxref("HTMLOutputElement.form")}}{{ReadOnlyInline}}
+  - : {{domxref("HTMLFormElement")}} で、コントロールに関連付けられたフォームを表し、定義されていれば HTML の {{htmlattrxref("form", "output")}} 属性を反映します。
+- {{domxref("HTMLOutputElement.htmlFor")}}{{ReadOnlyInline}}
+  - : {{domxref("DOMTokenList")}} で、 HTML の {{htmlattrxref("for", "output")}} 要素を反映し、計算値の `value` に貢献 (または他の形で影響) する同じ文書内の他の要素の ID のリストが入ります。
+- {{domxref("HTMLOutputElement.labels")}}{{ReadOnlyInline}}
+  - : {{domxref("NodeList")}} で、この要素に関連付けられた {{HTMLElement("label")}} 要素です。
+- {{domxref("HTMLOutputElement.name")}}
+  - : {{domxref("DOMString")}} で、 HTML の {{htmlattrxref("name", "output")}} 属性を反映し、フォームデータと共に送信されるコントロールの名前が入ります。
+- {{domxref("HTMLOutputElement.type")}}{{ReadOnlyInline}}
+  - : {{domxref("DOMString")}} で "`output`" です。
+- {{domxref("HTMLOutputElement.validationMessage")}}{{ReadOnlyInline}}
+  - : {{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (`willValidate` が `false` の場合) や、制約を満たしている場合は空文字列になります。
+- {{domxref("HTMLOutputElement.validity")}}{{ReadOnlyInline}}
+  - : {{domxref("ValidityState")}} で、この要素がある妥当性の状態を表します。
+- {{domxref("HTMLOutputElement.value")}}
+  - : {{domxref("DOMString")}} で、要素の内容の値を表します。 {{domxref("Node.textContent")}} プロパティと同様です。
+- {{domxref("HTMLOutputElement.willValidate")}}{{ReadOnlyInline}}
+  - : {{jsxref("Boolean")}} で、要素が制約検証の対象になるかどうかを示します。
+
+## メソッド
+
+_このインターフェイスは、親である {{domxref("HTMLElement")}} からメソッドを継承しています。_
+
+- {{domxref("HTMLOutputElement.checkValidity()")}}
+  - : 要素の妥当性をチェックし、チェック結果を {{jsxref("Boolean")}} で返します。
+- {{domxref("HTMLOutputElement.reportValidity()")}}
+  - : このメソッドは、もしあれば、要素の制約に関する問題をユーザーに報告します。問題があれば、要素上で {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを発生させ、 `false` を返します。問題がなければ `true` を返します。
+    問題が報告された場合、ユーザーエージェントは要素にフォーカスを移し、文書のスクロール位置を変更したり、他の動作を行ったりして要素にユーザーの関心を集めることがあります。この要素に複数の問題が同時に発生した場合、ユーザーエージェントは複数の制約検証を報告することがあります。要素が表示されない場合、ユーザーエージェントはユーザーに通知する代わりに実行中のスクリプトにエラーを報告することがあります。
+- {{domxref("HTMLOutputElement.setCustomValidity()")}}
+  - : 独自の検証メッセージをフィールドセットに設定します。メッセージが空文字列でなければ、フィールドセットには独自の検証エラーが発生している状態であり、検証に合格していません。
+
+## モード
+
+この要素は 2 つのモードのどちらかで動作します。*既定*モードと*値*モードです。
+
+### 既定モード
+
+最初は、要素は既定モードであり、要素の中身は要素の値と既定値の両方を表します。
+
+要素が既定モードである場合、何らかの形で要素の子孫が変更されたとき、 `defaultValue` プロパティは {{domxref("Node.textContent","textContent")}} プロパティの値が設定されます。
+
+フォームをリセットすると、要素は既定モードになり、 {{domxref("Node.textContent","textContent")}} プロパティに `defaultValue` プロパティの値が設定されます。
+
+### 値モード
+
+要素は `value` プロパティの内容が設定されたときに、値モードへと移行します。 `value` プロパティはそれ以外は {{domxref("Node.textContent","textContent")}} プロパティと同様の動作をします。要素が値モードである場合、既定値には `defaultValue` プロパティからしかアクセスできません。
+
+## 仕様書
+
+| 仕様書                                                                                                   | 状態                             | 備考     |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "#htmloutputelement", "HTMLOutputElement")}}             | {{Spec2('HTML WHATWG')}} |          |
+| {{SpecName('HTML5.1', "forms.html#the-output-element", "HTMLOutputElement")}} | {{Spec2('HTML5.1')}}     | 変更なし |
+| {{SpecName('HTML5 W3C', "forms.html#the-output-element", "HTMLOutputElement")}} | {{Spec2('HTML5 W3C')}}     | 初回定義 |
+
+## ブラウザーの互換性
+
+{{Compat("api.HTMLOutputElement")}}
+
+## 関連情報
+
+- このインターフェイスを実装している HTML 要素: {{ HTMLElement("output") }}
diff --git a/files/ja/web/api/htmlpictureelement/index.md b/files/ja/web/api/htmlpictureelement/index.md
index da845506731d9b..5cee8354680ab7 100644
--- a/files/ja/web/api/htmlpictureelement/index.md
+++ b/files/ja/web/api/htmlpictureelement/index.md
@@ -9,42 +9,29 @@ tags:
   - Reference
 translation_of: Web/API/HTMLPictureElement
 ---
-
{{APIRef("HTML DOM")}}{{SeeCompatTable}}

+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
 
-
HTMLPictureElement インタフェースは、{{HTMLElement("picture")}} HTML 要素をあらわします。これは固有のプロパティやメソッドを実装していません。

+**`HTMLPictureElement`** インタフェースは、{{HTMLElement("picture")}} HTML 要素をあらわします。これは固有のプロパティやメソッドを実装していません。
 
-
プロパティ

+## プロパティ
 
-
固有のプロパティはありませんが、親要素である {{domxref("HTMLElement")}} のプロパティを継承します。

+_固有のプロパティはありませんが、親要素である {{domxref("HTMLElement")}} のプロパティを継承します。_
 
-
メソッド

+## メソッド
 
-
固有のメソッドはありませんが、親要素である {{domxref("HTMLElement")}} のメソッドを継承します。

+_固有のメソッドはありませんが、親要素である {{domxref("HTMLElement")}} のメソッドを継承します。_
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様ステータスコメント
{{SpecName('HTML WHATWG', "edits.html#the-picture-element", "HTMLPictureElement")}}{{Spec2('HTML WHATWG')}}初回定義

+| 仕様                                                                                                             | ステータス                       | コメント |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "edits.html#the-picture-element", "HTMLPictureElement")}} | {{Spec2('HTML WHATWG')}} | 初回定義 |
 
-
ブラウザ実装状況

+## ブラウザ実装状況
 
-
{{Compat("api.HTMLPictureElement")}}

+{{Compat("api.HTMLPictureElement")}}
 
-
関連項目

+## 関連項目
 
-
    
- 
  • これを実装している {{HTMLElement("picture")}} HTML 要素。
    • 
- 
  • {{domxref("HTMLImageElement")}} と {{domxref("HTMLSourceElement")}} は、しばしば {{HTMLElement("picture")}} 要素と同時に使用されます。
    • 
-

+- これを実装している {{HTMLElement("picture")}} HTML 要素。
+- {{domxref("HTMLImageElement")}} と {{domxref("HTMLSourceElement")}} は、しばしば {{HTMLElement("picture")}} 要素と同時に使用されます。
diff --git a/files/ja/web/api/htmlquoteelement/index.md b/files/ja/web/api/htmlquoteelement/index.md
index 3ba5433878250e..47168c163f4831 100644
--- a/files/ja/web/api/htmlquoteelement/index.md
+++ b/files/ja/web/api/htmlquoteelement/index.md
@@ -8,65 +8,36 @@ tags:
   - Reference
 translation_of: Web/API/HTMLQuoteElement
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLQuoteElementインターフェースは，引用要素を扱う為に（継承する{{domxref("HTMLElement")}}インターフェースを越えた）固有の属性を提供します。ここで引用要素とは{{HTMLElement("blockquote")}}や{{HTMLElement("q")}}といった要素であり，{{HTMLElement("cite")}}要素ではありません。

+**`HTMLQuoteElement`** インターフェースは，引用要素を扱う為に（継承する{{domxref("HTMLElement")}}インターフェースを越えた）固有の属性を提供します。ここで引用要素とは{{HTMLElement("blockquote")}}や{{HTMLElement("q")}}といった要素であり，{{HTMLElement("cite")}}要素ではありません。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
属性

+## 属性
 
-
親である{{domxref("HTMLElement")}}からメソッドを継承します。

+_親である{{domxref("HTMLElement")}}からメソッドを継承します。_
 
-

- 
{{domxref("HTMLQuoteElement.cite")}}

- 
は{{domxref("DOMString")}}であり，HTML属性{{htmlattrxref("cite", "blockquote")}}に格納している引用元URLを表します。

-

+- {{domxref("HTMLQuoteElement.cite")}}
+  - : は{{domxref("DOMString")}}であり，HTML 属性{{htmlattrxref("cite", "blockquote")}}に格納している引用元 URL を表します。
 
-
メソッド

+## メソッド
 
-
固有のメソッドなし。親である{{domxref("HTMLElement")}}からメソッドを継承します。

+_固有のメソッドなし。親である{{domxref("HTMLElement")}}からメソッドを継承します。_
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "#htmlquoteelement", "HTMLQuoteElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "grouping-content.html#the-blockquote-element", "HTMLQuoteElement")}}{{Spec2('HTML5 W3C')}}{{SpecName("DOM2 HTML")}}より変更なし。
{{SpecName('DOM2 HTML', 'html.html#ID-70319763', 'HTMLQuoteElement')}}{{Spec2('DOM2 HTML')}}{{SpecName("DOM1")}}より変更なし。
{{SpecName('DOM1', 'level-one-html.html#ID-70319763', 'HTMLQuoteElement')}}{{Spec2('DOM1')}}初回定義。

+| 仕様書                                                                                                                       | 状態                             | 備考                                           |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmlquoteelement", "HTMLQuoteElement")}}                                 | {{Spec2('HTML WHATWG')}} |                                                |
+| {{SpecName('HTML5 W3C', "grouping-content.html#the-blockquote-element", "HTMLQuoteElement")}} | {{Spec2('HTML5 W3C')}}     | {{SpecName("DOM2 HTML")}}より変更なし。 |
+| {{SpecName('DOM2 HTML', 'html.html#ID-70319763', 'HTMLQuoteElement')}}                                 | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}}より変更なし。     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-70319763', 'HTMLQuoteElement')}}                         | {{Spec2('DOM1')}}         | 初回定義。                                     |
 
-
ブラウザ互換性

+## ブラウザ互換性
 
+{{Compat("api.HTMLQuoteElement")}}
 
+## 関連項目
 
-
{{Compat("api.HTMLQuoteElement")}}

-
-
関連項目

-
-
    
- 
  • 本インターフェースを実装するHTML要素: {{HTMLElement("blockquote")}}及び{{HTMLElement("q")}}，然し{{HTMLElement("cite")}}ではない。
    • 
-

+- 本インターフェースを実装する HTML 要素: {{HTMLElement("blockquote")}}及び{{HTMLElement("q")}}，然し{{HTMLElement("cite")}}ではない。
diff --git a/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md b/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md
index c2e6949f50835d..f4f00d782326c0 100644
--- a/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md
+++ b/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md
@@ -9,43 +9,33 @@ tags:
   - Web Components
 translation_of: Web/API/HTMLShadowElement/getDistributedNodes
 ---
-
{{APIRef("Web Components")}}

+{{APIRef("Web Components")}}
 
-
HTMLShadowElement.getDistributedNodes() メソッドは、<shadow> 要素に関連した {{glossary("distributed nodes")}} の静的な {{domxref("NodeList")}} を返します。

+**`HTMLShadowElement.getDistributedNodes()`** メソッドは、`` 要素に関連した {{glossary("distributed nodes")}} の静的な {{domxref("NodeList")}} を返します。
 
-
構文

+## 構文
 
-
var nodeList = object.getDistributedNodes()
-

+```
+var nodeList = object.getDistributedNodes()
+```
 
-
例

+## 例
 
-
// 分散ノードを取得
-var nodes = myShadowObject.getDistributedNodes();

+```js
+// 分散ノードを取得
+var nodes = myShadowObject.getDistributedNodes();
+```
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}{{Spec2('Shadow DOM')}}初期定義

+| 仕様                                                                             | 状態                             | コメント |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}} | {{Spec2('Shadow DOM')}} | 初期定義 |
 
-
ブラウザ実装状況

+## ブラウザ実装状況
 
-
{{Compat("api.HTMLShadowElement.getDistributedNodes")}}

+{{Compat("api.HTMLShadowElement.getDistributedNodes")}}
 
-
関連項目

+## 関連項目
 
-
+- [HTMLShadowElement](/ja/docs/Web/API/HTMLShadowElement)
diff --git a/files/ja/web/api/htmlshadowelement/index.md b/files/ja/web/api/htmlshadowelement/index.md
index a5d166d9202a22..1648f8e95d4be0 100644
--- a/files/ja/web/api/htmlshadowelement/index.md
+++ b/files/ja/web/api/htmlshadowelement/index.md
@@ -9,51 +9,32 @@ tags:
   - Web Components
 translation_of: Web/API/HTMLShadowElement
 ---
-
{{ APIRef("Web Components") }}

+{{ APIRef("Web Components") }}
 
-
HTMLShadowElement インターフェースは、Shadow DOM で使用される {{HTMLElement("shadow")}} HTML 要素を表します。

+**`HTMLShadowElement`** インターフェースは、[Shadow DOM](/ja/docs/Web/Web_Components/Shadow_DOM) で使用される {{HTMLElement("shadow")}} HTML 要素を表します。
 
-
プロパティ

+## プロパティ
 
-
このインターフェースは、{{domxref("HTMLElement")}} のプロパティを継承しています。

+_このインターフェースは、{{domxref("HTMLElement")}} のプロパティを継承しています。_
 
-
メソッド

+## メソッド
 
-
このインターフェースは、{{domxref("HTMLElement")}} のメソッドを継承しています。

+_このインターフェースは、{{domxref("HTMLElement")}} のメソッドを継承しています。_
 
-

- 
{{domxref("HTMLShadowElement.getDistributedNodes()")}}

- 
<shadow> 要素に関連した {{glossary("distributed nodes")}} の静的な {{domxref("NodeList")}} を返す。

-

+- {{domxref("HTMLShadowElement.getDistributedNodes()")}}
+  - : `` 要素に関連した {{glossary("distributed nodes")}} の静的な {{domxref("NodeList")}} を返す。
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}{{Spec2('Shadow DOM')}} 

+| 仕様                                                                             | 状態                             | コメント |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}} | {{Spec2('Shadow DOM')}} |          |
 
-
ブラウザ実装状況

+## ブラウザ実装状況
 
-
{{Compat("api.HTMLShadowElement")}}

+{{Compat("api.HTMLShadowElement")}}
 
-
関連項目

+## 関連項目
 
-
    
- 
  • このインターフェースを実装している {{HTMLElement("shadow")}} 要素。
    • 
- 
  • Shadow DOM
    • 
-

-
-

- 
 

-

+- このインターフェースを実装している {{HTMLElement("shadow")}} 要素。
+- [Shadow DOM](/ja/docs/Web/Web_Components/Shadow_DOM)
diff --git a/files/ja/web/api/htmlsourceelement/index.md b/files/ja/web/api/htmlsourceelement/index.md
index a4057cf8ba8942..c8a936691b57ba 100644
--- a/files/ja/web/api/htmlsourceelement/index.md
+++ b/files/ja/web/api/htmlsourceelement/index.md
@@ -9,71 +9,50 @@ tags:
   - Reference
 translation_of: Web/API/HTMLSourceElement
 ---
-
{{ApiRef}}

-
-
HTMLSourceElement インターフェイスは {{htmlelement("source")}} 要素を操作するための (継承によって利用できる、通常の {{domxref("HTMLElement")}} オブジェクトインターフェイスにから見て) 特別なプロパティを提供します。

-
-
{{InheritanceDiagram(600, 120)}}

-
-
プロパティ

-
-
親である {{domxref("HTMLElement")}} からプロパティを継承しています。

-
-

- 
{{domxref("HTMLSourceElement.keySystem")}} {{experimental_inline}}

- 
ストリームを暗号化するキーシステムを説明する {{domxref("DOMString")}} です。

- 
{{domxref("HTMLSourceElement.media")}}

- 
HTML の {{ htmlattrxref("media", "source") }} 属性を反映する {{domxref("DOMString")}} で、メディアリソースの意図する型を含みます。

- 
{{domxref("HTMLSourceElement.sizes")}} {{experimental_inline}}

- 
ブレークポイント間の画像の寸法を表す {{domxref("DOMString")}} です。

- 
{{domxref("HTMLSourceElement.src")}}

- 
HTML の {{ htmlattrxref("src", "source") }} 属性を反映する {{domxref("DOMString")}} で、メディアリソースの URL が入ります。 {{domxref("HTMLSourceElement.src")}} プロパティは関連する {{HTMLElement("source")}} 要素が {{htmlelement("video")}} や {{htmlelement("audio")}} 要素などのメディア要素の中で入れ子になった場合のみ意味を持ちます。 {{HTMLElement("picture")}} 要素の中で入れ子になったときは意味を持たず、無視されます。
- 
メモ: src プロパティが (兄弟要素によって) 更新された場合、親の {{domxref("HTMLMediaElement")}} の load メソッドが完了時に呼び出されます。 <source> 要素は自動的には再読み込みされないからです。

- 

- 
{{domxref("HTMLSourceElement.srcset")}} {{experimental_inline}}

- 
HTML の {{ htmlattrxref("srcset", "source") }} 属性を反映する {{domxref("DOMString")}} で、コンマ (',', U+002C COMMA) で区切られた画像の候補のリストが入ります。画像の候補は URL の後に 'w' に続いて画像の幅、または 'x' に続いてピクセルの密度を指定します。

- 
{{domxref("HTMLSourceElement.type")}}

- 
HTML の {{ htmlattrxref("type", "source") }} 属性を反映する {{domxref("DOMString")}} で、メディアリソースの型が入ります。

-

-
-
メソッド

-
-
固有メソッドはありません。 {{domxref("HTMLElement")}} インターフェイスからの継承メソッドが利用可能です。

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('EME', '#dom-sourcekeysystem', 'HTMLSourceElement')}}{{Spec2('EME')}}keySystem 属性を追加。
{{SpecName('HTML WHATWG', "the-video-element.html#the-source-element", "HTMLSourceElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} より変更なし。
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-source-element", "HTMLSourceElement")}}{{Spec2('HTML5 W3C')}}初回定義

-
-
ブラウザーの対応

-
-
{{Compat("api.HTMLSourceElement")}}

-
-
関連情報

-
-
    
- 
  • このインターフェイスを実装する HTML 要素: {{ HTMLElement("source") }}.
    • 
- 
  • {{HTMLElement("source")}} 要素を含むことができる要素の HTML DOM API: {{domxref("HTMLVideoElement")}}, {{domxref("HTMLAudioElement")}}, {{domxref("HTMLPictureElement")}}.
    • 
-

+{{ApiRef}}
+
+`HTMLSourceElement` インターフェイスは {{htmlelement("source")}} 要素を操作するための (継承によって利用できる、通常の {{domxref("HTMLElement")}} オブジェクトインターフェイスにから見て) 特別なプロパティを提供します。
+
+{{InheritanceDiagram(600, 120)}}
+
+## プロパティ
+
+_親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
+
+- {{domxref("HTMLSourceElement.keySystem")}} {{experimental_inline}}
+  - : ストリームを暗号化するキーシステムを説明する {{domxref("DOMString")}} です。
+- {{domxref("HTMLSourceElement.media")}}
+  - : HTML の {{ htmlattrxref("media", "source") }} 属性を反映する {{domxref("DOMString")}} で、メディアリソースの意図する型を含みます。
+- {{domxref("HTMLSourceElement.sizes")}} {{experimental_inline}}
+  - : ブレークポイント間の画像の寸法を表す {{domxref("DOMString")}} です。
+- {{domxref("HTMLSourceElement.src")}}
+
+  - : HTML の {{ htmlattrxref("src", "source") }} 属性を反映する {{domxref("DOMString")}} で、メディアリソースの URL が入ります。 {{domxref("HTMLSourceElement.src")}} プロパティは関連する {{HTMLElement("source")}} 要素が {{htmlelement("video")}} や {{htmlelement("audio")}} 要素などのメディア要素の中で入れ子になった場合のみ意味を持ちます。 {{HTMLElement("picture")}} 要素の中で入れ子になったときは意味を持たず、無視されます。
+
+    > **Note:** **メモ**: `src` プロパティが (兄弟要素によって) 更新された場合、親の {{domxref("HTMLMediaElement")}} の `load` メソッドが完了時に呼び出されます。 `` 要素は自動的には再読み込みされないからです。
+
+- {{domxref("HTMLSourceElement.srcset")}} {{experimental_inline}}
+  - : HTML の {{ htmlattrxref("srcset", "source") }} 属性を反映する {{domxref("DOMString")}} で、コンマ (`',', U+002C COMMA`) で区切られた画像の候補のリストが入ります。画像の候補は URL の後に `'w'` に続いて画像の幅、または `'x'` に続いてピクセルの密度を指定します。
+- {{domxref("HTMLSourceElement.type")}}
+  - : HTML の {{ htmlattrxref("type", "source") }} 属性を反映する {{domxref("DOMString")}} で、メディアリソースの型が入ります。
+
+## メソッド
+
+_固有メソッドはありません。 {{domxref("HTMLElement")}} インターフェイスからの継承メソッドが利用可能です。_
+
+## 仕様書
+
+| 仕様書                                                                                                                       | 状態                             | 備考                                            |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('EME', '#dom-sourcekeysystem', 'HTMLSourceElement')}}                                         | {{Spec2('EME')}}             | `keySystem` 属性を追加。                        |
+| {{SpecName('HTML WHATWG', "the-video-element.html#the-source-element", "HTMLSourceElement")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} より変更なし。 |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#the-source-element", "HTMLSourceElement")}} | {{Spec2('HTML5 W3C')}}     | 初回定義                                        |
+
+## ブラウザーの対応
+
+{{Compat("api.HTMLSourceElement")}}
+
+## 関連情報
+
+- このインターフェイスを実装する HTML 要素: {{ HTMLElement("source") }}.
+- {{HTMLElement("source")}} 要素を含むことができる要素の HTML DOM API: {{domxref("HTMLVideoElement")}}, {{domxref("HTMLAudioElement")}}, {{domxref("HTMLPictureElement")}}.
diff --git a/files/ja/web/api/htmlspanelement/index.md b/files/ja/web/api/htmlspanelement/index.md
index c2985c5ef2db43..4591cfa3ee7677 100644
--- a/files/ja/web/api/htmlspanelement/index.md
+++ b/files/ja/web/api/htmlspanelement/index.md
@@ -6,60 +6,33 @@ tags:
   - DOM Reference
 translation_of: Web/API/HTMLSpanElement
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLSpanElement インターフェイスは {{HTMLElement("span")}} 要素を表し、 {{DOMxRef("HTMLElement")}} から派生していますが、それ以外のプロパティやメソッドを追加していません。

+**`HTMLSpanElement`** インターフェイスは {{HTMLElement("span")}} 要素を表し、 {{DOMxRef("HTMLElement")}} から派生していますが、それ以外のプロパティやメソッドを追加していません。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
このインターフェイスにはプロパティがありませんが、 {{DOMxRef("HTMLElement")}} からプロパティを継承しています。

+_このインターフェイスにはプロパティがありませんが、 {{DOMxRef("HTMLElement")}} からプロパティを継承しています。_
 
-
メソッド

+## メソッド
 
-
このインターフェイスにはメソッドがありませんが、 {{DOMxRef("HTMLElement")}} からメソッドを継承しています。

+_このインターフェイスにはメソッドがありませんが、 {{DOMxRef("HTMLElement")}} からメソッドを継承しています。_
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "text-level-semantics.html#htmlspanelement", "HTMLSpanElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML5.1', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "text-level-semantics.html#htmlspanelement", "HTMLSpanElement")}}{{Spec2('HTML5 W3C')}}初回定義。これ以前は {{HTMLElement("span")}} は {{domxref("HTMLElement")}} と直接紐付いていた。

+| 仕様書                                                                                                                   | 状態                             | 備考                                                                                                               |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "text-level-semantics.html#htmlspanelement", "HTMLSpanElement")}} | {{Spec2('HTML WHATWG')}} |                                                                                                                    |
+| {{SpecName('HTML5.2', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}     | {{Spec2('HTML5.2')}}     |                                                                                                                    |
+| {{SpecName('HTML5.1', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}     | {{Spec2('HTML5.1')}}     |                                                                                                                    |
+| {{SpecName('HTML5 W3C', "text-level-semantics.html#htmlspanelement", "HTMLSpanElement")}} | {{Spec2('HTML5 W3C')}}     | 初回定義。これ以前は {{HTMLElement("span")}} は {{domxref("HTMLElement")}} と直接紐付いていた。 |
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat("api.HTMLSpanElement")}}

+{{Compat("api.HTMLSpanElement")}}
 
-
関連情報

+## 関連情報
 
-
    
- 
  • このインターフェイスを実装している HTML 要素: {{HTMLElement("span")}}
    • 
-

+- このインターフェイスを実装している HTML 要素: {{HTMLElement("span")}}
diff --git a/files/ja/web/api/htmlstyleelement/index.md b/files/ja/web/api/htmlstyleelement/index.md
index 6667c876c043fc..142075aad2435c 100644
--- a/files/ja/web/api/htmlstyleelement/index.md
+++ b/files/ja/web/api/htmlstyleelement/index.md
@@ -7,74 +7,43 @@ tags:
   - 要更新
 translation_of: Web/API/HTMLStyleElement
 ---
-
{{ApiRef}}

+{{ApiRef}}
 
-
HTMLStyleElement インタフェースは {{HTMLElement("style")}} 要素を表すインタフェースです。{{domxref("HTMLElement")}} と {{domxref("LinkStyle")}} のプロパティとメソッドを継承しています。

+`HTMLStyleElement` インタフェースは {{HTMLElement("style")}} 要素を表すインタフェースです。{{domxref("HTMLElement")}} と {{domxref("LinkStyle")}} のプロパティとメソッドを継承しています。
 
-
This interface doesn't allow to manipulate the CSS it contains (in most case). To manipulate CSS, see Using dynamic styling information for an overview of the objects used to manipulate specified CSS properties using the DOM.

+This interface doesn't allow to manipulate the CSS it contains (in most case). To manipulate CSS, see [Using dynamic styling information](/ja/docs/DOM/Using_dynamic_styling_information) for an overview of the objects used to manipulate specified CSS properties using the DOM.
 
-
プロパティ

+## プロパティ
 
-
{{domxref("HTMLElement")}} および {{domxref("LinkStyle")}} から継承するプロパティの他に、以下の固有プロパティを持ちます。

+{{domxref("HTMLElement")}} および {{domxref("LinkStyle")}} から継承するプロパティの他に、以下の固有プロパティを持ちます。
 
-

- 
{{domxref("HTMLStyleElement.media")}}

- 
スタイル情報の適用先として意図するメディアを表す {{domxref("DOMString")}}

- 
{{domxref("HTMLStyleElement.type")}}

- 
この style 要素のスタイルの種類を表す {{domxref("DOMString")}}

- 
{{domxref("HTMLStyleElement.disabled")}}

- 
{{domxref("Boolean")}}。スタイルシート有効時には true 、無効時には false を返す。

- 
{{domxref("HTMLStyleElement.scoped")}}

- 
{{domxref("Boolean")}}。スタイルの適用対象が文書全体の場合は false、 scoped 属性により適用範囲が制限されている場合は true を返す。

-

+- {{domxref("HTMLStyleElement.media")}}
+  - : スタイル情報の適用先として意図するメディアを表す {{domxref("DOMString")}}
+- {{domxref("HTMLStyleElement.type")}}
+  - : この style 要素のスタイルの種類を表す {{domxref("DOMString")}}
+- {{domxref("HTMLStyleElement.disabled")}}
+  - : {{domxref("Boolean")}}。スタイルシート有効時には `true` 、無効時には `false` を返す。
+- {{domxref("HTMLStyleElement.scoped")}}
+  - : {{domxref("Boolean")}}。スタイルの適用対象が文書全体の場合は `false`、 `scoped` 属性により適用範囲が制限されている場合は `true` を返す。
 
-
メソッド

+## メソッド
 
-
固有のメソッドは持ちません。

+固有のメソッドは持ちません。
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "semantics.html#the-style-element", "HTMLStyleElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} より変更無し
{{SpecName('HTML5 W3C', "document-metadata.html#the-style-element", "HTMLStyleElement")}}{{Spec2('HTML5 W3C')}}scoped プロパティの追加
{{SpecName('DOM2 HTML', 'html.html#ID-16428977', 'HTMLStyleElement')}}{{Spec2('DOM2 HTML')}}{{domxref("LinkStyle")}} インタフェースからの継承の追加
{{SpecName('DOM1', 'level-one-html.html#ID-16428977', 'HTMLStyleElement')}}{{Spec2('DOM1')}}最初期の定義

+| 仕様書                                                                                                                   | 策定状況                         | コメント                                                        |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "semantics.html#the-style-element", "HTMLStyleElement")}}         | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} より変更無し                   |
+| {{SpecName('HTML5 W3C', "document-metadata.html#the-style-element", "HTMLStyleElement")}} | {{Spec2('HTML5 W3C')}}     | `scoped` プロパティの追加                                       |
+| {{SpecName('DOM2 HTML', 'html.html#ID-16428977', 'HTMLStyleElement')}}                             | {{Spec2('DOM2 HTML')}}     | {{domxref("LinkStyle")}} インタフェースからの継承の追加 |
+| {{SpecName('DOM1', 'level-one-html.html#ID-16428977', 'HTMLStyleElement')}}                     | {{Spec2('DOM1')}}         | 最初期の定義                                                    |
 
-
ブラウザ実装状況

+## ブラウザ実装状況
 
-

+{{Compat("api.HTMLStyleElement")}}
 
+## 関連情報
 
-
{{Compat("api.HTMLStyleElement")}}

-

-
-
関連情報

-
-
+- {{HTMLElement("style")}} - `HTMLStyleElement` インタフェースを持つ HTML 要素
+- [動的スタイル情報の利用](/ja/docs/Web/Guide/DOM/Using_dynamic_styling_information)
diff --git a/files/ja/web/api/htmlstyleelement/media/index.md b/files/ja/web/api/htmlstyleelement/media/index.md
index 50d6b99c179750..06b54addf65477 100644
--- a/files/ja/web/api/htmlstyleelement/media/index.md
+++ b/files/ja/web/api/htmlstyleelement/media/index.md
@@ -10,83 +10,54 @@ tags:
   - リファレンス
 translation_of: Web/API/HTMLStyleElement/media
 ---
-
{{APIRef("HTML DOM")}}

+{{APIRef("HTML DOM")}}
 
-
HTMLStyleElement.media プロパティは、スタイル情報の対象と想定するメディアを指定します。

+**`HTMLStyleElement.media`** プロパティは、スタイル情報の対象と想定するメディアを指定します。
 
-
構文

+## 構文
 
-
medium = style.media
-style.media = medium
-

+```
+medium = style.media
+style.media = medium
+```
 
-
引数

+### 引数
 
-
    
- 
  • medium は単一のメディア又はコンマで区切られたリストを記述する文字列です。
    • 
-

+- `medium` は単一のメディア又はコンマで区切られたリストを記述する文字列です。
 
-
例

+## 例
 
-
<!doctype html>
-<html>
-<head>
+```html
+
+
+
 
-<link id="LinkedStyle" rel="stylesheet" href="document.css" type="text/css" media="screen" />
-<style id="InlineStyle" rel="stylesheet" type="text/css" media="screen, print">
+
+
+
+
 
-<script>
+
 
-</body>
-</html>
-

+
+
+```
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG', "semantics.html#attr-style-media", "HTMLStyleElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "semantics.html#attr-style-media", "HTMLStyleElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "semantics.html#attr-style-media", "HTMLStyleElement")}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-16428977', 'HTMLStyleElement')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#ID-16428977', 'HTMLStyleElement')}}{{Spec2('DOM1')}}初回定義

+| 仕様書                                                                                                       | 状態                             | 備考     |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "semantics.html#attr-style-media", "HTMLStyleElement")}} | {{Spec2('HTML WHATWG')}} |          |
+| {{SpecName('HTML5.1', "semantics.html#attr-style-media", "HTMLStyleElement")}}     | {{Spec2('HTML5.1')}}     |          |
+| {{SpecName('HTML5 W3C', "semantics.html#attr-style-media", "HTMLStyleElement")}} | {{Spec2('HTML5 W3C')}}     |          |
+| {{SpecName('DOM2 HTML', 'html.html#ID-16428977', 'HTMLStyleElement')}}                 | {{Spec2('DOM2 HTML')}}     |          |
+| {{SpecName('DOM1', 'level-one-html.html#ID-16428977', 'HTMLStyleElement')}}         | {{Spec2('DOM1')}}         | 初回定義 |
 
-
ブラウザーの対応

+## ブラウザーの対応
 
-
{{Compat("api.HTMLStyleElement.media")}}

+{{Compat("api.HTMLStyleElement.media")}}
diff --git a/files/ja/web/api/htmltimeelement/index.md b/files/ja/web/api/htmltimeelement/index.md
index acfdd88c174052..d14c9487f8fb80 100644
--- a/files/ja/web/api/htmltimeelement/index.md
+++ b/files/ja/web/api/htmltimeelement/index.md
@@ -8,62 +8,35 @@ tags:
   - Reference
 translation_of: Web/API/HTMLTimeElement
 ---
-
{{ APIRef("HTML DOM") }}

+{{ APIRef("HTML DOM") }}
 
-
HTMLTimeElement インターフェイスは、 {{HTMLElement("time")}} 要素を操作するための特別なプロパティを提供します (通常の {{domxref("HTMLElement")}} インターフェイスに加え、継承によっても利用できます。) 。

+**`HTMLTimeElement`** インターフェイスは、 {{HTMLElement("time")}} 要素を操作するための特別なプロパティを提供します (通常の {{domxref("HTMLElement")}} インターフェイスに加え、継承によっても利用できます。) 。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
また、親である {{domxref("HTMLElement")}} からプロパティを継承します。

+_また、親である {{domxref("HTMLElement")}} からプロパティを継承します。_
 
-

- 
{{domxref("HTMLTimeElement.dateTime")}}

- 
{{ htmlattrxref("datetime", "time") }} HTML 属性を反映する {{domxref("DOMString")}} であり、機械で読み取り可能な形式の日付と時刻の値を含みます。

-

+- {{domxref("HTMLTimeElement.dateTime")}}
+  - : {{ htmlattrxref("datetime", "time") }} HTML 属性を反映する {{domxref("DOMString")}} であり、機械で読み取り可能な形式の日付と時刻の値を含みます。
 
-
関数

+## 関数
 
-
特定の関数無し; 親である {{domxref("HTMLElement")}} から関数を継承します。

+_特定の関数無し; 親である {{domxref("HTMLElement")}} から関数を継承します。_
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様ステータス備考
{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5.1')}}{{SpecName("HTML5 W3C")}}. からの変更なし。
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5 W3C')}}初回定義。

+| 仕様                                                                                                                     | ステータス                       | 備考                                               |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}                                 | {{Spec2('HTML WHATWG')}} |                                                    |
+| {{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}     | {{Spec2('HTML5.1')}}     | {{SpecName("HTML5 W3C")}}. からの変更なし。 |
+| {{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}} | {{Spec2('HTML5 W3C')}}     | 初回定義。                                         |
 
-
ブラウザーの互換性

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

+{{Compat("api.HTMLTimeElement")}}
 
+## 関連項目
 
-
{{Compat("api.HTMLTimeElement")}}

-

-
-
関連項目

-
-
    
- 
  • このインターフェイスを実装する HTML 要素: {{HTMLElement("time")}}.
    • 
-

+- このインターフェイスを実装する HTML 要素: {{HTMLElement("time")}}.
diff --git a/files/ja/web/api/htmltitleelement/index.md b/files/ja/web/api/htmltitleelement/index.md
index 435a4a87389538..4269341aff20c4 100644
--- a/files/ja/web/api/htmltitleelement/index.md
+++ b/files/ja/web/api/htmltitleelement/index.md
@@ -3,54 +3,34 @@ title: HTMLTitleElement
 slug: Web/API/HTMLTitleElement
 translation_of: Web/API/HTMLTitleElement
 ---
-

- {{ApiRef}}

-
title オブジェクトは、文書のタイトルを含む HTMLTitleElement インタフェースを公開します。この要素は {{domxref("HTMLElement")}} インタフェースの全てのプロパティ及びメソッドを継承します。

-
プロパティ

-
{{domxref("HTMLElement")}} からの継承するプロパティに加え、以下の固有プロパティを持ちます。

-

- 

-  {{domxref("HTMLTitleElement.text")}}

- 

-  文書のタイトルを表す {{domxref("DOMString")}}

-

-
メソッド

-
固有のメソッドはありません。{{domxref("HTMLElement")}} からの継承メソッドを持ちます。

-
仕様

-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "semantics.html#the-title-element", "HTMLTitleElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} より変更無し
{{SpecName('HTML5 W3C', "document-metadata.html#the-title-element", "HTMLTitleElement")}}{{Spec2('HTML5 W3C')}}{{SpecName("DOM2 HTML")}} より変更無し
{{SpecName('DOM2 HTML', 'html.html#ID-79243169', 'HTMLTitleElement')}}{{Spec2('DOM2 HTML')}}{{SpecName("DOM1")}} より変更無し
{{SpecName('DOM1', 'level-one-html.html#ID-79243169', 'HTMLTitleElement')}}{{Spec2('DOM1')}}最初期の定義

-
ブラウザ実装状況

-
-
{{Compat("api.HTMLTitleElement")}}

-
-
関連情報

-
    
- 
  • {{HTMLElement("title")}} - HTMLTitleElement インタフェースを持つ HTML 要素
    • 
-

+{{ApiRef}}
+
+`title` オブジェクトは、文書のタイトルを含む [HTMLTitleElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-79243169) インタフェースを公開します。この要素は {{domxref("HTMLElement")}} インタフェースの全てのプロパティ及びメソッドを継承します。
+
+## プロパティ
+
+{{domxref("HTMLElement")}} からの継承するプロパティに加え、以下の固有プロパティを持ちます。
+
+- {{domxref("HTMLTitleElement.text")}}
+  - : 文書のタイトルを表す {{domxref("DOMString")}}
+
+## メソッド
+
+固有のメソッドはありません。{{domxref("HTMLElement")}} からの継承メソッドを持ちます。
+
+## 仕様
+
+| 仕様書                                                                                                                   | 策定状況                         | コメント                                      |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------- |
+| {{SpecName('HTML WHATWG', "semantics.html#the-title-element", "HTMLTitleElement")}}         | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} より変更無し |
+| {{SpecName('HTML5 W3C', "document-metadata.html#the-title-element", "HTMLTitleElement")}} | {{Spec2('HTML5 W3C')}}     | {{SpecName("DOM2 HTML")}} より変更無し |
+| {{SpecName('DOM2 HTML', 'html.html#ID-79243169', 'HTMLTitleElement')}}                             | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}} より変更無し     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-79243169', 'HTMLTitleElement')}}                     | {{Spec2('DOM1')}}         | 最初期の定義                                  |
+
+## ブラウザ実装状況
+
+{{Compat("api.HTMLTitleElement")}}
+
+## 関連情報
+
+- {{HTMLElement("title")}} - `HTMLTitleElement` インタフェースを持つ HTML 要素
diff --git a/files/ja/web/api/htmlunknownelement/index.md b/files/ja/web/api/htmlunknownelement/index.md
index 1bf6f292210f95..2fb07227072056 100644
--- a/files/ja/web/api/htmlunknownelement/index.md
+++ b/files/ja/web/api/htmlunknownelement/index.md
@@ -8,48 +8,31 @@ tags:
   - Reference
 translation_of: Web/API/HTMLUnknownElement
 ---
-
{{ APIRef("HTML DOM") }}

+{{ APIRef("HTML DOM") }}
 
-
HTMLUnknownElement インターフェイスは不正な HTML 要素である事を表します。{{domxref("HTMLElement")}} インターフェイスを継承しますが、追加のメソッドやプロパティは実装しません。

+**`HTMLUnknownElement`** インターフェイスは不正な HTML 要素である事を表します。{{domxref("HTMLElement")}} インターフェイスを継承しますが、追加のメソッドやプロパティは実装しません。
 
-
{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}}
 
-
プロパティ

+## プロパティ
 
-
固有プロパティはありません。{{domxref("HTMLElement")}} インターフェイスから継承するプロパティのみ利用可能です。

+固有プロパティはありません。{{domxref("HTMLElement")}} インターフェイスから継承するプロパティのみ利用可能です。
 
-
メソッド

+## メソッド
 
-
固有メソッドはありません。{{domxref("HTMLElement")}} インターフェイスから継承するメソッドのみ利用可能です。

+固有メソッドはありません。{{domxref("HTMLElement")}} インターフェイスから継承するメソッドのみ利用可能です。
 
-
仕様

+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName('HTML WHATWG', "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2('HTML WHATWG')}}{{SpecName("HTML5 W3C")}} より変更無し
{{SpecName('HTML5 W3C', "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2('HTML5 W3C')}}最初期の定義

+| 仕様書                                                                                                           | 策定状況                         | コメント                                      |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------- |
+| {{SpecName('HTML WHATWG', "elements.html#htmlunknownelement", "HTMLUnknownElement")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} より変更無し |
+| {{SpecName('HTML5 W3C', "dom.html#htmlunknownelement", "HTMLUnknownElement")}}         | {{Spec2('HTML5 W3C')}}     | 最初期の定義                                  |
 
-
ブラウザー実装状況

+## ブラウザー実装状況
 
-
{{Compat("api.HTMLUnknownElement")}}

+{{Compat("api.HTMLUnknownElement")}}
 
-
関連情報

+## 関連情報
 
-
    
- 
  • このインターフェイスを持つ非標準要素及び廃止要素 : {{HTMLElement("bgsound")}} 、 {{HTMLElement("blink")}} 、 {{HTMLElement("isindex")}} 、 {{HTMLElement("multicol")}} 、 {{HTMLElement("nextid")}} 、 {{HTMLElement("rb")}} 、 {{HTMLElement("spacer")}}
    • 
-

+- このインターフェイスを持つ非標準要素及び廃止要素 : {{HTMLElement("bgsound")}} 、 {{HTMLElement("blink")}} 、 {{HTMLElement("isindex")}} 、 {{HTMLElement("multicol")}} 、 {{HTMLElement("nextid")}} 、 {{HTMLElement("rb")}} 、 {{HTMLElement("spacer")}}

From 9a341dfab52a2fa1101ecaeb17fa2f7f927d8ef2 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Wed, 24 Aug 2022 00:31:52 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=E5=A4=89=E6=8F=9B=E5=BE=8C=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/htmlaudioelement/index.md    | 42 +++++++++----------
 files/ja/web/api/htmlbrelement/index.md       |  6 +--
 .../htmlcanvaselement/capturestream/index.md  | 10 ++---
 files/ja/web/api/htmlcanvaselement/index.md   |  6 +--
 .../web/api/htmlcanvaselement/toblob/index.md | 12 +++---
 .../api/htmlcanvaselement/todataurl/index.md  | 10 ++---
 files/ja/web/api/htmlcontentelement/index.md  |  4 +-
 files/ja/web/api/htmldataelement/index.md     |  4 +-
 files/ja/web/api/htmldetailselement/index.md  |  6 +--
 .../htmldetailselement/toggle_event/index.md  |  2 +-
 .../htmldialogelement/close_event/index.md    |  4 +-
 files/ja/web/api/htmldocument/index.md        |  4 +-
 .../api/htmlformcontrolscollection/index.md   |  2 +-
 .../web/api/htmlformelement/action/index.md   |  2 +-
 .../web/api/htmlformelement/method/index.md   |  2 +-
 files/ja/web/api/htmlkeygenelement/index.md   |  4 +-
 files/ja/web/api/htmllegendelement/index.md   |  2 +-
 files/ja/web/api/htmlmapelement/index.md      |  4 +-
 files/ja/web/api/htmlpictureelement/index.md  |  6 +--
 files/ja/web/api/htmlquoteelement/index.md    |  4 +-
 .../api/htmlselectelement/options/index.md    |  4 +-
 .../getdistributednodes/index.md              |  6 +--
 files/ja/web/api/htmlshadowelement/index.md   |  6 +--
 files/ja/web/api/htmlsourceelement/index.md   |  2 +-
 files/ja/web/api/htmlstyleelement/index.md    |  4 +-
 .../web/api/htmlstyleelement/media/index.md   |  2 +-
 files/ja/web/api/htmltimeelement/index.md     |  4 +-
 files/ja/web/api/htmltitleelement/index.md    |  4 +-
 files/ja/web/api/htmlunknownelement/index.md  |  4 +-
 29 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/files/ja/web/api/htmlaudioelement/index.md b/files/ja/web/api/htmlaudioelement/index.md
index 4307431cd79329..5d674a984fb3ea 100644
--- a/files/ja/web/api/htmlaudioelement/index.md
+++ b/files/ja/web/api/htmlaudioelement/index.md
@@ -35,31 +35,31 @@ audio 要素のコンストラクターです。返されるオブジェクト
 
 _メモ: `new Audio()` で作成された audio 要素は、音声を再生中にガベージコレクションされることはありません。 `pause()` メソッドが呼ばれるか、再生が終了するまで、再生を続けます。_
 
-#### _引数_
+#### 引数
 
-- _`URLString` (期待される型: {{domxref("DOMString")}}; 任意)_
-  - : _構築される `HTMLAudioElement` の `src `プロパティ_
+- `URLString` (期待される型: {{domxref("DOMString")}}; 任意)
+  - : 構築される `HTMLAudioElement` の `src `プロパティ
 
-### _通常メソッド_
+### 通常メソッド
 
-| _名前と引数_                                                                          | _返値_                 | _説明_                                                                                                                                                                   |
+| 名前と引数                                                                          | 返値                 | 説明                                                                                                                                                                   |
 | ------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| _`mozCurrentSampleOffset()` {{non-standard_inline}}_                         | _`unsigned long long`_ | _`mozWriteAudio()` によって作成された音声ストリームの、現在のオフセットを示します。このオフセットは、ストリームの先頭からのサンプル番号で指定されます。_                 |
-| _`mozSetup(in PRUint32 channels, in PRUint32 rate)` {{non-standard_inline}}_ | _`void`_               | _書き込み用の音声ストリームを初期化します。引数でチャンネル数 (`1` でモノラル、 `2` でステレオ) とサンプリング周波数 (例えば 44.1kHz の場合は `44100`) を指定できます。_ |
-| _`mozWriteAudio(in jsval data) `{{non-standard_inline}}_                     | _`unsigned long`_      | _ストリームの現在のオフセットに音声を書き込みます。実際にストリームに書き込まれたバイト数を返します。_                                                                   |
+| `mozCurrentSampleOffset()` {{non-standard_inline}}                         | `unsigned long long` | `mozWriteAudio()` によって作成された音声ストリームの、現在のオフセットを示します。このオフセットは、ストリームの先頭からのサンプル番号で指定されます。                 |
+| `mozSetup(in PRUint32 channels, in PRUint32 rate)` {{non-standard_inline}} | `void`               | 書き込み用の音声ストリームを初期化します。引数でチャンネル数 (`1` でモノラル、 `2` でステレオ) とサンプリング周波数 (例えば 44.1kHz の場合は `44100`) を指定できます。 |
+| `mozWriteAudio(in jsval data) `{{non-standard_inline}}                     | `unsigned long`      | ストリームの現在のオフセットに音声を書き込みます。実際にストリームに書き込まれたバイト数を返します。                                                                   |
 
-## _例_
+## 例
 
-### _基本的な使用_
+### 基本的な使用
 
-_`HTMLAudioElement` を完全に JavaScript で生成します。_
+`HTMLAudioElement` を完全に JavaScript で生成します。
 
 ```
 var flush = new Audio('toilet_flush.wav');
 flush.play();
 ```
 
-_audio 要素でもっと一般的に使用されるプロパティとしては、 `src`, `currentTime`, `duration`, `paused`, `muted`, `volume` などがあります。_
+audio 要素でもっと一般的に使用されるプロパティとしては、 `src`, `currentTime`, `duration`, `paused`, `muted`, `volume` などがあります。
 
 ```
 var flush = new Audio('toilet_flush.wav');
@@ -68,19 +68,19 @@ flush.addEventListener('loadeddata',() => {
 })
 ```
 
-## _仕様書_
+## 仕様書
 
-| _仕様書_                                                                                                                   | _状態_                             | _備考_ |
+| 仕様書                                                                                                                   | 状態                             | 備考 |
 | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ |
-| _{{SpecName('HTML WHATWG', "#htmlaudioelement", "HTMLAudioElement")}}_                             | _{{Spec2('HTML WHATWG')}}_ |        |
-| _{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}_ | _{{Spec2('HTML5 W3C')}}_     | \_\_   |
+| {{SpecName('HTML WHATWG', "#htmlaudioelement", "HTMLAudioElement")}}                             | {{Spec2('HTML WHATWG')}} |        |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}} | {{Spec2('HTML5 W3C')}}     |    |
 
-## _ブラウザーの対応_
+## ブラウザーの互換性
 
-_{{Compat("api.HTMLAudioElement")}}_
+{{Compat("api.HTMLAudioElement")}}
 
-## _関連情報_
+## 関連情報
 
-- _このインタフェースを実装した HTML 要素: {{HTMLElement("audio")}}_
+- このインタフェースを実装した HTML 要素: {{HTMLElement("audio")}}
 
-_{{APIRef("HTML DOM")}}_
+{{APIRef("HTML DOM")}}
diff --git a/files/ja/web/api/htmlbrelement/index.md b/files/ja/web/api/htmlbrelement/index.md
index 9cdb6dc07420e6..881dadfb8446ed 100644
--- a/files/ja/web/api/htmlbrelement/index.md
+++ b/files/ja/web/api/htmlbrelement/index.md
@@ -25,17 +25,17 @@ _親である{{domxref("HTMLElement")}}より属性を継承しています。_
 
 _固有のメソッドなし。親である\_\_{{domxref("HTMLElement")}}よりメソッドを継承しています。_
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                                                             | 状態                             | 備考                                           |
 | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------- |
 | {{SpecName('HTML WHATWG', "#htmlbrelement", "HTMLBRElement")}}                             | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}}より変更なし。 |
 | {{SpecName('HTML5 W3C', "textlevel-semantics.html#the-br-element", "HTMLBRElement")}} | {{Spec2('HTML5 W3C')}}     | {{SpecName("DOM2 HTML")}}より変更なし。 |
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat("api.HTMLBRElement")}}
 
-## 関連項目
+## 関連情報
 
 - 本インターフェースを実装している HTML 要素: {{HTMLElement("br")}}
diff --git a/files/ja/web/api/htmlcanvaselement/capturestream/index.md b/files/ja/web/api/htmlcanvaselement/capturestream/index.md
index 01155e27b8a28e..3059c9db9fad8a 100644
--- a/files/ja/web/api/htmlcanvaselement/capturestream/index.md
+++ b/files/ja/web/api/htmlcanvaselement/capturestream/index.md
@@ -15,7 +15,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream
 ---
 {{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
 
-**`HTMLCanvasElement`\*\***`.captureStream()`\*\* メソッドは、canvas の前面をリアルタイムにキャプチャした動画を {{domxref("CanvasCaptureMediaStream")}} として返すメソッドです。
+**`HTMLCanvasElement.captureStream()`** メソッドは、canvas の前面をリアルタイムにキャプチャした動画を {{domxref("CanvasCaptureMediaStream")}} として返すメソッドです。
 
 ## 構文
 
@@ -28,7 +28,7 @@ MediaStream = canvas.captureStream(frameRate);
 - `frameRate` {{optional_inline}}
   - : キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、canvas が変化するたびにフレームが新しくキャプチャされます。0 を指定した場合、フレームが 1 枚だけキャプチャされます。
 
-### 戻り値
+### 返値
 
 {{domxref("MediaStream")}} オブジェクトへの参照を返します。
 
@@ -47,19 +47,19 @@ var stream = canvasElt.captureStream(25); // 25 FPS
 pc.addStream(stream);
 ```
 
-## 仕様
+## 仕様書
 
 | 仕様書                                                                                                                                                                                                                   | 策定状況                                             | 備考     |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------- |
 | {{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}} | {{Spec2('Media Capture DOM Elements')}} | 初期定義 |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLCanvasElement.captureStream")}}
 
 ## 関連情報
 
-- {{domxref("CanvasCaptureMediaStream")}} - 戻り値のインターフェイス
+- {{domxref("CanvasCaptureMediaStream")}} - 返値のインターフェイス
 - {{domxref("HTMLMediaElement.captureStream()")}} - media 要素からストリームをキャプチャするメソッド
 - {{domxref("MediaStream")}}
 - {{domxref("Media Capture and Streams API")}}
diff --git a/files/ja/web/api/htmlcanvaselement/index.md b/files/ja/web/api/htmlcanvaselement/index.md
index 5256e14a462150..289523a6ba639f 100644
--- a/files/ja/web/api/htmlcanvaselement/index.md
+++ b/files/ja/web/api/htmlcanvaselement/index.md
@@ -46,7 +46,7 @@ _{{domxref("HTMLElement")}}から継承するメソッドの他に以下のメ
 - {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
   - : Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified `name`. If `type` is not specified, the image type is `image/png`.
 
-## Specifications
+## 仕様書
 
 | Specification                                                                                                                                        | Status                                               | Comment                                                                                                                                                                                                                 |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -55,10 +55,10 @@ _{{domxref("HTMLElement")}}から継承するメソッドの他に以下のメ
 | {{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}                                     | {{Spec2('HTML5.1')}}                         |                                                                                                                                                                                                                         |
 | {{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}                                     | {{Spec2('HTML5 W3C')}}                         | Initial definition.                                                                                                                                                                                                     |
 
-## Browser compatibility
+## ブラウザーの互換性
 
 {{Compat("api.HTMLCanvasElement")}}
 
-## See also
+## 関連情報
 
 - HTML element implementing this interface: {{HTMLElement("canvas")}}.
diff --git a/files/ja/web/api/htmlcanvaselement/toblob/index.md b/files/ja/web/api/htmlcanvaselement/toblob/index.md
index 4d2a8e08231ca5..a35ff480afd49c 100644
--- a/files/ja/web/api/htmlcanvaselement/toblob/index.md
+++ b/files/ja/web/api/htmlcanvaselement/toblob/index.md
@@ -20,7 +20,7 @@ translation_of: Web/API/HTMLCanvasElement/toBlob
 void canvas.toBlob(callback, mimeType, qualityArgument);
 ```
 
-### パラメーター
+### 引数
 
 - callback
   - : 引数として {{domxref("Blob")}} オブジェクトを受け取るコールバック関数。
@@ -29,7 +29,7 @@ void canvas.toBlob(callback, mimeType, qualityArgument);
 - `qualityArgument` {{optional_inline}}
   - : 要求した type が `image/jpeg `か `image/webp` だった場合、画像の品質を示す `0` から `1` の {{jsxref("Number")}}。type 引数がそのほかの値だった場合、既定の値が画質に使用される。ほかの引数は無視される。
 
-### 戻り値
+### 返値
 
 なし。
 
@@ -56,7 +56,7 @@ canvas.toBlob(function(blob) {
 });
 ```
 
-ここでは、PNG 画像を生成していることに注意してください；`toBlob()` の呼び出しに 2 つ目のパラメーターを追加した場合、画像の種類を指定できます。たとえば、 JPEG フォーマットの画像を取得できます：
+ここでは、PNG 画像を生成していることに注意してください；`toBlob()` の呼び出しに 2 つ目の引数を追加した場合、画像の種類を指定できます。たとえば、 JPEG フォーマットの画像を取得できます：
 
 ```js
  canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
@@ -135,7 +135,7 @@ canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
               '-moz-parse-options:format=bmp;bpp=32');
 ```
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                                                                     | 状態                             | コメント                                                                 |
 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ |
@@ -143,7 +143,7 @@ canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
 | {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}} | {{Spec2('HTML5.1')}}     | 変更なし。                                                               |
 | {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}} | {{Spec2('HTML5 W3C')}}     | 初期定義を含む {{SpecName('HTML WHATWG')}} のスナップショット。 |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLCanvasElement.toBlob")}}
 
@@ -170,7 +170,7 @@ if (!HTMLCanvasElement.prototype.toBlob) {
 }
 ```
 
-## 関連項目
+## 関連情報
 
 - これが定義されているインターフェース： {{domxref("HTMLCanvasElement")}}
 - {{domxref("Blob")}}
diff --git a/files/ja/web/api/htmlcanvaselement/todataurl/index.md b/files/ja/web/api/htmlcanvaselement/todataurl/index.md
index 79a4b2323079fd..6ba7edc1876154 100644
--- a/files/ja/web/api/htmlcanvaselement/todataurl/index.md
+++ b/files/ja/web/api/htmlcanvaselement/todataurl/index.md
@@ -17,7 +17,7 @@ translation_of: Web/API/HTMLCanvasElement/toDataURL
 canvas.toDataURL(type, encoderOptions);
 ```
 
-### パラメーター
+### 引数
 
 - `type` {{optional_inline}}
   - : 画像フォーマットを示す {{domxref("DOMString")}} 。 指定しなかった場合、デフォルトのフォーマット形式は `image/png` です。
@@ -25,7 +25,7 @@ canvas.toDataURL(type, encoderOptions);
   - : `0` から `1` の間の {{jsxref("Number")}} で示す、 `image/jpeg` や `image/webp` のような非可逆圧縮を使う画像フォーマットの画質です。
     この引数がその他の値だった場合、デフォルトの画質が使われます。デフォルト値は `0.92` です。その他の引数は無視されます。
 
-### 戻り値
+### 返値
 
 要求された[data URI](/ja/docs/Web/HTTP/data_URIs)を含む {{domxref("DOMString")}} 。
 
@@ -116,7 +116,7 @@ function removeColors() {
 }
 ```
 
-## Specifications
+## 仕様書
 
 | Specification                                                                                                                    | Status                           | Comment                                                                                 |
 | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- |
@@ -124,11 +124,11 @@ function removeColors() {
 | {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5.1')}}     |                                                                                         |
 | {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML5 W3C')}}     | Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition. |
 
-## Browser compatibility
+## ブラウザーの互換性
 
 {{Compat("api.HTMLCanvasElement.toDataURL")}}
 
-## See also
+## 関連情報
 
 - The interface defining it, {{domxref("HTMLCanvasElement")}}.
 - [Data URIs](/ja/docs/Web/HTTP/data_URIs) in the [HTTP](/ja/docs/Web/HTTP) reference.
diff --git a/files/ja/web/api/htmlcontentelement/index.md b/files/ja/web/api/htmlcontentelement/index.md
index df7617bbe1567f..5db96f0b257592 100644
--- a/files/ja/web/api/htmlcontentelement/index.md
+++ b/files/ja/web/api/htmlcontentelement/index.md
@@ -29,11 +29,11 @@ _このインターフェースは {{domxref("HTMLElement")}} のメソッドを
 - {{domxref("HTMLContentElement.getDistributedNodes()")}}
   - : この `` 要素を {{glossary("distributed nodes")}} と関連づける静的な {{domxref("NodeList")}} を返します。
 
-## 仕様
+## 仕様書
 
 この機能はどの標準企画によっても定義されていません。
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat("api.HTMLContentElement")}}
 
diff --git a/files/ja/web/api/htmldataelement/index.md b/files/ja/web/api/htmldataelement/index.md
index 1fb483a5f24e95..c92ac9e90da996 100644
--- a/files/ja/web/api/htmldataelement/index.md
+++ b/files/ja/web/api/htmldataelement/index.md
@@ -31,10 +31,10 @@ _固有のメソッドなし。親である{{domxref("HTMLElement")}}からメ
 | {{SpecName('HTML WHATWG', "#htmldataelement", "HTMLDataElement")}}                                 | {{Spec2('HTML WHATWG')}} |      |
 | {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}} | {{Spec2('HTML5 W3C')}}     |      |
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat("api.HTMLDataElement")}}
 
-## 関連項目
+## 関連情報
 
 - 本インターフェースを実装する HTML 要素: {{HTMLElement("data")}}.
diff --git a/files/ja/web/api/htmldetailselement/index.md b/files/ja/web/api/htmldetailselement/index.md
index 214f2a770ed6b2..858f218a415be8 100644
--- a/files/ja/web/api/htmldetailselement/index.md
+++ b/files/ja/web/api/htmldetailselement/index.md
@@ -22,15 +22,15 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
 
 _No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}._
 
-## Specifications
+## 仕様書
 
 - [HTML Living Standard](https://html.spec.whatwg.org/multipage/interactive-elements.html#htmldetailselement)
 - [HTML 5.2 (W3C Proposed Recommendation)](https://www.w3.org/TR/html52/interactive-elements.html#htmldetailselement)
 
-## Browser compatibility
+## ブラウザーの互換性
 
 {{Compat("api.HTMLDetailsElement")}}
 
-## See also
+## 関連情報
 
 - The HTML element implementing this interface: {{HTMLElement("details")}}
diff --git a/files/ja/web/api/htmldetailselement/toggle_event/index.md b/files/ja/web/api/htmldetailselement/toggle_event/index.md
index c6977db23be0cb..5c15bbc9963314 100644
--- a/files/ja/web/api/htmldetailselement/toggle_event/index.md
+++ b/files/ja/web/api/htmldetailselement/toggle_event/index.md
@@ -115,6 +115,6 @@ chapters.forEach((chapter) => {
 | ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- |
 | {{SpecName('HTML WHATWG', 'indices.html#event-toggle', 'toggle event')}} | {{Spec2("HTML WHATWG")}} |      |
 
-## ブラウザーの対応
+## ブラウザーの互換性
 
 {{Compat("api.HTMLDetailsElement.toggle_event")}}
diff --git a/files/ja/web/api/htmldialogelement/close_event/index.md b/files/ja/web/api/htmldialogelement/close_event/index.md
index 4cc5f21c43137c..e2a50bd261bc95 100644
--- a/files/ja/web/api/htmldialogelement/close_event/index.md
+++ b/files/ja/web/api/htmldialogelement/close_event/index.md
@@ -34,7 +34,7 @@ target.onclose = functionRef;
 
 一度に 1 つのオブジェクトに割り当てることができる `onclose` ハンドラーは 1 つだけです。代わりに、より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。
 
-## 仕様
+## 仕様書
 
 | 仕様書                                                                                           | 状態                             | 備考 |
 | ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- |
@@ -42,7 +42,7 @@ target.onclose = functionRef;
 
 ## ブラウザの互換性
 
-{{Compat("api.GlobalEventHandlers.onclose")}}
+{{Compat}}
 
 ## 関連情報
 
diff --git a/files/ja/web/api/htmldocument/index.md b/files/ja/web/api/htmldocument/index.md
index 9f6e5857cadb1f..070ec651b763e0 100644
--- a/files/ja/web/api/htmldocument/index.md
+++ b/files/ja/web/api/htmldocument/index.md
@@ -21,13 +21,13 @@ translation_of: Web/API/HTMLDocument
 
 `HTMLDocument` のメンバーは、{{DOMxRef("Document")}} インターフェイスの文書で見つけることができます。
 
-## 仕様
+## 仕様書
 
 | {{SpecName("HTML WHATWG", "#htmldocument", "HTMLDocument")}}                 | {{Spec2("HTML WHATWG")}} | `HTMLDocument` インターフェイスを、{{DOMxRef("Document")}} の拡張に転換。 |
 | ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------- |
 | {{SpecName("DOM2 HTML", "html.html#ID-26809268", "HTMLDocument")}}         | {{Spec2('DOM2 HTML')}}     | DOM 1 の後継                                                                       |
 | {{SpecName("DOM1", "level-one-html.html#ID-26809268", "HTMLDocument")}} | {{Spec2("DOM1")}}         | 初期定義                                                                           |
 
-## ブラウザー実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLDocument")}}
diff --git a/files/ja/web/api/htmlformcontrolscollection/index.md b/files/ja/web/api/htmlformcontrolscollection/index.md
index b427a15e151a40..96059154626102 100644
--- a/files/ja/web/api/htmlformcontrolscollection/index.md
+++ b/files/ja/web/api/htmlformcontrolscollection/index.md
@@ -14,7 +14,7 @@ HTMLFormControlsCollection は、HTML フォームコントロール要素のコ
 
 ## メソッド
 
-| メソッド名 & 引数                                      | 戻り値   | 説明                                                                                                                                                             |
+| メソッド名 & 引数                                      | 返値   | 説明                                                                                                                                                             |
 | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `namedItem` ({{domxref("DOMString")}} name 内) | `object` | 指定した name と一致する `name` 属性または `id` 属性を持つコレクション内のノードまたはノードリストを取得。一致するノードが存在しない場合は `null` が取得される。 |
 
diff --git a/files/ja/web/api/htmlformelement/action/index.md b/files/ja/web/api/htmlformelement/action/index.md
index 398f3b5b0c38be..6b25060ef0c698 100644
--- a/files/ja/web/api/htmlformelement/action/index.md
+++ b/files/ja/web/api/htmlformelement/action/index.md
@@ -28,7 +28,7 @@ form.action = "/cgi-bin/publish";
 
 フォームの action はフォームが投稿されたときサーバ上で実行されるプログラムです。このプロパティは読み書きともに可能です。
 
-## 仕様
+## 仕様書
 
 - [HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method)
 - [DOM Level 2 HTML: action](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184)
diff --git a/files/ja/web/api/htmlformelement/method/index.md b/files/ja/web/api/htmlformelement/method/index.md
index 2d8a16f7a1270b..b3eddc82cf4ddf 100644
--- a/files/ja/web/api/htmlformelement/method/index.md
+++ b/files/ja/web/api/htmlformelement/method/index.md
@@ -26,6 +26,6 @@ var myform = document.forms["myform"];
 myform.method = "post";
 ```
 
-## 仕様
+## 仕様書
 
 - [DOM Level 2 HTML: method](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539)
diff --git a/files/ja/web/api/htmlkeygenelement/index.md b/files/ja/web/api/htmlkeygenelement/index.md
index 58d5067f8394e4..bbf0ede28ab97b 100644
--- a/files/ja/web/api/htmlkeygenelement/index.md
+++ b/files/ja/web/api/htmlkeygenelement/index.md
@@ -35,12 +35,12 @@ translation_of: Web/API/HTMLKeygenElement
 
 ## メソッド
 
-| 名前と引数                              | 戻り値                                                                                                        | 説明                                                                                                                                   |
+| 名前と引数                              | 返値                                                                                                        | 説明                                                                                                                                   |
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | `checkValidity()`                       | [`Boolean`](/ja/JavaScript/Reference/Global_Objects/Boolean "en/JavaScript/Reference/Global Objects/Boolean") | `keygen` オブジェクトは決して制約検証の候補にならないため、常に true を返します。                                                      |
 | `setCustomValidity(in DOMString error)` | `void`                                                                                                        | 要素にカスタム検証メッセージを設定します。このメッセージが空文字ではなく、要素がカスタム検証エラーを扱えない場合、検証は行われません。 |
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                                                         | 状態                             | コメント                                        |
 | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
diff --git a/files/ja/web/api/htmllegendelement/index.md b/files/ja/web/api/htmllegendelement/index.md
index 6681511e1c0093..1068dd372ee46d 100644
--- a/files/ja/web/api/htmllegendelement/index.md
+++ b/files/ja/web/api/htmllegendelement/index.md
@@ -28,7 +28,7 @@ _親の {{domxref("HTMLElement")}} からプロパティを継承します。_
 
 _固有のメソッドはありません。 親の {{domxref("HTMLElement")}} からメソッドを継承します。_
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                                                     | 状態                             | コメント                                                                                                              |
 | -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/ja/web/api/htmlmapelement/index.md b/files/ja/web/api/htmlmapelement/index.md
index 17b7fb99e3bbee..f5c6639347cdb9 100644
--- a/files/ja/web/api/htmlmapelement/index.md
+++ b/files/ja/web/api/htmlmapelement/index.md
@@ -27,7 +27,7 @@ _親の {{domxref("HTMLElement")}} からプロパティを継承しています
 
 _特定のメソッドはありません。親である {{domxref("HTMLElement")}} からメソッドを継承します。_
 
-## 仕様
+## 仕様書
 
 | 仕様書                                                                                                               | ステータス                       | コメント                                              |
 | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
@@ -40,6 +40,6 @@ _特定のメソッドはありません。親である {{domxref("HTMLElement")
 
 {{Compat("api.HTMLMapElement")}}
 
-## あわせて参照
+## ブラウザーの互換性
 
 - HTML element implementing this interface: {{ HTMLElement("map") }}.
diff --git a/files/ja/web/api/htmlpictureelement/index.md b/files/ja/web/api/htmlpictureelement/index.md
index 5cee8354680ab7..2cf43353070ef1 100644
--- a/files/ja/web/api/htmlpictureelement/index.md
+++ b/files/ja/web/api/htmlpictureelement/index.md
@@ -21,17 +21,17 @@ _固有のプロパティはありませんが、親要素である {{domxref("H
 
 _固有のメソッドはありませんが、親要素である {{domxref("HTMLElement")}} のメソッドを継承します。_
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                                                             | ステータス                       | コメント |
 | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
 | {{SpecName('HTML WHATWG', "edits.html#the-picture-element", "HTMLPictureElement")}} | {{Spec2('HTML WHATWG')}} | 初回定義 |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLPictureElement")}}
 
-## 関連項目
+## 関連情報
 
 - これを実装している {{HTMLElement("picture")}} HTML 要素。
 - {{domxref("HTMLImageElement")}} と {{domxref("HTMLSourceElement")}} は、しばしば {{HTMLElement("picture")}} 要素と同時に使用されます。
diff --git a/files/ja/web/api/htmlquoteelement/index.md b/files/ja/web/api/htmlquoteelement/index.md
index 47168c163f4831..649fa4efce3326 100644
--- a/files/ja/web/api/htmlquoteelement/index.md
+++ b/files/ja/web/api/htmlquoteelement/index.md
@@ -34,10 +34,10 @@ _固有のメソッドなし。親である{{domxref("HTMLElement")}}からメ
 | {{SpecName('DOM2 HTML', 'html.html#ID-70319763', 'HTMLQuoteElement')}}                                 | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}}より変更なし。     |
 | {{SpecName('DOM1', 'level-one-html.html#ID-70319763', 'HTMLQuoteElement')}}                         | {{Spec2('DOM1')}}         | 初回定義。                                     |
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat("api.HTMLQuoteElement")}}
 
-## 関連項目
+## 関連情報
 
 - 本インターフェースを実装する HTML 要素: {{HTMLElement("blockquote")}}及び{{HTMLElement("q")}}，然し{{HTMLElement("cite")}}ではない。
diff --git a/files/ja/web/api/htmlselectelement/options/index.md b/files/ja/web/api/htmlselectelement/options/index.md
index 1af533e1e4db0a..d597c110544ed2 100644
--- a/files/ja/web/api/htmlselectelement/options/index.md
+++ b/files/ja/web/api/htmlselectelement/options/index.md
@@ -50,10 +50,10 @@ window.addEventListener("DOMContentLoaded", function() {
 
 {{EmbedLiveSample("Example", "100%", 30)}}
 
-## Specifications
+## 仕様書
 
 {{Specifications}}
 
-## Browser compatibility
+## ブラウザーの互換性
 
 {{Compat}}
diff --git a/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md b/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md
index f4f00d782326c0..1d647b8ace022d 100644
--- a/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md
+++ b/files/ja/web/api/htmlshadowelement/getdistributednodes/index.md
@@ -26,16 +26,16 @@ var nodeList = object.getDistributedNodes()
 var nodes = myShadowObject.getDistributedNodes();
 ```
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                             | 状態                             | コメント |
 | -------------------------------------------------------------------------------- | -------------------------------- | -------- |
 | {{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}} | {{Spec2('Shadow DOM')}} | 初期定義 |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLShadowElement.getDistributedNodes")}}
 
-## 関連項目
+## 関連情報
 
 - [HTMLShadowElement](/ja/docs/Web/API/HTMLShadowElement)
diff --git a/files/ja/web/api/htmlshadowelement/index.md b/files/ja/web/api/htmlshadowelement/index.md
index 1648f8e95d4be0..bdf433b878339d 100644
--- a/files/ja/web/api/htmlshadowelement/index.md
+++ b/files/ja/web/api/htmlshadowelement/index.md
@@ -24,17 +24,17 @@ _このインターフェースは、{{domxref("HTMLElement")}} のメソッド
 - {{domxref("HTMLShadowElement.getDistributedNodes()")}}
   - : `` 要素に関連した {{glossary("distributed nodes")}} の静的な {{domxref("NodeList")}} を返す。
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                             | 状態                             | コメント |
 | -------------------------------------------------------------------------------- | -------------------------------- | -------- |
 | {{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}} | {{Spec2('Shadow DOM')}} |          |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLShadowElement")}}
 
-## 関連項目
+## 関連情報
 
 - このインターフェースを実装している {{HTMLElement("shadow")}} 要素。
 - [Shadow DOM](/ja/docs/Web/Web_Components/Shadow_DOM)
diff --git a/files/ja/web/api/htmlsourceelement/index.md b/files/ja/web/api/htmlsourceelement/index.md
index c8a936691b57ba..660e04dc58054e 100644
--- a/files/ja/web/api/htmlsourceelement/index.md
+++ b/files/ja/web/api/htmlsourceelement/index.md
@@ -48,7 +48,7 @@ _固有メソッドはありません。 {{domxref("HTMLElement")}} インター
 | {{SpecName('HTML WHATWG', "the-video-element.html#the-source-element", "HTMLSourceElement")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} より変更なし。 |
 | {{SpecName('HTML5 W3C', "embedded-content-0.html#the-source-element", "HTMLSourceElement")}} | {{Spec2('HTML5 W3C')}}     | 初回定義                                        |
 
-## ブラウザーの対応
+## ブラウザーの互換性
 
 {{Compat("api.HTMLSourceElement")}}
 
diff --git a/files/ja/web/api/htmlstyleelement/index.md b/files/ja/web/api/htmlstyleelement/index.md
index 142075aad2435c..191774086652d1 100644
--- a/files/ja/web/api/htmlstyleelement/index.md
+++ b/files/ja/web/api/htmlstyleelement/index.md
@@ -30,7 +30,7 @@ This interface doesn't allow to manipulate the CSS it contains (in most case). T
 
 固有のメソッドは持ちません。
 
-## 仕様
+## 仕様書
 
 | 仕様書                                                                                                                   | 策定状況                         | コメント                                                        |
 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------- |
@@ -39,7 +39,7 @@ This interface doesn't allow to manipulate the CSS it contains (in most case). T
 | {{SpecName('DOM2 HTML', 'html.html#ID-16428977', 'HTMLStyleElement')}}                             | {{Spec2('DOM2 HTML')}}     | {{domxref("LinkStyle")}} インタフェースからの継承の追加 |
 | {{SpecName('DOM1', 'level-one-html.html#ID-16428977', 'HTMLStyleElement')}}                     | {{Spec2('DOM1')}}         | 最初期の定義                                                    |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLStyleElement")}}
 
diff --git a/files/ja/web/api/htmlstyleelement/media/index.md b/files/ja/web/api/htmlstyleelement/media/index.md
index 06b54addf65477..ae6688d36ffaa1 100644
--- a/files/ja/web/api/htmlstyleelement/media/index.md
+++ b/files/ja/web/api/htmlstyleelement/media/index.md
@@ -58,6 +58,6 @@ alert('InlineStyle: ' + document.getElementById('InlineStyle').media); // 'scree
 | {{SpecName('DOM2 HTML', 'html.html#ID-16428977', 'HTMLStyleElement')}}                 | {{Spec2('DOM2 HTML')}}     |          |
 | {{SpecName('DOM1', 'level-one-html.html#ID-16428977', 'HTMLStyleElement')}}         | {{Spec2('DOM1')}}         | 初回定義 |
 
-## ブラウザーの対応
+## ブラウザーの互換性
 
 {{Compat("api.HTMLStyleElement.media")}}
diff --git a/files/ja/web/api/htmltimeelement/index.md b/files/ja/web/api/htmltimeelement/index.md
index d14c9487f8fb80..eb2ba31e2e414e 100644
--- a/files/ja/web/api/htmltimeelement/index.md
+++ b/files/ja/web/api/htmltimeelement/index.md
@@ -25,7 +25,7 @@ _また、親である {{domxref("HTMLElement")}} からプロパティを継承
 
 _特定の関数無し; 親である {{domxref("HTMLElement")}} から関数を継承します。_
 
-## 仕様
+## 仕様書
 
 | 仕様                                                                                                                     | ステータス                       | 備考                                               |
 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------- |
@@ -37,6 +37,6 @@ _特定の関数無し; 親である {{domxref("HTMLElement")}} から関数を
 
 {{Compat("api.HTMLTimeElement")}}
 
-## 関連項目
+## 関連情報
 
 - このインターフェイスを実装する HTML 要素: {{HTMLElement("time")}}.
diff --git a/files/ja/web/api/htmltitleelement/index.md b/files/ja/web/api/htmltitleelement/index.md
index 4269341aff20c4..9f9f1f67202dbc 100644
--- a/files/ja/web/api/htmltitleelement/index.md
+++ b/files/ja/web/api/htmltitleelement/index.md
@@ -18,7 +18,7 @@ translation_of: Web/API/HTMLTitleElement
 
 固有のメソッドはありません。{{domxref("HTMLElement")}} からの継承メソッドを持ちます。
 
-## 仕様
+## 仕様書
 
 | 仕様書                                                                                                                   | 策定状況                         | コメント                                      |
 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------- |
@@ -27,7 +27,7 @@ translation_of: Web/API/HTMLTitleElement
 | {{SpecName('DOM2 HTML', 'html.html#ID-79243169', 'HTMLTitleElement')}}                             | {{Spec2('DOM2 HTML')}}     | {{SpecName("DOM1")}} より変更無し     |
 | {{SpecName('DOM1', 'level-one-html.html#ID-79243169', 'HTMLTitleElement')}}                     | {{Spec2('DOM1')}}         | 最初期の定義                                  |
 
-## ブラウザ実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLTitleElement")}}
 
diff --git a/files/ja/web/api/htmlunknownelement/index.md b/files/ja/web/api/htmlunknownelement/index.md
index 2fb07227072056..64e1cdcefc968e 100644
--- a/files/ja/web/api/htmlunknownelement/index.md
+++ b/files/ja/web/api/htmlunknownelement/index.md
@@ -22,14 +22,14 @@ translation_of: Web/API/HTMLUnknownElement
 
 固有メソッドはありません。{{domxref("HTMLElement")}} インターフェイスから継承するメソッドのみ利用可能です。
 
-## 仕様
+## 仕様書
 
 | 仕様書                                                                                                           | 策定状況                         | コメント                                      |
 | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------- |
 | {{SpecName('HTML WHATWG', "elements.html#htmlunknownelement", "HTMLUnknownElement")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("HTML5 W3C")}} より変更無し |
 | {{SpecName('HTML5 W3C', "dom.html#htmlunknownelement", "HTMLUnknownElement")}}         | {{Spec2('HTML5 W3C')}}     | 最初期の定義                                  |
 
-## ブラウザー実装状況
+## ブラウザーの互換性
 
 {{Compat("api.HTMLUnknownElement")}}