ハイパーリンクの作成

ハイパーリンクは、ウェブが提供する最も刺激的な技術革新の一つです。 ハイパーリンクは、ウェブが始まった当初からある機能であり、ウェブをウェブたらしめているものです。 ハイパーリンクによって、文書を他の文書やリソースにリンクしたり、文書の特定の部分にリンクしたり、ウェブアドレスでアプリを利用できるようにすることができます。 ほとんどすべてのウェブコンテンツはリンクに変換することができ、クリックするか他の方法でアクティブにすると、ウェブブラウザーは別のウェブアドレス (URL) に移動します。

例えば、 BBC のホームページには、複数のニュース記事だけでなく、サイトのさまざまなエリア（ナビゲーション機能）、ログイン/登録ページ（ユーザーツール）などを指し示すリンクが多数掲載されています。

基本的なリンクは、リンクにしたいテキストやその他のコンテンツを <a> 要素の中に囲むことで作成し、href （ハイパーテキスト参照またはターゲットとも）にリンク先にしたいウェブアドレスを入れます。

<p>
  <a href="https://www.mozilla.org/ja/">Mozilla ホームページ</a
  >へのリンクを作成しています。
</p>

これは以下のような結果になります。
Mozilla ホームページへのリンクを作成しています。

前述したように、ブロックレベル要素 を含む、ほぼすべてのコンテンツをリンクにすることが可能です。 見出しをリンクにしたい場合は、以下のコードのようにアンカー（<a>）要素で囲みます。

<a href="https://developer.mozilla.org/ja/">
  <h1>MDN Web Docs</h1>
</a>
<p>2005 年から CSS、HTML、JavaScript などのウェブ技術を文書化しています。</p>

これで見出しがリンクになります。

リンクにしたい画像がある場合は、<a> 要素により、<img> 要素で参照する画像ファイルを囲んでください。

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}

<a href="https://developer.mozilla.org/ja/">
  <img src="mdn_logo.svg" alt="MDN Web Docs ホームページ" />
</a>

これにより、MDN ロゴがリンクになります。

リンクに追加したいもう一つの属性は title です。 タイトルには、そのページがどのような情報を含んでいるか、あるいはウェブサイトで注意すべきことなど、リンクに関する追加情報が含まれます。

<p>
  <a
    href="https://www.mozilla.org/ja/"
    title="Mozilla の使命と協力方法について調べる最適な場所">
    Mozilla ホームページ</a>へのリンクを作成しています。
</p>

これにより、以下のような結果が得られ、リンクの上にマウスを当てると、タイトルがツールチップとして表示されます。

ローカルのコードエディターを使用して HTML 文書を作成してください。テンプレートを取得してください。

• HTML の本文の中に、1 つ以上の段落または他の種類の既に知っているコンテンツを追加してみてください。
• コンテンツの一部をリンクにしてください。
• タイトル属性を含めてください。

リンク先を完全に理解するには、 URL とファイルパスを理解する必要があります。この節では、これを達成するために必要な情報を提供します。

URL (Uniform Resource Locator) は、何かがウェブ上のどこにあるのかを定義するテキストの文字列です。たとえば、 Mozilla の日本語のホームページは https://www.mozilla.org/ja/ にあります。

URL はファイルを見つけるためにパスを使います。パスはファイルシステム内の目的のファイルが存在する場所を指定します。ディレクトリー構造の簡単な例を見てみましょう（creating-hyperlinks ディレクトリーを参照してください。

このディレクトリー構造のルートは creating-hyperlinks と呼ばれます。ウェブサイトを使用してローカルで作業する場合は、サイト全体が入る 1 つのディレクトリーがあります。ルート内には、index.html ファイルと contacts.html があります。実際のウェブサイトでは、index.html が私たちのホームページまたはランディングページ（ウェブサイトまたはウェブサイトの特定の部分の入口として機能するウェブページ）になります。

私たちのルートの中にも 2 つのディレクトリー、 pdfs と projects があります。これらはそれぞれ中に PDF (project-brief.pdf) と index.html ファイルというファイルがあります。ファイルシステム内の別の場所にある限り、1 つのプロジェクトに 2 つの index.html ファイルを非常にうまく入れることができることに注意してください。多くのウェブサイトはそうします。2 番目の index.html は、おそらくプロジェクト関連の情報のメインランディングページになります。

• 同じディレクトリーの場合: index.html （最上位の index.html）内に contacts.html を指すハイパーリンクを含める場合は、現在のファイルと同じディレクトリーにあるため、リンクしたいファイルの名前を指定するだけです。そのため使用する URL は contacts.html です。

  html

  <p>
    Want to contact a specific staff member? Find details on our
    <a href="contacts.html">contacts page</a>.
  </p>
  

