From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/a/index.html | 503 +++++++++++++++++++++++++++++++++ 1 file changed, 503 insertions(+) create mode 100644 files/ja/web/html/element/a/index.html (limited to 'files/ja/web/html/element/a') diff --git a/files/ja/web/html/element/a/index.html b/files/ja/web/html/element/a/index.html new file mode 100644 index 0000000000..3809f7f927 --- /dev/null +++ b/files/ja/web/html/element/a/index.html @@ -0,0 +1,503 @@ +--- +title: ': アンカー要素' +slug: Web/HTML/Element/a +tags: + - Content + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Interactive content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Inline element + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

HTML の <a> 要素 (アンカー要素) は、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。 <a> の内容は、リンク先を示すものであるべきです。

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + +

属性

+ +

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

+ +
+
{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}
+
リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。
+
+
+
値を定義すると、ファイル名として提案します。 / および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。
+
+ +
    +
  • 値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。 +
      +
    • HTTP の {{HTTPHeader("Content-Disposition")}} ヘッダー
      • +
    • URL のパスの最後の部分
      • +
    • {{Glossary("MIME_type", "メディア種別")}} ({{HTTPHeader("Content-Type")}} ヘッダー、 data: URL の先頭、 blob: URL の {{domxref("Blob.type")}} から)
      • +
    +
    • +
+ +
注: + +
    +
  • download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。
    • +
  • +

    Content-Disposition ヘッダーが download とは異なる情報を持っていた場合、動作結果は様々です。

    + +
      +
    • +

      ヘッダーが filename を指定した場合、そちらが download 属性で指定されたファイル名より優先されます。

      +
      • +
    • +

      ヘッダーが inline の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。 82 以前のバージョンの Firefox では、ヘッダーが優先され、コンテンツがインラインで表示されます。

      +
      • +
    +
    • +
+
+
+
{{HTMLAttrDef("href")}}
+
+

ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。

+ +
    +
  • ページの節を示すフラグメント URL
    • +
  • メディアファイルの一部を示すメディアフラグメント
    • +
  • 電話番号を示す tel: URL
    • +
  • メールアドレスを示す mailto: URL
    • +
  • ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler()")}} を使用することができます。
    • +
+
+
{{HTMLAttrDef("hreflang")}}
+
リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 lang グローバル属性と同じです。
+
{{HTMLAttrDef("ping")}}
+
空白で区切られた URL のリストです。リンクをたどるときに、ブラウザーは {{HTTPMethod("POST")}} リクエストを指定された URL に、 PING を本文として送信します。通常、トラッキングに使用されます。
+
{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}
+
リンクをたどるときにどれだけのリファラーを送信するかです。有効な値とその効果については {{HTTPHeader("Referrer-Policy")}} を参照してください。
+
{{HTMLAttrDef("rel")}}
+
リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。
+
{{HTMLAttrDef("target")}}
+
リンク先の URL を表示する場所、 閲覧コンテキスト (タブ、ウィンドウ、<iframe>) の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。 +
    +
  • _self: 現在の閲覧コンテキストです。 (既定値)
    • +
  • _blank: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
    • +
  • _parent: 現在の親の閲覧コンテキストです。親がない場合は、 _self と同じ振る舞いをします。
    • +
  • _top: 最上位の閲覧コンテキスト (現在のコンテキストの祖先である "最上位" のコンテキスト) です。親の閲覧コンテキストがない場合は、 _self と同じ動作をします。
    • +
+ +
+

注: target を使用する際は、window.opener API の悪用を避けるために rel="noreferrer" を追加してください。

+
+ +
+

注: 新しいブラウザー (例えば Firefox 79 以降) では、 target="_blank" を <a> 要素に設定すると、暗黙に rel の動作を rel="noopener" と設定したのと同様になります。

+
+
+
{{HTMLAttrDef("type")}}
+
リンク先 URL の {{Glossary("MIME type", "MIME タイプ")}}の形式を表すヒントです。組み込まれている機能はありません。
+
+ +

廃止された属性

+ +
+
{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}
+
リンク先 URL の{{Glossary("character encoding", "文字エンコーディング")}}のヒントでした。 +
+

注: この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。

+
+
+
{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}
+
shape 属性とともに使用されます。カンマ区切りの座標のリストです。
+
{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}
+
ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば id 属性と name 属性を <a> 要素内で同時に使用できました。 +
+

注: 代わりにグローバル属性の {{HTMLAttrxRef("id")}} を使用してください。

+
+
+
{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}
+
この属性は、逆方向のリンクを指定します。 rel 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。
+
{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}
+
イメージマップ内のハイパーリンクの領域の形状です。 +
注: イメージマップについては {{HTMLElement("area")}} 要素を使用してください。
+
+
+ +

