6日でできる 新HTML入門｜リンクの作り方とaタグの基本①
リンクを作れるようになると、HTMLページは1枚の画面から、つながりのあるWebサイトへ広がります。
Webページの大きな特徴の1つが、文字や画像をクリックして別のページへ移動できることです。この移動の仕組みをリンクと呼びます。リンクがあることで、トップページから詳細ページへ進んだり、画像をクリックして大きな写真を開いたり、外部サイトへ移動したりできます。
HTMLでは、リンクを作るために <a> タグを使います。aはanchorの略で、リンクの出発点を作るタグです。リンク先は href属性で指定します。リンクにしたい文字や画像を <a> と </a> で囲むことで、クリックできる要素になります。
ここでは、テキストリンク、画像リンク、画像の拡大表示リンク、外部サイトへのリンクについて、サンプルHTMLを使いながらやさしく解説していきます。
素材のダウンロード
ここで使用する画像を以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| 桜並木公園 | 大阪城 | 湖の風景 |
|---|---|---|
| sakura-park.png | osaka-castle.png | large-lake.png small-lake.png |
 |  |  |
リンクはページ同士をつなぐ入口
リンクは、あるページから別のページへ移動するための入口です。たとえば、観光案内サイトで「桜並木公園」という文字をクリックすると、公園の詳細ページに移動するような仕組みを作れます。
リンクを使うと、1つのページにすべての情報を詰め込む必要がなくなります。トップページには概要を書き、詳しい説明は別ページに分けることで、読みやすいWebサイトを作れます。
| リンクの種類 | 内容 |
|---|---|
| テキストリンク | 文字をクリックして別ページへ移動する |
| 画像リンク | 画像をクリックして別ページへ移動する |
| 画像ファイルへのリンク | サムネイル画像から大きな画像を開く |
| 外部サイトへのリンク | 自分のサイト以外のWebサイトへ移動する |
リンクを理解すると、HTMLページを単体で作るだけでなく、複数のページをつなげたWebサイトを作れるようになります。
図1：リンクでページ同士をつなぐ仕組み
この図から分かること
リンクは、ページ同士をつなぐための仕組みです。TOPページから詳細ページへ移動できるようにすると、情報を分かりやすく分けて整理できます。
HTMLでは、<a> タグを使ってリンクを作ります。href属性に移動先のファイル名やURLを指定することで、クリックしたときにどこへ移動するかを決められます。
aタグの基本
リンクを作る基本の形は、次のようになります。
<a href="リンク先">クリックする文字</a><a> がリンクの開始タグ、</a> がリンクの終了タグです。その間に書いた文字が、クリックできるリンクになります。
href属性には、移動先を指定します。href属性の値には、同じフォルダにあるHTMLファイル名や、外部サイトのURLなどを書けます。
| 部分 | 役割 |
|---|---|
| <a> | リンクを作るためのタグ |
| href属性 | リンク先を指定する属性 |
| リンク文字 | クリックできる文字 |
| </a> | リンクの終わりを示す終了タグ |
たとえば、guide.html というページへ移動するリンクを作る場合は、次のように書きます。
<a href="guide.html">案内ページを見る</a>この場合、「案内ページを見る」という文字がリンクになります。クリックすると、guide.html に移動します。
テキストリンクを作る
まずは、文字をクリックして別ページへ移動するテキストリンクを作ってみましょう。リンクにしたい文字を <a> と </a> で囲み、href属性に移動先のHTMLファイル名を指定します。
ここでは、観光案内ページから桜並木公園の詳細ページへ移動する例を作ります。トップページにある「桜並木公園の詳細を見る」という文字をクリックすると、sakura-park.html に移動する構成です。
ファイル名： Lesson6-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>観光案内トップページ</title>
</head>
<body>
<h1>まち歩き観光案内</h1>
<p>このページでは、週末に訪れたいおすすめスポットを紹介します。</p>
<p><a href="sakura-park.html">桜並木公園の詳細を見る</a></p>
</body>
</html>ブラウザの表示例
このHTMLでは、<a href="sakura-park.html"> によって、sakura-park.html へ移動するリンクを作っています。リンク文字は「桜並木公園の詳細を見る」です。
リンクは、文章の中に自然に入れることもできますし、1つの段落として配置することもできます。今回の例では、<p> の中に <a> を入れて、リンク部分を1つの段落として見せています。
リンク先ページを作る
リンクを作るときは、移動先のページも用意しておく必要があります。href属性に sakura-park.html と書いた場合、同じフォルダ内に sakura-park.html というHTMLファイルが存在していないと、正しくページを開けません。
次に、桜並木公園の詳細ページを作成します。
ファイル名： sakura-park.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>桜並木公園の案内</title>
</head>
<body>
<h1>桜並木公園へようこそ</h1>
<p>桜並木公園は、春になると約200本の桜が咲き、多くの人が散策を楽しむ人気の公園です。</p>
<img src="sakura-park.png" alt="桜が咲く公園の並木道">
<h2>基本情報</h2>
<ul>
<li>開園時間：午前9時から午後6時まで</li>
<li>入園料：無料</li>
<li>最寄り駅：桜並木駅から徒歩5分</li>
<li>駐車場：普通車250台</li>
</ul>
<p>お問い合わせ：03-1234-5678</p>
<p><a href="Lesson6-1.html">観光案内トップページへ戻る</a></p>
</body>
</html>ブラウザの表示例
このページでは、公園の説明、画像、基本情報を掲載しています。最後には、<a href="Lesson6-1.html"> を使って、トップページへ戻るリンクを作っています。
このように、リンクは一方通行だけでなく、詳細ページからトップページへ戻るためにも使えます。複数ページでWebサイトを作る場合は、ユーザーが迷わないように、戻るリンクや関連ページへのリンクを用意しておくと親切です。
相対パスと絶対パスの考え方
href属性に書くリンク先には、大きく分けて相対パスと絶対パスがあります。
相対パスは、現在のHTMLファイルから見たリンク先の場所を指定する書き方です。同じサイト内のページへ移動するときによく使います。
絶対パスは、https:// から始まるURLのように、Web上の場所を完全な形で指定する書き方です。外部サイトへリンクするときに使います。
| リンク先 | 書き方の例 | 説明 |
|---|---|---|
| 同じフォルダ内のページ | href="notice.html" | 現在のHTMLと同じ場所にあるページへ移動する |
| サブフォルダ内のページ | href="news/update.html" | newsフォルダ内のupdate.htmlへ移動する |
| 外部サイト | href="https://www.example.com/" | 別のWebサイトへ移動する |
たとえば、Lesson6-1.html と sakura-park.html が同じフォルダにある場合は、href="sakura-park.html" と書くだけで移動できます。
一方、newsフォルダの中にある update.html へ移動したい場合は、href="news/update.html" のようにフォルダ名も含めて指定します。
外部サイトへ移動する場合は、https:// から始まる完全なURLを書きます。https:// を省略すると、意図したリンクにならないことがあるため注意しましょう。
図2：相対パスと絶対パスの違い
この図から分かること
同じサイト内のHTMLファイルへ移動するときは、相対パスを使うことが多いです。同じフォルダにあるページならファイル名だけで指定できます。
一方、外部サイトへ移動するときは、https:// から始まる絶対URLを指定します。href属性には、リンク先がどこにあるのかを正しく書くことが大切です。
画像をリンクにする
リンクにできるのは文字だけではありません。画像もリンクにできます。画像リンクを作るには、<img> タグを <a> タグで囲みます。
基本の形は次のようになります。
<a href="リンク先">
<img src="画像ファイル名" alt="画像の説明">
</a>この形にすると、画像そのものがクリックできるリンクになります。観光サイトや商品紹介ページでは、写真をクリックして詳細ページへ移動するような使い方がよくあります。
ここでは、大阪城の写真をクリックすると、大阪城の詳細ページへ移動する例を作ります。
ファイル名： Lesson6-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>名所ギャラリー</title>
</head>
<body>
<h1>名所ギャラリー</h1>
<p>写真をクリックすると、名所の詳しい案内ページへ移動します。</p>
<a href="osaka-castle.html">
<img src="osaka-castle.png" alt="青空を背景にした大阪城" width="300">
</a>
</body>
</html>ブラウザの表示例
このHTMLでは、<a href="osaka-castle.html"> の中に <img> タグを入れています。これにより、大阪城の画像がリンクになります。
画像をリンクにするときも、alt属性は大切です。画像が表示できない場合や、スクリーンリーダーを利用している場合でも、alt属性によって画像の内容を伝えられます。
また、width属性を使って画像の表示幅を指定しています。ここでは width="300" としているため、画像の幅を300ピクセルで表示する指定になります。画像の見た目を細かく調整する方法は、CSSに関する記事以降で解説します。
画像リンクの移動先ページを作る
次に、大阪城の詳細ページを作成します。Lesson6-2.html の画像をクリックすると、この osaka-castle.html に移動する構成です。
ファイル名： osaka-castle.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>大阪城の案内</title>
</head>
<body>
<h1>大阪城へようこそ</h1>
<p>大阪城は、歴史ある天守閣と広い公園が魅力の観光名所です。春には桜の名所としても多くの人に親しまれています。</p>
<h2>基本情報</h2>
<ul>
<li><strong>所在地：</strong>大阪府大阪市中央区大阪城1-1</li>
<li><strong>開館時間：</strong>午前9時から午後5時まで</li>
<li><strong>休館日：</strong>年末年始</li>
<li><strong>入場料：</strong>大人600円、小中学生200円</li>
</ul>
<h2>アクセス</h2>
<ul>
<li>JR大阪環状線 大阪城公園駅から徒歩5分</li>
<li>Osaka Metro 谷町四丁目駅から徒歩10分</li>
<li>周辺に有料駐車場があります</li>
</ul>
<p><a href="Lesson6-2.html">名所ギャラリーへ戻る</a></p>
</body>
</html>ブラウザの表示例
この詳細ページでは、大阪城の説明、基本情報、アクセス情報を掲載しています。最後には、名所ギャラリーへ戻るリンクを用意しています。
画像リンクを使うと、文字だけのリンクよりも直感的にページ移動を案内できます。写真やバナー、アイコンなどをクリックしてもらいたい場面で便利です。
画像リンクを作るときの注意点
画像リンクを作るときは、<a> タグと <img> タグの関係を正しく書くことが大切です。画像全体をリンクにしたい場合は、<img> タグ全体を <a> タグで囲みます。
| 書き方 | 説明 |
|---|---|
| <a href="page.html"><img src="photo.png" alt="説明"></a> | 画像全体がリンクになる |
| <img src="photo.png" alt="説明"> | 画像は表示されるが、リンクにはならない |
| <a href="page.html">詳しく見る</a> | 文字がリンクになる |
画像が表示されない場合は、src属性に書いた画像ファイル名や保存場所を確認します。リンク先へ移動できない場合は、href属性に書いたHTMLファイル名やパスを確認します。
画像リンクでは、画像を表示するための src属性と、移動先を指定する href属性の両方が関係します。どちらか一方が間違っていると、思った通りに動きません。
小さい画像から大きい画像を開く
画像リンクは、HTMLページだけでなく、画像ファイルそのものへリンクすることもできます。たとえば、小さなサムネイル画像をクリックすると、大きな画像ファイルを開くようにできます。
サムネイルとは、一覧表示用の小さな画像のことです。写真ギャラリーでは、最初に小さな画像を表示し、クリックしたら大きな画像を見られるようにする構成がよく使われます。
ファイル名： Lesson6-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真拡大ギャラリー</title>
</head>
<body>
<h1>写真拡大ギャラリー</h1>
<p>小さい写真をクリックすると、大きな写真を開けます。</p>
<a href="large-lake.png">
<img src="small-lake.png" alt="山に囲まれた湖の風景" width="200">
</a>
</body>
</html>ブラウザの表示例
このHTMLでは、表示している画像は small-lake.png です。しかし、<a> タグのhref属性には large-lake.png を指定しています。
そのため、小さな湖の画像をクリックすると、大きな湖の画像ファイルを開く動きになります。画像一覧やギャラリーページでよく使える考え方です。
| 指定している場所 | ファイル名 | 役割 |
|---|---|---|
| href属性 | large-lake.png | クリックしたときに開く大きな画像 |
| src属性 | small-lake.png | ページ上に表示する小さな画像 |
| alt属性 | 山に囲まれた湖の風景 | 画像の説明 |
href属性とsrc属性には、それぞれ違う役割があります。href属性はクリック後の移動先、src属性はページ上に表示する画像です。
図3：画像リンクとサムネイルの仕組み
この図から分かること
画像リンクでは、ページ上に表示する画像と、クリックしたときに開くリンク先を別々に指定できます。src属性には表示する画像、href属性には移動先や開きたい画像ファイルを指定します。
サムネイル画像から大きな画像を開く仕組みを使うと、ページを見やすく整理しながら、必要なときだけ大きな画像を見てもらえるようになります。
外部サイトへリンクする
自分のサイト内のページだけでなく、外部のWebサイトへリンクすることもできます。外部サイトへリンクするときは、href属性に https:// から始まる完全なURLを書きます。
ファイル名： Lesson6-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おすすめWebサイト</title>
</head>
<body>
<h1>おすすめWebサイト</h1>
<p>Web制作の調べものに役立つサイトを紹介します。</p>
<p><a href="https://developer.mozilla.org/ja/">MDN Web Docs 日本語版を見る</a></p>
</body>
</html>ブラウザの表示例
このHTMLでは、href属性に https://developer.mozilla.org/ja/ を指定しています。これは外部サイトへのリンクです。
外部サイトへリンクするときは、https:// を含めて正確に書きます。wwwから始めたり、ドメイン名だけを書いたりすると、リンクが正しく動かない場合があります。
| リンクの種類 | href属性の例 |
|---|---|
| 同じフォルダのHTMLへリンク | href="sakura-park.html" |
| フォルダ内のHTMLへリンク | href="spots/castle.html" |
| 画像ファイルへリンク | href="large-lake.png" |
| 外部サイトへリンク | href="https://developer.mozilla.org/ja/" |
外部サイトへ移動したあと、元のページに戻りたい場合は、ブラウザの戻る機能を使います。HTMLのリンクは移動先を指定するものであり、戻る動作そのものを自動で用意するものではありません。
href属性を書くときの注意点
href属性は、リンクの移動先を指定する大切な属性です。href属性の値が間違っていると、リンクをクリックしても正しいページへ移動できません。
確認したいポイントは次のとおりです。
| 確認ポイント | 内容 |
|---|---|
| ファイル名 | リンク先のHTMLファイル名と一致しているか |
| 拡張子 | .html を書き忘れていないか |
| フォルダ名 | サブフォルダにある場合、フォルダ名も書いているか |
| 大文字と小文字 | Lesson6-1.html と lesson6-1.html の違いに注意する |
| 外部URL | https:// から始まる完全なURLになっているか |
| 半角文字 | href、=、" " が半角で書かれているか |
特に、ファイル名の大文字と小文字は注意が必要です。自分のパソコンでは問題なく開けても、サーバー上では別ファイルとして扱われることがあります。HTMLファイル名や画像ファイル名は、小文字でそろえておくと管理しやすくなります。
aタグとimgタグの組み合わせ
<a> タグと <img> タグを組み合わせると、画像リンクを作れます。ただし、それぞれのタグが担当している役割は異なります。
| タグ／属性 | 役割 |
|---|---|
| <a> | リンクを作る |
| href属性 | クリックしたときの移動先を指定する |
| <img> | 画像を表示する |
| src属性 | 表示する画像ファイルを指定する |
| alt属性 | 画像の説明を指定する |
| width属性 | 画像の表示幅を指定する |
| height属性 | 画像の表示高さを指定する |
画像リンクでは、<a> タグが移動先を担当し、<img> タグが画像表示を担当します。どちらも必要な役割が違うため、混同しないようにしましょう。
たとえば、href属性に画像ファイルを指定すれば、クリック時に画像ファイルを開けます。href属性にHTMLファイルを指定すれば、クリック時に別ページへ移動できます。一方、src属性はあくまでページに表示する画像を指定するための属性です。
リンク文字は分かりやすくする
テキストリンクを作るときは、リンク文字も大切です。リンク文字とは、<a> と </a> の間に書く、クリックできる文字のことです。
たとえば、次のようなリンク文字は内容が分かりやすいです。
<a href="sakura-park.html">桜並木公園の詳細を見る</a>この書き方なら、クリックすると桜並木公園の詳細ページへ移動することが分かります。
一方で、次のようなリンク文字は、移動先が分かりにくくなります。
<a href="sakura-park.html">こちら</a>「こちら」だけでは、どのようなページへ移動するのかが分かりにくいです。読み手に親切なページにするには、リンク先の内容が想像できる文字にしましょう。
| 分かりやすいリンク文字 | 分かりにくいリンク文字 |
|---|---|
| 桜並木公園の詳細を見る | こちら |
| 大阪城の基本情報を見る | 詳細 |
| 写真を大きく表示する | クリック |
| MDN Web Docs 日本語版を見る | サイトへ |
リンク文字は、ページの案内板のようなものです。クリックする前に、どこへ移動するのかが分かる表現を選ぶと、使いやすいページになります。
使用したタグと属性一覧
| タグ／属性 | 説明 |
|---|---|
| <a>...</a> | リンクを作成するアンカータグ |
| href="リンク先" | リンク先のURLまたはファイルパスを指定する |
| <img> | 画像を表示する空要素 |
| src="画像パス" | 表示する画像ファイルの場所を指定する |
| alt="代替テキスト" | 画像が表示できない場合やスクリーンリーダー向けに画像の内容を説明する |
| width="数値" | 画像の表示幅をピクセルで指定する |
| height="数値" | 画像の表示高さをピクセルで指定する |