リンクとナビゲーション

docs.scrimba.com

単独のページはそれ自体が孤島です。リンクがページをウェブとして繋ぎます。訪問者が別のページに移動したり、下の方のセクションにジャンプしたり、メールアプリを開いてメッセージを書いたりできるようになります。すべての背景にある要素はアンカー<a>で、href属性と連携して機能します。要素と属性という言葉が新しい場合は、HTMLとは何かの章をご覧ください。

アンカー要素

リンクは**アンカー要素**で作成され、<a>と書きます。href属性を指定します。これがリンク先であり、開きタグと閉じタグの間のテキストは訪問者が見てクリックするものです。

<a href="https://scrimba.com">Scrimbaを訪問</a>

「Scrimbaを訪問」という言葉がクリック可能なリンクとして表示されます。クリックすると、ブラウザはhrefのアドレスを読み込みます。

hrefを案内板に書かれた目的地と考え、リンクテキストを看板に描かれたラベルと考えてください。ラベルは人々が読むもの。目的地は矢印が指すところです。

アンカー要素<a>は、コンテンツの一部をリンクとしてマークし、そのhref属性（ハイパーテキストリファレンスの略）が目的地を保持します。タグ間のコンテンツがリンクのラベル、クリック可能な部分です。

<a href="https://scrimba.com/courses">コースを閲覧する</a>

<a>は**インライン要素**なので、単語のようにテキストの行内に配置されるため、段落の中にリンクを挿入してもテキストが改行されません。

テキストだけに限定されるものではありません。アンカーは画像やコンテンツのブロック全体をラップできます。それらすべてがクリック可能になります。

<a href="/courses/html">
  <img src="html-course.jpg" alt="HTMLコース">
  <span>HTMLコースを開始</span>
</a>

アンカー要素<a>はhref属性を持つ場合のみリンクになります。href属性がないと、ブラウザはそれをリンクとしても扱わない単なるプレースホルダーです。ラベル、つまりタグ間のテキストは、ページを上から下へ読まない人にとって最も重要な部分です。

スクリーンリーダー（ページを読み上げるソフトウェア）は、ページ上のすべてのリンクのリストを引き出して、そのユーザーが文脈を離れてスキャンできるようにします。そのリストでは、「ここをクリック」と「もっと読む」は区別がつかないように見えるので、リンクテキストは文脈を離れても意味をなす必要があります。「払い戻しポリシーを読む」と書いてください。「ここをクリック」ではなく。

検索エンジンも同じシグナルを読みます。リンク内の単語、**アンカーテキスト**は、クローラー（検索エンジンがページを読むために使うプログラム）に、リンク先のページが何についてのものかを伝えるため、説明的なラベルはリンク先ページと自分のページの両方に役立ちます。

Junoアンカー要素 アンカーは<a href="...">です。hrefはどこへ行くかで、タグの間のテキストは人々がクリックするものです。これが要素全体です。この2つの部分を把握すれば、ウェブのどこにでもリンクできます。

Junoアンカー要素<a>にhrefを加えるとリンクになります。それはインライン要素なので文章に直接挿入されます。テキスト以上のものをラップできます。画像やコンテンツのブロック全体が機能します。ラベルがクリック可能な部分、hrefが目的地です。

Junoアンカー要素 ラベルは移動する部分です。スクリーンリーダーと検索エンジンの両方が文脈を離れてそれを読むので、click hereは何も伝えません。代わりにテキストで目的地を説明してください。そしてhrefがない<a>はリンクではなく、単なるマークアップです。

絶対URLと相対URL

すべてのリンクには指し示すアドレスが必要です。2つの種類があります。絶対URLは完全なアドレスで、https://で始まります。アドレスバーに入力するのと同じものです。別のウェブサイトにリンクするのに使用してください。

<a href="https://scrimba.com">Scrimbaのホームページ</a>

**相対URL**は自分のサイト内の別のページへのショートカットです。完全なアドレスではなく、今いる場所からのパスを指定します。

<a href="about.html">私たちについて</a>

そのリンクは、現在のページと同じフォルダのabout.htmlファイルを探します。絶対URLは国と都市を含む完全な住所。相対URLは「ここから2軒先」です。

絶対URLはプロトコル（https）とドメインを含む完全なアドレスを持っています。相対URLは現在のページのアドレスに対して解決されるので、完全な場所ではなくパスを説明しています。

<a href="/blog/getting-started">はじめに</a>      <!-- サイトルートから -->
<a href="getting-started">はじめに</a>            <!-- 現在のフォルダから -->
<a href="../index.html">ホームに戻る</a>         <!-- 1つ上のフォルダへ -->

