HTML/CSS入門編｜4章：リンクを設定しよう

前の章に戻る次の章に進む

HTML/CSS入門編 4章：リンクを設定しよう

本章では、他のページ、または同じページ内で他の場所に遷移する機能であるハイパーリンク（リンク）の解説をします。

演習素材について

【4-1】aタグを覚えよう

ハイパーリンクとは、テキストや画像をクリックすると、他のページ、または同じページ内の他の場所に遷移する機能のことです。
一般的には、リンクと呼ばれています。
リンクを設定することを「リンクを張る」と表現することもあります。

リンクには次のような種類があります。

リンクの種類

外部のWebサイト、Webページへのリンク（外部リンク）
同一サイト内の別ページへのリンク（内部リンク）
同一ページ内の特定の場所へのリンク（ページ内リンク）
その他

メールアドレスに設定して、自動的にメールソフトを起動させるためのリンク（メールリンク）
電話リンク（スマートフォンでクリックすると電話をかけられる）

リンクを設定するタグはaタグです。

aはanchor（アンカー）の略で、リンクの起点を意味します。
基本的な書式は、aタグでテキストまたはimgタグを囲みます。
href属性の属性値として、ファイルパスなどのリンク先情報を記述します。
hrefはhypertext reference（「ハイパーテキストの参照先」の意）の略で、「エイチレフ」と読みます。

外部リンクを設定しよう

ポイント

外部リンクは絶対パスで設定する

ドメインが異なる外部のサイトへのリンクを外部リンクと呼びます。
外部リンクの設定方法は、href属性の属性値に絶対パス（absolute path）を記述します。
絶対パスとは前章で学習したファイルパスの一種で、httpまたはhttpsからはじまるURLを記述して目的のファイルを指定する記述法のことです。

外部リンクの設定

<a href="https://www.webcoach.jp/" target="_blank">WEBCOACH</a>

HTML/CSS入門編サンプルコード4-1

演習ファイルの準備

外部リンクの学習には、演習素材「absolute_path-lesson」フォルダ内のファイルを使用します。
「absolute_path-lesson」フォルダ内の作業用ファイル「atag_start.html」をVS Codeで開いてください。
※自分で書いたコードがうまく反映されないときは、完成ファイル「atag_fin.html」との違いを確認してください。

atag_start.html

<h1>リンクの設定</h1>
<h2>絶対パスでリンクを設定する</h2>
<ul>
  <li>WEBCOACH</li>
</ul>

HTML/CSS入門編サンプルコード4-2

aタグの入力

atag_start.html内のテキスト「WEBCOACH」をaタグで囲んで、絶対パスでリンクを設定します。
リンク先のURLは以下をコピーして使ってください。

リンク先のURL（コピー&ペースト用）

https://www.webcoach.jp/

リンク先URL

VS Codeの拡張機能「htmltagwrap」を使い、効率よくマークアップしましょう。
※「htmltagwrap」の使い方は入門編2章を参照してください。

外部リンク設定後

<h1>リンクの設定</h1>
<h2>絶対パスでリンクを設定する</h2>
<ul>
  <li><a href="https://www.webcoach.jp/">WEBCOACH</a></li>
</ul>

HTML/CSS入門編サンプルコード4-3

ブラウザプレビュー

【画面収録】VS Codeによるaタグの入力とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

target属性を設定しよう

aタグにtarget属性を追加し、属性値に「_blank」を指定することにより、新規タブ/ウインドウでリンク先のページを開くことができます。

target属性の設定

<a href="https://www.webcoach.jp/" target="_blank">WEBCOACH</a>

HTML/CSS入門編サンプルコード4-4

新規タブ/ウインドウでリンクを開くときの注意点

「target=”_blank”」で新規タブ/ウインドウでリンク先のページを開く方法は、主に外部サイトへのリンク設定時に使用すると、ユーザーが元のページに戻りやすくなり便利です。
また、フォームの入力画面から入力中に、他の情報を参照するためのリンクをクリックする場合には、現在のページを保持することができるため有効です。
しかし、自サイト内の通常のページ遷移では、新規タブを開く必要性が低く、サイトの操作性を損ねることがあるので注意が必要です。

【画面収録】VS Codeによるaタグの入力とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

注意

target="_blank" を使用する際は、セキュリティ対策として、必ず rel="noopener noreferrer" を一緒に記述しましょう。

記述例：
<a href="https://..." target="_blank" rel="noopener noreferrer">外部リンク</a>
各属性の役割：
- noopener：リンク先のページによる元ページの不正操作を防ぎます。（セキュリティ向上）
- noreferrer：リンク先に参照元情報を送信しないようにします。（プライバシー保護）

