6日でできる 新HTML&CSS入門｜ハイパーリンクの記述

6日でできる 新HTML&CSS入門｜ハイパーリンクの記述

リンクを使えば、ページはつながり、情報は広がる。ハイパーリンクの基本を身につけて、移動しやすく使いやすいWebページを作ろう。

Webページの大きな特徴のひとつは、クリックするだけで別のページや資料、メール作成画面などへ移動できることです。ニュース記事から関連ページへ移動したり、メニューから別のページを開いたり、資料をダウンロードしたりできるのは、ハイパーリンクが使われているからです。

HTMLでは、リンクを作るときにaタグを使います。aは、クリックできる範囲を作るためのタグです。そして、どこへ移動するのかをhref属性で指定します。href属性には、外部サイトのURL、同じサイト内のHTMLファイル、ページ内の特定位置、PDFなどのファイル、メール作成用の指定など、さまざまな行き先を書くことができます。

ハイパーリンクは、ただページを移動するためだけのものではありません。ユーザーが迷わず目的の情報へたどり着けるようにするための、Webページの案内役でもあります。リンクの文字が分かりやすいか、別タブで開くべきか、外部サイトへのリンクに安全対策ができているかなども大切なポイントです。

この記事では、aタグとhref属性の基本から、外部サイトへのリンク、サイト内リンク、ページ内ジャンプ、ダウンロードリンク、メールリンク、target属性やrel属性の考え方まで、ハイパーリンクの記述方法を順番に解説していきます。

図1：ハイパーリンクでページ同士がつながる仕組み

この図から分かること

この図は、ハイパーリンクによってWebページやファイル、外部サイト、メール作成画面などがつながる様子を表しています。

Webページは、1つのページだけで完結するものではなく、別のページや資料へ案内することで、より便利に使えるようになります。aタグでクリックできる部分を作り、href属性で移動先を指定することで、ユーザーは目的の情報へスムーズに移動できます。

リンクは、Webページの中で道案内のような役割を持っています。どこへ移動するリンクなのかが分かりやすいほど、ユーザーにとって使いやすいページになります。

ハイパーリンクの基本

ハイパーリンクは、クリックすると別の場所へ移動できる仕組みです。HTMLでは、aタグを使ってリンクを作ります。

aタグは、クリックできる文字や画像などを囲むためのタグです。リンク先はhref属性で指定します。たとえば、別のWebサイトに移動したい場合は、href属性にhttpsから始まるURLを書きます。同じフォルダにあるHTMLファイルへ移動したい場合は、ファイル名だけを書くこともできます。

リンクを作るときに特に大切なのは、href属性です。href属性がないと、クリックできる見た目になっても、どこへ移動すればよいのか分かりません。つまり、aタグはリンクの範囲を作り、href属性はリンクの行き先を決める役割を持っています。

href属性でリンク先を指定する

href属性には、リンク先を指定します。リンク先の書き方には、いくつかの種類があります。

絶対URLは、httpsから始まる完全なアドレスです。外部サイトへリンクするときに使います。

相対パスは、現在のHTMLファイルを基準にして、リンク先の場所を指定する方法です。同じフォルダにあるHTMLファイルへ移動する場合は、ファイル名だけで指定できます。別のフォルダにあるファイルへ移動する場合は、フォルダ名とファイル名を組み合わせて指定します。

ページ内リンクでは、移動先の見出しなどにid属性を付けておき、href属性に#から始まる名前を指定します。長いページの中で、特定の場所へすぐ移動したいときに便利です。

target属性でリンクの開き方を指定する

target属性は、リンク先をどのように開くかを指定する属性です。何も指定しない場合、多くのブラウザでは同じタブでリンク先が開きます。

同じサイト内のページへ移動する場合は、基本的に同じタブで開くことが多いです。ユーザーが自然にサイト内を移動できるためです。

一方、外部サイトやPDFなど、現在のページから離れる可能性があるリンクでは、新しいタブで開く指定が使われることがあります。その場合は、target属性に_blankを指定します。

ただし、_blankを使うときは、セキュリティ面にも注意が必要です。後ほど説明するrel属性と組み合わせることで、より安全にリンクを扱えます。

外部サイトへのリンク

外部サイトへリンクするときは、href属性にhttpsから始まるURLを指定します。たとえば、学習サイトや参考ページへ移動するリンクを作るときに使います。

<a href="https://www.study-pg.com/" target="_blank" rel="noopener noreferrer">演習で学ぶプログラミングへ</a>