先頭の/は**ルート相対**になります。サイトルートから始まるため、リンク元のページがどこであっても同じ場所を指します。先頭のスラッシュがない場合は「現在のページのフォルダから相対的に」という意味。../は1つ上のレベルへ移動します。

hrefはウェブページ以外のアドレスも処理します。mailto:は訪問者のメールアプリを新しいメッセージで開き、電話ではtel:が通話を開始します。

<a href="mailto:[email protected]">メールを送る</a>
<a href="tel:+81901234567">サポートに電話</a>

すべての相対URLは**ベースURL**に対して解決されます。デフォルトでは、これは現在のページのアドレスです。つまり、同じhrefはページが存在する場所に応じて異なる場所に解決される可能性があり、これが3つの形式が異なる動作をする理由全体です。

• ルート相対、/で始まるパス（/blog/post）：ドメインルートから解決されるため、サイト上のあらゆるページからおなじ場所を指します。
• ドキュメント相対、先頭にスラッシュなし（post、../post）：現在のページのフォルダから解決されます。ページを移動した瞬間に動作しなくなります。
• 完全に絶対（https://example.com/blog/post）：プロトコルとドメインを明示的に指定します。他のサイトに必要。自分のサイトには不必要に脆いです。

自分のサイト上のものについては、ルート相対リンクを優先してください。フォルダの再構成に耐えられ、ドメインをハードコードしないため、ステージングサーバーからプロダクションへ移動するときに単一のリンクの書き直しなしでサイト全体を移動できます。外部の目的地には完全に絶対URLを保持します。選択肢がありません。

mailto:とtel:に関する注意：これらは通常のhref値なので同じアンカールールに従いますが、別のアプリ（メールクライアントまたは電話ダイアラー）に制御を引き渡し、あらゆるデバイスで異なる動作をします。便宜上便利ですが、到達するための唯一のルートとしてではありません。

Juno絶対URLと相対URL 2種類のアドレス。絶対URLは他のサイト用の完全なhttps://...。相対URLはabout.htmlのような自分のサイト上のページへのショートカット。完全な住所対「ここから2軒先」。自分のページに相対リンクを使用し始めると、タイプする量が大幅に減ります。

Juno絶対URLと相対URL 相対URLは現在のページに対して解決されるため、先頭の/は「サイトルートから」を意味し、../は「フォルダを上へ」を意味します。hrefはmailto:とtel:も受け取ります。これらはメールアプリまたはダイアラーに引き渡します。ルート相対は自分のサイト内のリンクの安全なデフォルトです。

Juno絶対URLと相対URL すべての相対URLは現在のページのアドレスに対して解決されます。これが、ルート相対リンク（/blog/post）がフォルダの移動に耐える一方、ドキュメント相対リンクはそうでない理由です。他の人のサイトに完全な絶対URLを保持してください。mailto:とtel:はデバイスに依存しているため、到達するための唯一の方法にしてはいけません。

リンク対象、rel、新しいタブで開く

デフォルトでは、リンクをクリックすると同じタブに新しいページが読み込まれ、見ていたページが置き換わります。代わりに新しいタブで開いて、訪問者がページを開いたままにしたい場合があります。それはtarget属性を_blankに設定して行います。

<a href="https://scrimba.com" target="_blank">Scrimbaを新しいタブで開く</a>

_blankは「新しい空白なタブ」を意味します。通常のリンク開き方は扉をくぐって次の部屋へ歩くようなもの。target="_blank"は2番目の扉を開くので、最初の部屋はそのままです。

target="_blank"は新しい**ブラウジングコンテキスト**、つまり新しいタブまたはウィンドウでリンクを開くので、訪問者はページ上の場所を失いません。注意する価値があります。rel="noopener"とペアで使用してください。

<a href="https://example.com" target="_blank" rel="noopener">
  外部リソース
</a>

noopenerがないと、開いたページはJavaScriptを通じてあなたのページへの参照を取得でき、それに干渉できます。rel="noopener"はその接続を切断します。最新のブラウザはtarget="_blank"ではこれを自動的に実行するようになりましたが、自分で記述することは明示的であり、古いブラウザでも安全です。

サイトから外へ出るリンク以外の場合は新しいタブで開かないでください。サイト内のリンクを新しいタブで開くと人々は驚き、戻るボタンが動作しなくなります。target="_blank"は別の場所へ向かうリンク用に保持してください。それでも意識的に使用してください。

rel属性（リレーションシップの略）は、リンク先ページがあなたのページにどのように関連しているかを説明します。その値の一部は実際の機能を実行します。それぞれが特定の問題を解決します。

