From 507ad4b86adf1c7c8f78d61f1e58cb9b054c12f3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 31 Mar 2021 23:55:25 +0900 Subject: Add ja translation of the HTML Portal element (#234) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 翻訳のために原文をコピー * HTML の portal 要素の記事を新規翻訳 2021/01/19時点の英語版に基づき新規翻訳 --- files/ja/web/html/element/portal/index.html | 86 +++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 files/ja/web/html/element/portal/index.html diff --git a/files/ja/web/html/element/portal/index.html b/files/ja/web/html/element/portal/index.html new file mode 100644 index 0000000000..76d777dfef --- /dev/null +++ b/files/ja/web/html/element/portal/index.html @@ -0,0 +1,86 @@ +--- +title: ': ポータル要素' +slug: Web/HTML/Element/portal +tags: + - Content + - Element + - Embedded content + - Embedding + - HTML + - HTML embedded content + - Reference + - Web + - Portal +translation_of: Web/HTML/Element/portal +--- +
{{HTMLRef}}
+ +

HTML のポータル要素 (<portal>) は、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。

+ +

<portal> は <iframe> に似ています。 <iframe> では独立した{{Glossary("browsing context", "閲覧コンテキスト")}}を作成して埋め込みます。しかし、 <portal> で埋め込まれるコンテンツは <iframe> の場合よりも制限されます。これを操作することはできませんので、文書にウィジェットを埋め込むには適していません。その代わり、 <portal> は他のページのコンテンツのプレビューとして動作します。そのため、埋め込まれたコンテンツへのシームレスな遷移により移動を行うことができます。

+ + + + + + + + + + + + +
暗黙の ARIA ロールbutton
DOM インターフェイス{{domxref("HTMLPortalElement")}}
+ +

属性

+ +

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

+ +
+
{{htmlattrdef("referrerpolicy")}}
+
リファラーポリシーを設定します。これは、 src 属性の値で指定された URL のページをリクエストする際に使用されます。 +
+
{{htmlattrdef("src")}}
+
埋め込むページの URL です。
+
+ +

例

+ +

基本的な例

+ +

以下の例は https://example.com のコンテンツをプレビューとして埋め込みます。

+ +
<portal id="exampleportal" src="https://example.com/"></portal>
+ +

アクセシビリティの考慮

+ +

<portal>が表示するプレビューは、操作が可能ではないため、入力イベントやフォーカスを受けません。そのため、ポータルの埋め込みコンテンツは、{{Glossary("accessibility tree", "アクセシビリティツリー")}}の要素として公開されません。ポータルは、ボタンのように移動してアクティブにすることができ、クリックしたときの既定の動作は、ポータルを有効にすることです。

+ +

ポータルには、埋め込まれたページのタイトルが既定のラベルが与えられます。タイトルがない場合は、プレビューで表示されるテキストが結合されてラベルが作成されます。 {{htmlattrxref("aria-label")}} 属性を使用すると、これを上書きすることができます。

+ +

事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の {{cssxref("display")}} プロパティの値を none にして非表示にしてください。

+ +

ポータルがアクティブ化している間にアニメーションを使用する場合は、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を尊重してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Portals')}}{{Spec2('Portals')}}初回定義
+ +

ブラウザーの互換性

+ +

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

-- cgit v1.2.3-54-g00ecf