このように書くと、「演習で学ぶプログラミングへ」という文字がリンクになります。クリックすると、指定した外部サイトへ移動します。

外部サイトへのリンクでは、target属性に_blankを指定して新しいタブで開くことがあります。その場合は、rel属性にnoopener noreferrerを指定しておくと、安全性を高められます。

リンク文字には、「こちら」や「クリック」だけを書くよりも、どこへ移動するのかが分かる言葉を書くほうが親切です。たとえば、「演習で学ぶプログラミングへ」のように、リンク先の内容が伝わる文字にすると、ユーザーが安心してクリックできます。

サイト内リンクとフォルダ内リンク

同じサイト内の別ページへ移動するリンクを作る場合は、相対パスを使います。同じフォルダにあるHTMLファイルへ移動するなら、ファイル名だけで指定できます。

<a href="lesson12_1.html">リストの基本ページへ</a>

この例では、同じフォルダにあるlesson12_1.htmlへ移動します。

もし別のフォルダにあるページへ移動したい場合は、フォルダ名を含めて指定します。

<a href="pages/profile.html">プロフィールページへ</a>

この場合は、pagesフォルダの中にあるprofile.htmlへ移動します。

サイト内リンクでは、ページ構成とファイルの場所を意識することが大切です。HTMLファイルがどのフォルダにあるのか、リンク先のファイルがどこに保存されているのかを確認しながら書くと、リンク切れを防ぎやすくなります。

図2：外部リンク・内部リンク・ページ内リンクの違い

この図から分かること

この図から分かるのは、リンク先にはいくつかの種類があるということです。

外部リンクでは、別のWebサイトへ移動します。内部リンクでは、同じサイト内の別ページへ移動します。ページ内リンクでは、同じページの中にある特定の場所へ移動します。

どのリンクもaタグとhref属性を使って作りますが、href属性に書く内容が異なります。外部サイトならURL、同じフォルダのページならファイル名、ページ内の特定位置なら#idの形で指定します。リンク先の種類に合わせて書き方を変えることが大切です。

ページ内ジャンプを作る

ページ内ジャンプは、同じページ内の特定の場所へ移動するリンクです。長いページで、目次から各見出しへ移動したいときや、「よくある質問」へ一気に移動したいときに便利です。

ページ内ジャンプを作るには、移動先にid属性を付けます。そして、リンク側のhref属性には、#とid属性の値を組み合わせて指定します。

<p><a href="#question">質問コーナーへ移動</a></p>

<h2 id="question">質問コーナー</h2>

この例では、「質問コーナーへ移動」をクリックすると、id属性にquestionが指定された見出しへ移動します。

id属性の値は、同じページ内で重複しないようにします。同じid属性の値が複数あると、ブラウザがどこへ移動すればよいのか分かりにくくなります。ページ内リンクを使うときは、移動先ごとに分かりやすい名前を付けましょう。

ダウンロードリンクを作る

PDFや画像、資料ファイルなどを保存してもらいたいときは、download属性を使うことがあります。download属性を指定すると、リンク先のファイルをダウンロードする意図をブラウザに伝えられます。

<a href="docs/manual.pdf" download>操作マニュアルを保存する</a>

この例では、docsフォルダの中にあるmanual.pdfへリンクしています。download属性があるため、ブラウザによってはファイルを保存する動作になります。

ただし、PDFなどのファイルは、ブラウザの設定や環境によって、直接開かれる場合もあります。必ず同じ動作になるとは限らないため、「保存する」「PDFを開く」など、リンク文字で内容が分かるようにしておくと親切です。

メールリンクを作る

メールリンクを使うと、クリックしたときに利用者のメールソフトを開くことができます。href属性にmailto:から始まる指定を書きます。

<a href="mailto:info@example.com?subject=お問い合わせ">お問い合わせメールを送る</a>

この例では、クリックするとメール作成画面が開き、宛先にinfo@example.comが入り、件名にお問い合わせが入るようになります。

メールリンクは、お問い合わせやサポート窓口への案内に便利です。ただし、利用者の環境によってはメールソフトが起動しなかったり、Webメールを使っている場合に思った通りに動作しなかったりすることもあります。そのため、メールアドレスを画面上にも分かりやすく示しておくと安心です。

title属性でリンクの補足情報を伝える

title属性を使うと、リンクに補足情報を加えることができます。ブラウザによっては、リンクにマウスを重ねたときに補足説明が表示されます。