これは外部リンクを設定する際の、非常に重要なルールです。

内部リンクを設定しよう

ポイント

内部リンクは相対パスで設定する

同じサイト内の他ページへのリンクを内部リンクといい、通常のWebサイト制作において最も多用するリンクです。
内部リンクは、相対パスを使って設定します。
リンクを設定するときの相対パスの考え方は、前章で学習した画像を表示する際の相対パスの考え方とまったく同じです。
下の「相対パスの指定方法」の4パターンを再度確認しておきましょう。

相対パスの指定方法

同じ階層へのパス
下の階層へのパス
上の階層へのパス
フォルダをまたいで指定するパス

内部リンクの学習には、演習素材「relative_path-lesson」フォルダ内のファイルを使用します。

ファイル構成を確認しよう

「relative_path-lesson」フォルダ内の「start」フォルダの中身を確認してください。
下記の階層図が「start」フォルダ内のファイル構成です。
画像を表示するときと同様に、内部リンクを設定するときも、サイトを構成するファイルやフォルダが、どこに置かれているかということを、常に意識しながら作業を進める必要があります。

HTMLファイルは全部で4つあります。
全てVS Codeで開いておきましょう。（ファイル構成は3章のファイルと同じです。）

index.html
dog.html
catフォルダ内のcat.html
rabbitフォルダ内のrabbit.html

今回の作業内容

次の作業を順番に行うことにより、内部リンク設定時の相対パスの記述方法を学びます。
※相対パスはHTML入門編 3章画像を表示しようで解説しています。

作業手順

index.htmlから他の3ページへリンクを設定する。
dog.htmlから他の3ページへリンクを設定する。
cat.htmlから他の3ページへリンクを設定する。
rabbit.htmlから他の3ページへリンクを設定する。

4ページ全てに以下のリスト項目が作成されています。
全てのリスト項目（合計16箇所）にリンクを設定し、全てのページ間を自由に遷移できるようにします。

<ul>
  <li>HOME</li>
  <li>犬のページ</li>
  <li>猫のページ</li>
  <li>うさぎのページ</li>
</ul>

HTML/CSS入門編サンプルコード4-5

ブラウザプレビュー

index.htmlからのリンクを設定しよう

index.htmlからのリンクは、次の相対パスを記述します。
前章で学んだ相対パスの記述法を使い、次のようにリンクを設定します。

作業手順

index.htmlへのリンク：同じ階層へのパス
dog.htmlへのリンク：同じ階層へのパス
cat.htmlへのリンク：1つ下の階層へのパス
rabbit.htmlへのリンク：1つ下の階層へのパス

1. index.htmlへのリンク：同じ階層へのパス

index.htmlからindex.html（自分自身）へリンクを設定することは一見不要のようですが、デザインの一貫性を保ったり、リンクをクリックした際にページを再読み込みできるなど、利点もあります。

<a href="index.html">HOME</a>

HTML/CSS入門編サンプルコード4-6

2. dog.htmlへのリンク：同じ階層へのパス

<a href="dog.html">犬のページ</a>

HTML/CSS入門編サンプルコード4-7

3. cat.htmlへのリンク：1つ下の階層へのパス

<a href="cat/cat.html">猫のページ</a>

HTML/CSS入門編サンプルコード4-8

4. rabbit.htmlへのリンク：1つ下の階層へのパス

<a href="rabbit/rabbit.html">うさぎのページ</a>

HTML/CSS入門編サンプルコード4-9

【画面収録】 VS Codeによるリンクの設定とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

【練習問題1】dog.htmlからのリンクを設定しよう

次は自分でファイルパスを考え、解答を見ずにリンクの設定をしてみましょう。
dog.htmlをVS Codeで開いてください。

dog.htmlからのリンクは、次の相対パスを記述します。

作業手順

index.htmlへのリンク：同じ階層へのパス
dog.htmlへのリンク：同じ階層へのパス
cat.htmlへのリンク：1つ下の階層へのパス
rabbit.htmlへのリンク：1つ下の階層へのパス

ブラウザプレビュー

上手くいかなかった場合は、以下の「【練習問題1】の解答」を確認しましょう。

【練習問題1】の解答

1. index.htmlへのリンク：同じ階層へのパス

<a href="index.html">HOME</a>

HTML/CSS入門編サンプルコード4-10

2. dog.htmlへのリンク：同じ階層へのパス

<a href="dog.html">犬のページ</a>