• サブディレクトリーへの移動: index.html （最上位の index.html）内に projects/index.html を指すハイパーリンクを含める場合は、リンクしたいファイルを指定する前に projects ディレクトリーに移動する必要があります。これはディレクトリーの名前、スラッシュ、そしてファイルの名前を指定することでできます。そのため使用する URL は projects/index.html です。

  html

  <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  

• 親ディレクトリーに戻る: projects/index.html の中に pdfs/project-brief.pdf を指すハイパーリンクを含めたい場合は、ディレクトリー階層を上がってから pdfs ディレクトリーに戻る必要があります。「ディレクトリーを上る」は 2 つのドット — .. — を使用して表します。そのため使用する URL は ../pdfs/project-brief.pdf です。

  html

  <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
  

HTML 文書の上部だけでなく、HTML 文書の特定の部分（文書フラグメントと呼ばれる）にリンクすることもできます。 これを行うには、まずリンク先の要素に id 属性を割り当てる必要があります。 通常は特定の見出しにリンクするのが理にかなっているので、次のようになります。

<h2 id="Mailing_address">Mailing address</h2>

次にその特定の id にリンクするには、URL の最後にハッシュ/ポンド記号 (#) を付けて書きます。例えば次のようになります。

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

同じ文書の別の部分にリンクするために、文書フラグメント参照を単独で使用することもできます。

<p>
  The <a href="#Mailing_address">company mailing address</a> can be found at the
  bottom of this page.
</p>

ウェブ上では、絶対 URL と相対 URL という 2 つの用語があります。

絶対 URL: プロトコルとドメイン名を含む、ウェブ上の絶対位置で定義された位置を指します。 たとえば、index.html ページがウェブサーバーのルート内にある projects というディレクトリーにアップロードされており、そのウェブサイトのドメインが http://www.example.com である場合、そのページは http://www.example.com/projects/index.html （あるいは http://www.example.com/projects/ だけでも、URL で指定されていない場合、ウェブサーバーは index.html のようなランディングページを探して読み込みます）で取得することができます。

絶対 URL は、使用されている場所に関係なく、常に同じ場所を指します。

相対 URL: リンク元のファイルからの相対的な場所を指しています。たとえば、http://www.example.com/projects/index.html にあるサンプルファイルから同じディレクトリー内の PDF ファイルにリンクする場合、URL は単にファイル名 — 例えば project-brief.pdf — となり、追加情報は不要です。PDF が projects 内の pdfs という名前のサブディレクトリーにある場合、相対リンクは pdfs/project-brief.pdf （同等の絶対 URL は http://www.example.com/projects/pdfs/project-brief.pdf）になります。

相対 URL は内部で使用されているファイルの実際の場所によって、異なる場所を指します。たとえば、index.html ファイルを projects ディレクトリーからウェブサイトのルート（最上位レベル、どのディレクトリーの中でもありません）に移動した場合、pdfs/project-brief.pdf 相対 URL リンクの内部は、http://www.example.com/pdfs/project-brief.pdf にあるファイルを指し、http://www.example.com/projects/pdfs/project-brief.pdf にあるファイルではありません。

もちろん、index.html ファイルを移動しても project-brief.pdf ファイルと pdfs フォルダーの場所が突然変わることはありません。これはリンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。

リンクを書くときに従うべき良い慣習がいくつかあります。今これらを見てみましょう。

ページにリンクを張るのは簡単です。それでは十分ではありません。現在の状況やツールの好みに関係なく、リンクをすべての読者がアクセスできるようにする必要があります。例えば次のようにします。

• スクリーンリーダーのユーザーは、ページ上のリンクからリンクへと飛び回ったり、文脈の外でリンクを読んだりします。
• 検索エンジンはリンクテキストを使用して対象ファイルにインデックスを付けます。したがって、リンクテキストにキーワードを含めて、リンクされているものを効果的に説明することをお勧めします。
• 視覚的な読者はすべての単語を読むのではなくページを読み飛ばします、そして彼らの目はリンクのように目立つページの特徴に引き寄せられるでしょう。彼らは説明的なリンクテキストが役に立つと思うでしょう。

具体的な例を見てみましょう。

良い リンクテキスト: Firefox をダウンロード

<p><a href="https://www.mozilla.org/firefox/">Firefox をダウンロード</a></p>

悪い リンクテキスト: こちらをクリックして Firefox をダウンロード

<p>
  <a href="https://www.mozilla.org/firefox/"> こちらをクリック </a>して Firefox
  をダウンロード
</p>

その他のヒントです。

• URL をリンクテキストの一部に入れない。 — URL は醜く見え、スクリーンリーダーが 1 文字ずつ読み上げるとさらに醜く聞こえます。
• リンクテキストに「リンク」または「リンク先」と書かない。 — 単なるノイズになります。スクリーンリーダーはリンクがあることを利用者に伝えます。 視覚的なユーザーも、リンクは一般的に異なる色と下線でスタイル設定されているため、リンクがあることを認識できます（ユーザーはこの慣習に慣れているため、一般的にこの慣習を崩すべきではありません）。
• リンクのテキストは可能な限り短くする。 — スクリーンリーダーはリンクのテキスト全体を解釈する必要があるため、この方法が有効です。
• 同じテキストのコピーが複数の場所にリンクするようなものを最小化する。 文脈から外れて「ここをクリック」「ここをクリック」「ここをクリック」と表示されたリンクのリストがあると、スクリーンリーダーにとって問題が発生する可能性があるからです。

（PDF や Word 文書のように）ダウンロードを行ったり、（動画や音声のように）ストリーミングを行ったり、（ポップアップウィンドウを開くなど）予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加してください。

例えば次のようなものがあります。

• 低帯域幅の接続を使用している場合に、リンクをクリックすると、数メガバイトのダウンロードが突然開始される。

ここで、どのようなテキストを使用することができるか、いくつかの例を見てみましょう。

<p>
  <a href="https://www.example.com/large-report.pdf">
    販売レポートをダウンロード (PDF, 10MB)
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    動画を見る（別なタブで HD 品質のストリーミングが開きます）
  </a>
</p>

ブラウザーで開くのではなく、ダウンロードするリソースにリンクしている場合は、 download 属性を使用して既定の保存ファイル名を指定できます。これは最新の Windows 版 Firefox のダウンロードリンクの例です。

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページのウェブサイトを作成してください。これはウェブサイトが作成される一般的な方法の 1 つです。同じナビゲーションメニューを含め、すべてのページで同じページ構造が使用されます。リンクをクリックすると、同じ場所に留まっているという印象が与えられ、異なるコンテンツが表示されます。

次の 4 ページのローカルコピーをすべて同じディレクトリーに作成する必要があります（完全なファイルリストについては navigation-menu-start ディレクトリーも参照してください）。

• index.html
• projects.html
• pictures.html
• social.html

すべきことを挙げます。

1. リンク先のページの名前を含む、順序なしリストを 1 ページの指示された場所に追加してください。 ナビゲーションメニューは通常単なるリンクのリストなので、意味的には問題ありません。
2. 各ページ名をそのページへのリンクにしてください。
3. ナビゲーションメニューを各ページにコピーしてください。
4. 各ページで、その同じページへのリンクだけを削除してください。ページに自分自身へのリンクを含めることは混乱を招き、無意味です。 また、リンクがないことは、現在表示しているページを視覚的に思い出させるものです。

完成した例では、次のようになります。

クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクまたはボタンを作成することができます。これは <a> 要素と mailto: URL スキームを使って行われます。

最も基本的で一般的に使用されている形式では、mailto: リンクは単に意図した受信者のメールアドレスを示します。例えば次のようになります。

<a href="mailto:[email protected]">メールをどこにも送信しません</a>

この結果、次のようなリンクが表示されます。 メールをどこにも送信しません

実際、メールアドレスはオプションです。省略して href が "mailto:" であった場合、ユーザーのメールクライアントによって新しい送信メールのウィンドウが、宛先なしで開かれます。 これは、ユーザーがクリックして自分が選択したアドレスにメールを送信できる「共有」リンクとして役立つことがよくあります。

メールアドレスに加えて、他の情報を提供することができます。実際、提供する mailto URL には標準のメールヘッダーフィールドを追加できます。最も一般的に使用されるのは "subject"、"cc"、"body" です（これは本当のヘッダーフィールドではありませんが、新しいメールのための短い内容のメッセージを指定するこができます）。各フィールドとその値は、クエリー用語として指定されています。

これは cc、bcc、件名、本文を含む例です。

<a
  href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

以下は mailto の他の URL の例です。

• mailto:
• mailto:[email protected]
• mailto:[email protected],[email protected]
• mailto:[email protected][email protected]
• mailto:[email protected][email protected]&subject=This%20is%20the%20subject

この記事の最後にたどり着きましたが、最も重要な情報を覚えていますか？次に移動する前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります - スキルのテスト: リンク をご覧ください。

リンクについては、今のところこれで終わりです。このコースの後半で、スタイル設定を始める際にリンクに戻ります。 HTML についての次は、テキストの意味づけに戻り、有用と思われるより高度で珍しい機能を見ていきます - 高度なテキスト整形が次のステップです。

• 前のページ
• Overview: HTML 入門
• 次のページ