• noopener: 新しいページがwindow.openerを通じてJavaScriptであなたのページへの参照を取得するのを防ぎます。それ以外の場合は、それを使用してあなたのタブを似たようなページにリダイレクトできます。常にtarget="_blank"とペアで使用してください。ブラウザはこれを暗示するようになったものの、記述することで古いブラウザを保護します。
• noreferrer: また、リファラー（訪問者がどのページから来たかを目的地に伝えるヘッダー）を削除します。これにより、対象サイトはリンクがあなたから来たことを知ることができません。またnoopenerを暗示しています。リンクがどこに存在するかを明かしたくない場合に使用してください。
• nofollow: 検索エンジンにリンク先ページにランキングクレジットを渡さないよう伝えます。ユーザーが送信したコンテンツやコメントなど、保証しないリンクで使用してください。
• sponsored: 有料またはアフィリエイトリンクであることをマークするため、検索エンジンはリンクが支払いのために配置されたことを知っています。これを使用することで、有料リンクのガイドラインの範囲内にとどまります。

rel="noopener noreferrer"のように、スペースで区切られたリストで結合でき、ブラウザが各を適用します。

Junoリンク対象、rel、新しいタブで開くtarget="_blank"は新しい空白なタブでリンクを開くため、ページはそのままです。それを外して、リンクは同じタブで開きます。これはほとんどの場合に人々が期待するものです。新しいタブは他のサイトへ向かうリンク用に保存してください。

Junoリンク対象、rel、新しいタブで開くtarget="_blank"は新しいタブを開きます。rel="noopener"とペアにして、新しいページがあなたのタブに到達できないようにしてください。ブラウザはほとんどこれを実行するようになりました。ただし自分で記述することで古いブラウザでも安全に保ちます。自分のページを新しいタブで開かないでください。戻るボタンが動作しなくなり、人々は驚きます。

Junoリンク対象、rel、新しいタブで開くrelは小さなツールボックスです。noopenerはタブへのJavaScript接続を遮断し、noreferrerはクリックがどこから来たかも隠し、nofollowはランキングクレジットを差し控え、sponsoredは有料リンクをフラグしています。noopener noreferrerのようにスペースで結合してください。デフォルトではなく、各問題が表示されたときに使用してください。

フラグメントIDを使ったページ内リンク

リンクは他のページだけに行くわけではありません。現在のページをさらに下へジャンプさせることもできます。目次がそうするように。最初に、達したい場所、例えば見出しに、一意のid属性を付与します。

<h2 id="pricing">料金</h2>

次に、その名前の前に#を付けてそこにリンクします。

<a href="#pricing">料金にジャンプ</a>

リンクをクリックするとページが下にスクロールして料金見出しに移動します。#nameの部分を**フラグメント**と呼びます。idはページに挿入するブックマークで、#リンクはそこに直接ジャンプするあなたです。

idは要素に一意の名前を付けます。hrefが#で始まるリンクは、現在のページのその id を持つ要素を指します。

<a href="#contact">お問い合わせ</a>
...
<section id="contact">
  <h2>お問い合わせ</h2>
</section>

#の後ろの値は**フラグメント識別子**です。2つのルールでそれが機能します。id はページで一意である必要があり、リンクのフラグメントは大文字小文字を含めて正確に一致する必要があります。

別のページのフラグメントにもリンクできます。URLの後ろにそれを追加するだけです。

<a href="/help#refunds">払い戻しポリシー</a>

ヘルプページを読み込み、id="refunds"の要素まですぐにスクロールします。href内の裸の#または#topはページの上部にジャンプします。

フラグメントリンク（#で始まるhref）はページをidが一致する要素に移動し、対象がフォーカスを受け取ることができる場合、キーボードフォーカスもそこに移動します。この動作は**スキップリンク**の基礎です。ページの最初、通常はキーボードまたはスクリーンリーダーユーザーが繰り返されるナビゲーションをスキップしてメインコンテンツに直接ジャンプできるリンクです。

<body>
  <a href="#main" class="skip-link">メインコンテンツにスキップ</a>
  <nav>...</nav>
  <main id="main">
    ...
  </main>
</body>

これがなければ、キーボードで移動している人は、コンテンツに到達する前に、すべてのページのすべてのナビゲーションリンクをタブで通る必要があります。スキップリンクは通常、フォーカスを受け取るまで隠されています。次に表示されます。マウスユーザーの邪魔にならないため、キーボードユーザーの最初の停止になります。

2つの詳細が動作するかどうかを決定します。対象（ここでは<main id="main">）が本当のコンテンツコンテナである必要があります。そのコンテナにtabindex="-1"を与えると、すべてのブラウザでフォーカスがそこに到達することが確実になります。（tabindex="-1"は「スクリプトでフォーカス可能だが通常のタブ順序の一部ではない」を意味します）。ページが読み込まれた直後にTab を押してテストしてください。最初にフォーカスされるのはスキップリンクである必要があります。