HTML/CSS入門編サンプルコード4-11

3. cat.htmlへのリンク：1つ下の階層へのパス

<a href="cat/cat.html">猫のページ</a>

HTML/CSS入門編サンプルコード4-12

4. rabbit.htmlへのリンク：1つ下の階層へのパス

<a href="rabbit/rabbit.html">うさぎのページ</a>

HTML/CSS入門編サンプルコード4-13

【画面収録】VS Codeによるリンクの設定とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

cat.htmlからのリンクを設定しよう

cat.htmlからのリンクは、次の相対パスを記述します。

作業手順

index.htmlへのリンク：１つ上の階層へのパス
dog.htmlへのリンク：１つ上の階層へのパス
cat.htmlへのリンク：同じ階層へのパス
rabbit.htmlへのリンク：階層をまたいだパス

ブラウザプレビュー

1. index.htmlへのリンク：1つ上の階層へのパス

<a href="../index.html">HOME</a>

HTML/CSS入門編サンプルコード4-14

2. dog.htmlへのリンク：1つ上の階層へのパス

<a href="../dog.html">犬のページ</a>

HTML/CSS入門編サンプルコード4-15

3. cat.htmlへのリンク：同じ階層へのパス

<a href="cat.html">猫のページ</a>

HTML/CSS入門編サンプルコード4-16

4. rabbit.htmlへのリンク：階層をまたいだパス

<a href="../rabbit/rabbit.html">うさぎのページ</a>

HTML/CSS入門編サンプルコード4-17

【画面収録】VS Codeによるリンクの設定とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

【練習問題2】 rabbit.htmlからのリンクを設定しよう

次は自分でファイルパスを考え、解答を見ずにリンクの設定をしてみましょう。
rabbit.htmlをVS Codeで開いてください。

rabbit.htmlからのリンクは、次の相対パスを記述します。

作業手順

index.htmlへのリンク：１つ上の階層へのパス
dog.htmlへのリンク：１つ上の階層へのパス
cat.htmlへのリンク：階層をまたいだパス
rabbit.htmlへのリンク：同じ階層へのパス

ブラウザプレビュー

上手くいかなかった場合は、以下の【練習問題2】の解答を確認しましょう。

【練習問題2】の解答

1. index.htmlへのリンク：1つ上の階層へのパス

<a href="../index.html">HOME</a>

HTML/CSS入門編サンプルコード4-18

2. dog.htmlへのリンク：1つ上の階層へのパス

<a href="../dog.html">犬のページ</a>

HTML/CSS入門編サンプルコード4-19

3. cat.htmlへのリンク：階層をまたいだパス

<a href="../cat/cat.html">猫のページ</a>

HTML/CSS入門編サンプルコード4-20

4. rabbit.htmlへのリンク：同じ階層へのパス

<a href="rabbit.html">うさぎのページ</a>

HTML/CSS入門編サンプルコード4-21

【画面収録】 VS Codeによるリンクの設定とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

ページ内リンクを設定しよう

ページ内リンクとは、リンクをクリックしたとき、同ページ内の指定した箇所へジャンプさせるリンクのことです。
ページ内リンクには、リンク先とリンク元の設定が必要です。

リンク先の指定

<a id="pagetop"></a>

HTML/CSS入門編サンプルコード4-22

※リンク先として使用するタグは何でも構わないが、id属性を使い名前をつけておく。

リンク元の指定

※リンク元の設定は、aタグのhref属性の属性値を「#id名」という形式にしてリンク先のid名と紐づける。

<a href="#pagetop">▲ページトップへ</a>

HTML/CSS入門編サンプルコード4-23

【画面収録】VS Codeによるページ内リンクの設定とブラウザプレビューまで

※VS Codeの拡張機能「Live Server」と「htmltagwrap」を利用しています。

また、以下のように設定する方法もあります。
現在ではこちらの手法が主流になりつつあるので、余裕のある人はこちらを使ってページ内リンクを設定できるようにしておきましょう。

リンク先の指定

ページ内のジャンプさせたい先の要素に、直接id属性で固有の名前をつけます。
例えば、ページ最上部の見出しに戻したい場合は、その<h1>タグにidを設定します。

<h1 id="pagetop">ページのタイトル</h1>

HTML/CSS入門編サンプルコード4-24

リンク元の指定
リンク元の<a>タグでは、href属性の値に「#」とリンク先で指定したid名を記述します。

<a href="#pagetop">▲ページトップへ戻る</a>

HTML/CSS入門編サンプルコード4-25

これで「HTML/CSS入門編 4章：リンクを設定しよう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む