diff options
Diffstat (limited to 'files/ja/web/html/element/base/index.html')
| -rw-r--r-- | files/ja/web/html/element/base/index.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/files/ja/web/html/element/base/index.html b/files/ja/web/html/element/base/index.html new file mode 100644 index 0000000000..9826ce1a69 --- /dev/null +++ b/files/ja/web/html/element/base/index.html @@ -0,0 +1,137 @@ +--- +title: '<base>: 文書の基底 URL 要素' +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML 文書メタデータ + - 'HTML:メタデータコンテンツ' + - Reference + - 要素 +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>HTML の <code><base></code> 要素</strong>は、文書内におけるすべての<em>相対</em> URL の基点となる URL を指定します。</span> <code><base></code> 要素は、文書内に1つだけ置くことができます。</p> + +<p>文書に使われている基底 URL は、スクリプトから {{domxref('document.baseURI')}} を使用して問い合わせることができます。文書に <code><base></code> 要素がない場合、 <code>baseURI</code> は既定で {{domxref("location.href")}} になります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>メタデータコンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。この要素は{{Glossary("empty element", "空要素")}}。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>終了タグを用いてはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>他に {{HTMLElement("base")}} 要素を含まない {{HTMLElement("head")}}。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th>DOM インターフェイス</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<div class="blockIndicator warning"> +<p>以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素の前におかなければ<strong>なりません</strong>。例えば {{HTMLElement("link")}} の <code>href</code> 属性などです。</p> +</div> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>文書全体を通して相対 URL に使用される基底 URL です。絶対 URL と相対 URL が使用できます。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><strong>キーワード</strong>または<strong>作者が定義した名前</strong>で既定の{{Glossary("browsing context", "閲覧コンテキスト")}}を表し、 {{HTMLElement("a")}} または {{HTMLElement("form")}} 要素が明示的に <code>target</code> 属性を持たない場合に、移動の結果を表示する先として使用されます。</dd> + <dd>以下のキーワードは特別な意味を持ちます。 + <ul> + <li><code>_self</code> (既定値): 同じ閲覧コンテキストに結果を表示します。</li> + <li><code>_blank</code>: 新しい無名の閲覧コンテキストに結果を表示します。</li> + <li><code>_parent</code>: 現在のコンテキストの親の閲覧コンテキストに結果を表示します。親がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以上の親をもたない閲覧コンテキスト）に結果を表示します。親がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + </ul> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Multiple_<base>_elements" name="Multiple_<base>_elements">複数の <base> 要素</h3> + +<p>複数の <code><base></code> 要素が使用された場合、最初の <code>href</code> と最初の <code>target</code> の値が使用され、他はすべて無視されます。</p> + +<h3 id="In-page_anchors" name="In-page_anchors">ページ内アンカー</h3> + +<p>文書内のフラグメントを指すリンク — 例えば <code><a href="#some-id"></code> — は <code><base></code> によって解決され、基底 URL にフラグメントを付けて HTTP リクエストを発行します。例を示します。</p> + +<ol> + <li><code><base href="https://example.com"></code> が指定された場合</li> + <li>...そこで <code><a href="#anchor">Anker</a></code> というリンクの場合</li> + <li>...リンク先は <code>https://example.com/#anchor</code> となります。</li> +</ol> + +<h3 id="Open_Graph">Open Graph</h3> + +<p><a href="http://ogp.me/">OpenGraph</a> のメタタグは <code><base></code> を認識しないので、次のように常に完全 URL を使用してください。</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><base href="https://www.example.com/"> +<base target="_blank"> +<base target="_top" href="https://example.com/"> +</pre> + +<h2 id="Specifications" name="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('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットから変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>target</code> の挙動を定義</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>target</code> 属性を追加</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.base")}}</p> |