<a href="news.html" title="最新情報を掲載しているページ">お知らせページへ</a>

title属性は、リンク先の内容を補足するために使えます。ただし、スマートフォンではマウスを重ねる操作がないため、title属性の情報に頼りすぎるのはよくありません。

大切な情報は、リンク文字そのものに含めるのが基本です。title属性は、あくまで補足として考えるとよいでしょう。

rel属性でリンク先との関係を示す

rel属性は、現在のページとリンク先の関係を示すために使います。特に、target属性に_blankを指定して新しいタブで開く場合は、rel属性にnoopener noreferrerを指定することがあります。

特に覚えておきたいのは、target属性に_blankを使うときのrel属性です。外部サイトを新しいタブで開く場合は、rel属性にnoopener noreferrerを指定しておくと、安全性を高められます。

リンクは便利な機能ですが、外部サイトとつながるものでもあります。そのため、見た目や使いやすさだけでなく、安全性にも気を配ることが大切です。

target="_blank"を使うときの注意点

新しいタブでリンクを開く指定は便利ですが、注意点もあります。target属性に_blankを指定すると、リンク先のページが新しいタブで開きます。このとき、適切な対策をしていないと、リンク先のページから元のページに影響を与えられる可能性があります。

その対策として、rel属性にnoopener noreferrerを指定します。

<a href="https://www.example.com/" target="_blank" rel="noopener noreferrer">外部サイトへ移動する</a>

このように書くことで、新しいタブで外部サイトを開きながら、元ページへの不要な影響を防ぎやすくなります。

ユーザーにとっては、外部サイトが新しいタブで開くと元のページに戻りやすいという利点があります。一方で、タブが増えすぎると使いにくくなることもあります。すべてのリンクを新しいタブで開くのではなく、サイト内リンクは同じタブ、外部リンクや資料リンクは必要に応じて新しいタブ、というように使い分けるとよいでしょう。

コード例で基本リンクを確認する

ここからは、ハイパーリンクを使ったHTMLのサンプルを見ていきます。サンプルは3つです。どのHTML例にもCSSは含めず、HTMLだけでリンクの動きを確認できるようにしています。

ファイル名： lesson13_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクの基本練習</title>
</head>
<body>
  <h1>リンクの基本</h1>

  <p>外部サイト：
    <a href="https://ja.wikipedia.org/" target="_blank" rel="noopener noreferrer">ウィキペディアを開く</a>
  </p>

  <p>内部ページ：
    <a href="lesson12_1.html">リストの練習ページへ移動する</a>
  </p>
</body>
</html>

ブラウザの表示例

このHTMLをブラウザで開くと、「リンクの基本」という見出しの下に、外部サイトへのリンクと内部ページへのリンクが表示されます。

この例では、外部リンクと内部リンクの違いを確認できます。外部リンクでは、target属性に_blankを指定して新しいタブで開くようにしています。あわせてrel属性にnoopener noreferrerを指定し、安全性にも配慮しています。

内部リンクでは、同じフォルダにあるlesson12_1.htmlへ移動します。target属性を指定していないため、基本的には同じタブで開きます。

ページ内ジャンプのサンプル

次に、同じページ内の特定の場所へ移動するページ内ジャンプを確認します。ここでは、ページ上部にリンクを置き、下のほうにあるゴール部分へ移動できるようにします。

ファイル名： lesson13_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページ内ジャンプの練習</title>
</head>
<body>
  <h1>ページ内ジャンプ</h1>

  <p><a href="#goal">ゴールの見出しへ移動する</a></p>

  <h2>学習メモ1</h2>
  <p>ここでは、HTMLの基本構成を復習します。</p>

  <h2>学習メモ2</h2>
  <p>リンクを使うと、ページ内の特定位置へ移動できます。</p>

  <h2>学習メモ3</h2>
  <p>長いページでは、目次から各見出しへ移動できると便利です。</p>

  <h2>学習メモ4</h2>
  <p>移動先にはid属性を付け、リンク側では#から始まる名前を指定します。</p>

  <h2 id="goal">ゴール</h2>
  <p>ここがページ内ジャンプの移動先です。</p>
</body>
</html>

ブラウザの表示例

このHTMLをブラウザで開くと、ページ上部に「ゴールの見出しへ移動する」というリンクが表示されます。そのリンクをクリックすると、id属性にgoalが指定された「ゴール」という見出しへ移動します。

