Add ja translation of the HTML Portal element (#234)

* 翻訳のために原文をコピー

* HTML の portal 要素の記事を新規翻訳

2021/01/19時点の英語版に基づき新規翻訳

1 files changed, 86 insertions, 0 deletions

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: '<portal>: ポータル要素'
+slug: Web/HTML/Element/portal
+tags:
+  - Content
+  - Element
+  - Embedded content
+  - Embedding
+  - HTML
+  - HTML embedded content
+  - Reference
+  - Web
+  - Portal
+translation_of: Web/HTML/Element/portal
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML のポータル要素 (<code>&lt;portal&gt;</code>)</strong> は、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。</span></p>
+
+<p><code>&lt;portal&gt;</code> は <code>&lt;iframe&gt;</code> に似ています。 <code>&lt;iframe&gt;</code> では独立した{{Glossary("browsing context", "閲覧コンテキスト")}}を作成して埋め込みます。しかし、 <code>&lt;portal&gt;</code> で埋め込まれるコンテンツは <code>&lt;iframe&gt;</code> の場合よりも制限されます。これを操作することはできませんので、文書にウィジェットを埋め込むには適していません。その代わり、 <code>&lt;portal&gt;</code> は他のページのコンテンツのプレビューとして動作します。そのため、埋め込まれたコンテンツへのシームレスな遷移により移動を行うことができます。</p>
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">暗黙の ARIA ロール</th>
+      <td><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></td>
+    </tr>
+    <tr>
+      <th scope="row">DOM インターフェイス</th>
+      <td>{{domxref("HTMLPortalElement")}}</td>
+     </tr>
+  </tbody>
+</table>
+   
+<h2 id="Attributes">属性</h2>
+
+<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>
+
+<dl>
+  <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+  <dd><a href="/ja/docs/Web/HTTP/Headers/Referrer-Policy">リファラーポリシー</a>を設定します。これは、 <code>src</code> 属性の値で指定された URL のページをリクエストする際に使用されます。
+  </dd>
+  <dt id="attr-src">{{htmlattrdef("src")}}</dt>
+  <dd>埋め込むページの URL です。</dd>
+</dl>
+
+<h2 id="Examples">例</h2>
+
+<h3>基本的な例</h3>
+
+<p>以下の例は <code>https://example.com</code> のコンテンツをプレビューとして埋め込みます。</p>
+
+<pre class="brush:html">&lt;portal id="exampleportal" src="https://example.com/"&gt;&lt;/portal&gt;</pre>
+
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><code>&lt;portal&gt;</code>が表示するプレビューは、操作が可能ではないため、入力イベントやフォーカスを受けません。そのため、ポータルの埋め込みコンテンツは、{{Glossary("accessibility tree", "アクセシビリティツリー")}}の要素として公開されません。ポータルは、ボタンのように移動してアクティブにすることができ、クリックしたときの既定の動作は、ポータルを有効にすることです。</p>
+
+<p>ポータルには、埋め込まれたページのタイトルが既定のラベルが与えられます。タイトルがない場合は、プレビューで表示されるテキストが結合されてラベルが作成されます。 {{htmlattrxref("aria-label")}} 属性を使用すると、これを上書きすることができます。</p>
+
+<p>事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の {{cssxref("display")}} プロパティの値を <code>none</code> にして非表示にしてください。</p>
+
+<p>ポータルがアクティブ化している間にアニメーションを使用する場合は、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>を尊重してください。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+   <tr>
+   <td>{{SpecName('Portals')}}</td>
+   <td>{{Spec2('Portals')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("html.elements.portal")}}</p>