ハイパーリンクの作成

ハイパーリンクとは本当に重要なものです— Web が網状組織を構成しているのもハイパーリンクのおかげです。この記事ではリンクを作るために必要な構文を示し、リンクに関するベストプラクティスについて議論します。

ハイパーリンクとは

ハイパーリンクは Web が提供する最も刺激的なイノベーションです。Web の始まりから機能していましたが、Web を Web たるものにするものです — 文書から別の文書 (やリソース) へとリンクできたり、文書の特定の部分にリンクできたり、簡単な Web アドレスからアプリを利用できるようになります (ネイティブアプリと比較して、そちらはインストールが必要なだけです)。あらゆる Web コンテンツはリンクに変換できて、クリック (又はその他の有効化) した時に Web ブラウザは別の Web アドレス (URL) に移動します。

例えば、BBC のホームページでは、複数のニュース記事だけでなく、色々なサイトのエリアを指すリンク (ナビゲーション機能) や、ログイン/登録ページ (ユーザーツール) その他多数のリンクがあります。

リンクの解剖

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

<p>I'm creating a link to
<a href="https://www.mozilla.org/ja/">the Mozilla homepage</a>.
</p>

これは以下のような結果をもたらします。

I'm creating a link to the Mozilla homepage.

title 属性による補足情報の追加

あなたのリンクに追加したいかもしれない別の属性はtitleです。これには、ページに含まれる情報の種類や注意すべき事項など、リンクに関する補足的な有用な情報が含まれています。 例えば、

<p>I'm creating a link to
<a href="https://www.mozilla.org/ja/"
   title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepage</a>.
</p>

これにより、次のような結果が得られます (リンクがホバーされるとタイトルがツールチップとして表示されます)。

I'm creating a link to the Mozilla homepage.

アクティブラーニング: 独自のサンプルリンクを作成する

アクティブラーニングタイム：ローカルのコードエディタを使用して HTML ドキュメントを作成してください (私たちの入門用テンプレートでうまくいくでしょう)。

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

ブロックレベルリンク

前述したように、ブロックレベル要素であっても、あらゆるコンテンツをリンクに変えることができます。リンクに変換したい画像がある場合は、その画像を <a></a> タグの間に配置することで実現できます。

<a href="https://www.mozilla.org/ja/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

URL とパスに関する簡単な入門

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

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

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

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

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

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

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

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

  <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 vs 相対 URL

Web 上で見かける2つの用語は絶対 URL と相対 URL です。

絶対 URL: protocol と domain name を含む、Web 上の絶対位置で定義された位置を指します。たとえば、index.html ページが Web サーバのルート内にある projects というディレクトリにアップロードされ、その Web サイトのドメインが http://www.example.com の場合、そのページは http://www.example.com/projects/index.html (あるいは http://www.example.com/projects/ だけでも、URL で指定されていない場合、Web サーバは 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 ディレクトリから Web サイトのルート (最上位レベル、どのディレクトリの中でもありません) に移動した場合、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 フォルダの場所が突然変わることはありません — これはリンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。

リンクのベストプラクティス

リンクを書くときに従うべきベストプラクティスがいくつかあります。 今これらを見てみましょう。

明確なリンク用語を使う

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

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

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

良い リンクテキスト: Download Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

悪い リンクテキスト: Click here to download Firefox

<p><a href="https://firefox.com/">
  Click here
</a>
to download Firefox</p>

その他のヒント

• リンクテキストの一部として URL を繰り返さないでください。スクリーンリーダーが1文字ずつ読み上げると、URL は見苦しくなり、さらに見苦しくなります。
• リンクテキストに「リンク」や「へのリンク」と書いてはいけません — それは単なるノイズです。スクリーンリーダーは、リンクがあることを人々に伝えます。リンクは一般的に異なる色で表示され、下線が引かれているので、見ているユーザもリンクがあることを知っているでしょう (ユーザは慣れているので、この規約は一般に壊れてはいけません)。
• リンクラベルはできるだけ短くしてください — 長いリンクは、特に全体を読み上げなければならないスクリーンリーダーのユーザーを悩ませます。
• 同じテキストが複数存在し、かつ異なる場所にリンクされている場合を最小限に抑えます。これはスクリーンリーダーのユーザにとって問題となる可能性があり、リンクの一覧が文脈からはずれて表示されることがよくあります。

できるだけ相対リンクを使う

上記の説明から、絶対リンクを常に使用することが賢明だと思うかもしれません。結局のところ、ページが相対リンクのように移動されても壊れません。ただし、同じ Web サイト内の他の場所にリンクする場合は、できるだけ相対リンクを使用する必要があります (他の Web サイトにリンクする場合は、絶対リンクを使用する必要があります)。

• まず最初に、コードをスキャンするのがはるかに簡単です。相対 URL は一般に絶対 URL よりはるかに短いので、コードを読むのはずっと簡単です。

• 次に、可能な限り相対 URL を使用するほうが効率的です。
  絶対 URL を使用すると、ブラウザはドメインネームシステム (DNS; 詳細はウェブの仕組みをご覧ください) 上のサーバの実際の場所を検索することから開始し、次にそのサーバに移動して要求されているファイルを見つけます。一方相対 URL では、ブラウザは要求されているファイルを同じサーバ上で検索するだけです。そのため、相対 URL のように絶対 URL を使用する場合は、常にブラウザに余分な作業を行わせることになります。つまりブラウザの効率が低下します。

HTML 以外のリソースへのリンク - 明確な道標を残す

(PDF や Word 文書のように) ダウンロードされたり (ビデオやオーディオのように) ストリーミングされたり、ポップアップウィンドウを開いたり、Flash ムービーを読み込んだりするなど、予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加します。例えば、それはかなりいらいらさせることができます。

• 低帯域幅の接続を使用している場合は、リンクをクリックすると、数メガバイトのダウンロードが突然開始されます。
• Flash プレーヤーがインストールされていない場合は、リンクをクリックすると突然 Flash が必要なページに移動します。

ここではどのような種類のテキストを使用できるかを見るために、いくつかの例を見てみましょう。

<p><a href="http://www.example.com/large-report.pdf">
  Download the sales report (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/" target="_blank">
  Watch the video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="http://www.example.com/car-game">
  Play the car game (requires Flash)
</a></p>

ダウンロードへのリンクは download 属性を使う

ブラウザで開くのではなくダウンロードするリソースにリンクしている場合は、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>

アクティブラーニング: ナビゲーションメニューの作成

この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページの Web サイトを作成してください。これは Web サイトが作成される一般的な方法の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:nowhere@mozilla.org">メールをどこにも送信しません</a>

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

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

詳細の指定

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

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

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&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:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

まとめ

とにかく今のところ、それはリンクのためのそれです！
スタイルの設定を見始めると、コースの後半のリンクに戻ります。次に HTML について説明します。テキストのセマンティクスに戻って、役に立つと思われるより高度な機能や変わった機能について説明します。高度なテキストの書式設定は、次に行うことです。

このモジュール内の文書

• HTML 入門
• Headとは？HTML のメタデータ
• HTML テキストの基礎
• ハイパーリンクの作成
• 上級のテキスト整形
• 文書とWeb サイトの構造
• HTML のデバッグ
• 文字のマークアップ
• コンテンツのページの構造化