このように、ページ内ジャンプは長いページでとても便利です。目次、よくある質問、ページ上部へ戻るリンクなどにも応用できます。

図3：ページ内ジャンプ・ダウンロード・メールリンクの使い分け

この図から分かること

この図は、ハイパーリンクの行き先がWebページだけではないことを示しています。

href属性に#idの形を指定すると、同じページ内の特定位置へ移動できます。download属性を使うと、PDFなどのファイルを保存するリンクとして扱えます。mailtoを使うと、メール作成画面を開くリンクを作れます。

同じaタグでも、href属性に何を書くか、どの属性を組み合わせるかによって、リンクの役割は大きく変わります。リンク先の目的に合わせて書き方を選ぶことが大切です。

ダウンロードリンクとメールリンクのサンプル

最後に、PDFファイルへのリンクと、メール作成画面を開くリンクを組み合わせた例を確認します。

このサンプルを試す場合は、lesson13_3.htmlを保存するフォルダと同じ場所にfilesフォルダを作成し、その中にguide.pdfというPDFファイルを保存しておきます。

ファイル名： lesson13_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>資料とお問い合わせ</title>
</head>
<body>
  <h1>資料ダウンロードとお問い合わせ</h1>

  <p>
    <a href="files/guide.pdf" download>操作ガイドPDFを保存する</a>
  </p>

  <p>
    <a href="mailto:support@example.com?subject=操作ガイドについて">サポートへメールを送る</a>
  </p>
</body>
</html>

ブラウザの表示例

このHTMLをブラウザで開くと、「操作ガイドPDFを保存する」と「サポートへメールを送る」という2つのリンクが表示されます。

PDFファイルの動作は、ブラウザや利用環境によって異なる場合があります。直接ブラウザで開かれることもあれば、ダウンロードとして保存されることもあります。

メールリンクも、利用者の環境によって動作が変わることがあります。メールソフトが設定されていない場合は、期待した画面が開かないこともあります。そのため、必要に応じてメールアドレスをページ上に表示しておくと、より親切です。

使用するタグと属性を整理する

ハイパーリンクで使う主なタグと属性を整理しておきましょう。

最初は、aタグとhref属性の組み合わせをしっかり覚えることが大切です。そこに慣れてきたら、target属性、rel属性、download属性、id属性などを少しずつ組み合わせていくと、リンクの使い道が広がります。

分かりやすいリンク文字にする

リンクを作るときは、リンク先の内容が分かる文字にすることが大切です。

たとえば、「こちら」や「クリック」だけでは、どこへ移動するのかが分かりにくくなります。読み手がリンクをクリックする前に、移動先を想像できるようにしましょう。

リンク文字が分かりやすいと、ユーザーが迷わず操作できます。また、音声読み上げソフトを使っている人にとっても、リンク先の意味が伝わりやすくなります。

リンク切れを防ぐために確認すること

リンクを作成したら、必ずクリックして動作を確認しましょう。HTMLの書き方が正しくても、ファイル名やフォルダ名が間違っているとリンク先へ移動できません。

特に、相対パスを使う場合は、現在のHTMLファイルから見たリンク先の場所を意識する必要があります。ファイル名の大文字と小文字、フォルダ名、拡張子の書き間違いにも注意しましょう。

リンクは、ページを便利にする重要な機能です。しかし、リンク切れがあると、ユーザーは目的の情報へ進めなくなってしまいます。ページを公開する前には、すべてのリンクを実際にクリックして確認する習慣をつけておくと安心です。

ハイパーリンクを使いこなすためのポイント

ハイパーリンクの中心になるのは、aタグとhref属性です。aタグでクリックできる範囲を作り、href属性で移動先を指定します。

外部サイトへ移動する場合は絶対URL、同じサイト内のページへ移動する場合は相対パス、ページ内の特定位置へ移動する場合は#idを使います。PDFなどの資料にはdownload属性、メール作成画面を開く場合にはmailtoを使います。

また、target属性に_blankを指定して新しいタブで開く場合は、rel属性にnoopener noreferrerを指定しておくと安全性を高められます。リンク文字は、移動先が分かる具体的な表現にすると、ユーザーにとって使いやすいページになります。

ハイパーリンクを正しく使えるようになると、Webページ同士をつなげたり、資料を配布したり、お問い合わせへ案内したりできるようになります。リンクはWeb制作の基本であり、ページの使いやすさを大きく左右する大切な要素です。