プロパティ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容透過的コンテンツで、フローコンテンツ (対話型コンテンツを除く) または記述コンテンツを含むもの
タグの省略{{no_tag_omission}}
許可されている親要素記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く。
暗黙の ARIA ロール{{ARIARole("link")}} (href 属性がある場合）。それ以外は 対応するロールなし
許可されている ARIA ロール +

href 属性がある場合:

+ +
    +
  • {{ARIARole("button")}}
    • +
  • {{ARIARole("checkbox")}}
    • +
  • {{ARIARole("menuitem")}}
    • +
  • {{ARIARole("menuitemcheckbox")}}
    • +
  • {{ARIARole("menuitemradio")}}
    • +
  • {{ARIARole("option")}}
    • +
  • {{ARIARole("radio")}}
    • +
  • {{ARIARole("switch")}}
    • +
  • {{ARIARole("tab")}}
    • +
  • {{ARIARole("treeitem")}}
    • +
+ +

href 属性がない場合:

+ +
    +
  • any
    • +
+
DOM インターフェイス{{DOMxRef("HTMLAnchorElement")}}
+ +

例

+ +

絶対 URL へのリンク

+ +

HTML

+ +
<a href="https://www.mozilla.com">
+  Mozilla
+</a>
+ +

結果

+ +

{{EmbedLiveSample('Linking_to_an_absolute_URL')}}

+ +

相対 URL へのリンク

+ +

HTML

+ +
<a href="//example.com">Scheme-relative URL</a>
+<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
+<a href="./p">Directory-relative URL</a>
+
+ + + +

結果

+ +

{{EmbedLiveSample('Linking_to_relative_URLs')}}

+ +

同じページの要素へのリンク

+ +
<!-- <a> element links to the section below -->
+<p><a href="#Section_further_down">
+  Jump to the heading below
+</a></p>
+
+<!-- Heading to link to -->
+<h2 id="Section_further_down">Section further down</h2>
+
+ +
+

注: href="#top" または空のフラグメント (href="#") を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています。

+
+ +

メールアドレスへのリンク

+ +

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 mailto: スキームを使用してください。

+ +
<a href="mailto:nowhere@mozilla.org">nowhere にメールを送る</a>
+ +

件名、本文、他の定義済みコンテンツを含めるなど、mailto URL スキームの詳細については、電子メールのリンクまたは {{RFC(6068)}} をご覧ください。

+ +

電話番号へのリンク

+ +
<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(555)5309">(555) 5309</a>
+ +

tel: リンクは端末の能力によって様々な動作をします。

+ + + +

tel URL スキームについての構文、追加機能、その他の詳細について、詳しくは {{RFC(3966)}} をご覧ください。

+ +

download 属性を使用して <canvas> を PNG として保存する

+ +

{{HTMLElement("canvas")}} 要素の内容を画像として保存する場合は、 download 属性をもつリンクを作成し、キャンバスのデータを data: URLで示します。

+ + + +
HTML
+ +
<p>マウスボタンを押しっぱなしにして動かすと描画されます。
+  <a href="" download="my_painting.png">絵をダウンロード</a>
+</p>
+
+<canvas width="300" height="300"></canvas>
+
+ +
CSS
+ +
html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}
+ +
JavaScript
+ +
var canvas = document.querySelector('canvas'),
+    c = canvas.getContext('2d');
+c.fillStyle = 'hotpink';
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI*2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener('mousemove', event =>
+  draw(event.offsetX, event.offsetY)
+);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+
+document.querySelector('a').addEventListener('click', event =>
+  event.target.href = canvas.toDataURL()
+);
+
+ +
結果
+ +

{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}

+ +

セキュリティとプライバシー

+ +

<a> 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。

+ +

target="_blank" を rel="noreferrer" や rel="noopener" なしで使用すると、ウェブサイトが {{domxref("window.opener")}} API 搾取攻撃を受けやすくなります (vulnerability description) が、新しい版のブラウザー (Firefox 79 以降など) では target="_blank" を設定すると、 rel="noopener" と同じ保護が提供されます。

+ +

アクセシビリティ

+ +

強力なリンクテキスト

+ +

リンクの内容は、文脈から外れたとしても、リンクの行き先を示すべきです。

+ +

アクセシビリティに対応していない貧弱なリンクテキスト

+ +

よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。

+ +
<p>
+  私たちの製品については<a href="/products">こちら</a>をご覧ください。
+</p>
+
+ +

強力なリンクテキスト

+ +

幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。

+ +
<p>
+  <a href="/products">私たちの製品について</a>詳しくご覧ください。
+</p>
+ +

支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。

+ +

onclick イベント

+ +

よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、 href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、 click を待ち受けするようにするというものがあります。

+ +

これらの偽の href 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。

+ +

代わりに {{HTMLElement("button")}} を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。

+ + + +

リンクを新しいタブやウィンドウで開くために target="_blank" を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。

+ +

弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。

+ + + +
<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia (新しいウィンドウで開きます)
+</a>
+
+ + + +
<a href="2017-annual-report.ppt">
+  2017 年次レポート (PowerPoint)
+</a>
+
+ +

この種のリンクの動作を表すためにテキストの代わりにアイコンが使われている場合は、 {{HTMLAttrxRef("alt", "img", "alt のテキスト", "true") }}を確実に入れてください。

+ +
<a  target="_blank" href="https://www.wikipedia.org">
+  Wikipedia
+  <img alt="(新しいタブで開く)" src="newtab.svg">
+</a>
+
+<a href="2017-annual-report.ppt">
+  2017 Annual Report
+  <img alt="(PowerPoint ファイル)" src="ppt-icon.svg">
+</a>
+ + + + + +

スキップリンクは {{HTMLElement("body")}} コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、 CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。

+ +
<body>
+  <a href="#content">メインコンテンツへスキップ</a>
+
+  <header>
+    …
+  </header>
+
+  <main id="content"> <!-- スキップリンクが辿り着く位置 -->
+
+ +
.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}
+ +

スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。

+ +

スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。

+ + + +

大きさと近接性

+ +

大きさ

+ +

リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。最小の大きさは 44×44 CSS ピクセルが推奨されます。

+ +

散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。

+ + + +

近接性

+ +

リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。

+ +

間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}referrerpolicy 属性を追加。
{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML5 W3C")}}
{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}{{Spec2("HTML4.01")}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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