HTMLリンク：アンカー、ボタン、画像、新しいタブ
HTMLリンクガイド
HTMLリンク：アンカー、ボタンリンク、画像リンク、新しいタブ | We.Inc
正しく動くHTMLリンクを作りましょう。固定ヘッダーの下でもなめらかにスクロールするページ内リンク、新しいタブ、ボタン風のリンク、画像リンク、mailto、tel、ダウンロードリンクを解説します。
HTMLのリンクは、hrefを持つ<a>要素です：<a href="/pricing">See pricing</a>。hrefにはページ、ページ内を移動する#id、メールや電話を始めるmailto:やtel:を指定します。新しいタブで開くにはtarget="_blank"を追加し、何かを変更する操作にはリンクではなく<button>を使いましょう。
リンクの種類早見表
- 別のページ
- <a href="/about">About us</a>
- このページ内のセクション
- <a href="#faq">FAQ</a>
- 新しいタブで開く
- <a href="…" target="_blank">
- 電話をかける
- <a href="tel:+15550100">
- ファイルをダウンロードする
- <a href="/menu.pdf" download>
小さなサイトに必要なリンクのパターンを、編集できるコードとライブ結果付きですべて紹介します。ページ内リンクのデモでは固定ヘッダーの問題とその1行の解決策を示し、ボタンのセクションでは、リンクをボタンのように見せるべき場合と本物のボタンにすべき場合を整理します。
- 下のセクションから、必要なリンクの種類を選びます。
- 例を編集します。結果のフレームは本物のページなので、ページ内リンクはスクロールし、Tabキーを押すとフォーカスリングが表示されます。
- スニペットをコピーし、アドレスとリンクテキストを自分のものに置き換えます。
- リンクテキストがそれだけで意味が通じるか確認します。スクリーンリーダーの利用者は、周りの文章なしでリンクの一覧を見て回ることがよくあるからです。
- 「ここをクリック」ではなく、「春のメニューをダウンロード」のように、移動先を表すリンクテキストを書きましょう。流し読みする人の助けになり、検索エンジンがリンク先のページを理解する助けにもなります。
- 自分のサイト内のページには相対パス（/contact）を使いましょう。そうすれば、プレビュー用のアドレスや新しいドメインでもリンクが動き続けます。
- 新しいタブで開くリンクには、「（新しいタブで開きます）」のようなヒントをテキストに入れ、戻るボタンが効かなくても驚かれないようにしましょう。
- ページ内リンクのidは、短く、小文字で、変わらないものにしましょう。ほかの人がブックマークしたり共有したりします。
よくある質問
target="_blank"にrel="noopener"はまだ必要ですか？
現行のブラウザーはtarget="_blank"のリンクに自動でnoopenerの挙動を適用するため、開かれたページがwindow.openerを通じてあなたのページに触れることはできません。それでもrel="noopener"を付けて害はなく、非常に古いブラウザーも守れます。どのページから訪問者が来たかを相手のサイトに知られたくない場合は、noreferrerも追加しましょう。
リンクとボタンのどちらを使うべきですか？
クリックによって、ブックマークしたり新しいタブで開いたりできる新しいアドレスへ移動するなら<a href>を使います。メニューを開く、フォームを送信する、カートに追加するなど、現在のページで何かを行うなら<button>を使います。どちらも、もう一方のような見た目にスタイルを整えられます。
ページ内リンクで見出しが固定ヘッダーの下に隠れるのはなぜですか？
ブラウザーは移動先をウィンドウの一番上までスクロールしますが、そこには固定ヘッダーがあるからです。移動先にscroll-margin-topを追加し、ヘッダーの高さに少し余裕を足した値にすれば、見出しはヘッダーのすぐ下に来ます。
ファイルでdownload属性が効かないのはなぜですか？
ブラウザーがdownloadを尊重するのは、ページと同じオリジンのファイルか、blob:やdata:のアドレスだけです。別ドメインのファイルの場合、そのサーバーが保存を指示するContent-Dispositionヘッダーを送らない限り、リンクはファイルを開くだけです。
mailtoリンクに件名を付けるには？
クエリ文字列として追加します：mailto:[email protected]?subject=Booking%20request&body=Hi。空白や特殊文字はパーセントエンコードする必要があり、空白は%20になります。
リンクの構造
- hrefのない<a>はただのプレースホルダーです。キーボードでフォーカスできず、クリックしても何も起きません。hrefがあって初めてリンクになります。タグの間のテキストがアクセシブルな名前になり、画像リンクでは画像のalt テキストがその役割を担います。
- ほかの属性はリンクを細かく調整します。targetは開く場所を、relはリンク先ページとの関係（nofollow、noopener、noreferrer、sponsored）を表し、downloadはファイルを表示せず保存するようブラウザーに求め、hreflangやtypeは移動先を説明します。
ボタンとリンクは別のコントロール
- キーボード利用者は、リンクをたどるにはEnterを、ボタンを押すにはEnterかSpaceを押します。スクリーンリーダーは両者を異なる形で読み上げ、「新しいタブで開く」のあるコンテキストメニューが出るのはリンクだけです。リンクを操作に使ったり、どちらかの代わりにdivを使ったりすると、こうした挙動の一部が失われます。
- 見た目のスタイルは自由です。ヘッダーの「登録」リンクを塗りつぶしのボタンのように見せても、リストの「削除」ボタンを下線付きの普通のテキストのように見せても構いません。何が起きるかで要素を選び、そのうえでデザインに合わせてスタイルを整えましょう。
リンクをアクセシブルにする
- リンクは色だけに頼らず見分けられる必要があります。本文では下線がその役割を果たし、ナビゲーションバーでは通常レイアウトで分かります。フォーカスのアウトラインは見えるようにしておき、ブラウザーのデフォルトを置き換える場合は、新しいものに十分なコントラストがあるか確認しましょう。
- 「続きを読む」が並ぶように、同じテキストで別々の場所へ移動するリンクを複数置くのは避けましょう。異なるテキストを書くか、スクリーンリーダー利用者向けに文を補う視覚的に隠したspanを追加します。
基本のリンク
絶対、相対、フラグメントのアドレス
相対パスは現在のページを基準に解決されます。/で始まるパスはサイトのルートから始まります。
ページ内リンク、スムーズスクロール、固定ヘッダー
移動先にidを付け、#idでリンクします。scroll-behavior: smoothで移動をアニメーションさせ、scroll-margin-topで固定ヘッダーが見出しを覆うのを防ぎます。
固定ヘッダーの下に移動するページ内リンク
バーのリンクをクリックしてください。scroll-margin-topのおかげで、各セクションはヘッダーのすぐ下に来ます。その行を削除すると、解決している問題が分かります。
リンクを新しいタブで開く
目に見えるヒント付きのtarget="_blank"
noopenerは現行のブラウザーでは暗黙的に適用されますが、残しても損はありません。noreferrerは、あなたのページのアドレスも相手のサイトから隠します。
ボタンに見えるリンクと、本物のボタン
どの要素を使うか
- 別のアドレスへ移動する
- <a href>
- 登録、プランを見る、ガイドを読む
- フォームを送信する
- <button type="submit">
- メッセージを送信、今すぐ支払う
- このページの何かを変える
- <button type="button">
- メニューを開く、カートに追加、もっと見る
ボタン風のリンクと本物のボタンを並べて
どちらも見た目は同じです。新しいタブで開けるのはリンクだけで、フォームの操作に属するのはボタンだけです。
画像リンク
画像をリンクにする
altテキストがリンクの唯一のテキストになるため、移動先を表します。ここではデモがオフラインでも動くよう、画像に小さなインラインSVGを使っています。
メール、電話、ダウンロードのリンク
mailtoとtel
hrefの電話番号は、空白なしの国際形式で書きます。表示するテキストは好きな形式で構いません。
download属性
値を指定すると、ファイル名の候補になります。適用されるのは、自分のオリジンのファイルか、blob:やdata:のアドレスだけです。
それだけで意味が通じるリンクテキスト
弱いリンクテキストと、より良いリンクテキスト
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る