JunoフラグメントIDを使ったページ内リンク スポットにidを与えてから、#とその同じ名前を使用してそこにリンクしてください。<a href="#pricing">のようにします。ページはそこまでスクロールします。idをブックマークと、#リンクをそこにジャンプするのとして考えてください。

JunoフラグメントIDを使ったページ内リンクhrefの#nameはそのidを持つ要素にジャンプします。id はページで一意である必要があり、フラグメントとは大文字小文字を含めて正確に一致する必要があります。#nameをURLの後ろに追加して、別のページ上のスポットに到達します。

JunoフラグメントIDを使ったページ内リンク フラグメントリンクはスクロール位置だけでなくフォーカスも移動します。これがスキップリンクを機能させるものです。ページ最初の<a href="#main">をクリックすると、キーボードユーザーはナビゲーションをスキップしてメインコンテンツに直接ジャンプできます。それを実際のコンテンツコンテナで指して、すべてのブラウザでフォーカスがそこに到達するようにそれにtabindex="-1"を与えてください。ページ読み込みが新しい状態でTabキーを押してチェックしてください。

ナビゲーション構築

ほとんどのサイトは上部にリンクの行を持っています。ホーム、について、お問い合わせ。それは**ナビゲーション**であり、アンカーの集合です。HTMLはそれ用に作られた要素があります。<nav>はブロックをページのナビゲーションとしてマークしています。

<nav>
  <a href="/">ホーム</a>
  <a href="/about">について</a>
  <a href="/contact">お問い合わせ</a>
</nav>

各リンクは通常のアンカーです。それらを<nav>でラップすることで、ブラウザおよび他のツールに「このグループはサイトを回る方法です」と伝えます。

ナビゲーションはリンクのリストであり、それを構築する慣例的な方法はそれを正確に言います。<nav>内の順序なしリスト。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/courses">コース</a></li>
    <li><a href="/pricing">料金</a></li>
  </ul>
</nav>

なぜリスト？スクリーンリーダーは「リスト、3つのアイテム」とアナウンスするため、そのユーザーは通り抜ける前にいくつのリンクが来るかを知っています。<nav>要素は**ランドマーク**です。支援ツールのユーザーはそこに直接ジャンプでき、スキップリンクがメインコンテンツにジャンプする方法と同じです。主要なナビゲーションブロックにnavを使用してください。すべてのリンクのグループではなく。

<nav>はランドマークリージョン（支援ツールがリストしてジャンプできるページのラベル付きエリア）で、ページのメインナビゲーションはその中に存在しています。サイトが複数のnavを持つ場合、たとえばプライマリメニューとフッターリンクのセット。各にaria-labelでラベルを付けて、区別できるようにしてください。

<nav aria-label="Primary">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/courses" aria-current="page">コース</a></li>
    <li><a href="/pricing">料金</a></li>
  </ul>
</nav>

ここで場所を獲得する属性は**aria-current**です。訪問者が既にいるページを指すリンクにaria-current="page"を設定してください。視覚的には、現在のページをそのリンクをハイライトして表示できます。aria-current="page"はスクリーンリーダーに同じことを伝えます。その後、リンクを「現在のページ」とアナウンスします。なければ、ハイライトされたリンクは見えるユーザーにはアクティブに見えますが、色が見えない人には他と区別がつきません。

マークアップを正直に保ってください。現在のページへのリンクは真のアンカーのままになります。キーボード動作は一貫しています。aria-currentは色だけではなく、「あなたはここにいます」という意味を持ちます。

Junoナビゲーション構築 ナビゲーションは<nav>でラップされたリンクのグループです。ホーム、について、お問い合わせなど。<nav>は「これはあなたがサイトを回る方法です」とすべてに伝えます。タグ内のリンクは通常のアンカーです。学ぶべき新しいものはありません。

Junoナビゲーション構築 navを<nav>内のリンクの<ul>として構築してください。リストはスクリーンリーダーに来ているリンク数を伝え、<nav>は人々がジャンプできるランドマークです。トップバーとフッターの実際のメニュー、すべてのリンククラスタではなくそれに保存してください。

Junoナビゲーション構築<nav>はランドマークなので、ページに複数ある場合はaria-labelで各にラベルを付けてください。訪問者の現在のページをaria-current="page"でマークしてください。これはスクリーンリーダーが、ハイライトの色が見えるユーザーに示す内容を学ぶ方法です。現在のリンクを実際のアンカーに保ってください。キーボード動作は一貫したままです。