【6日でできるHTML入門】リンクの作成①

　ホームページでは、文字や画像をクリックして次のページへ移動できる「リンク」が重要な役割を果たします。HTMLでは <a>（アンカータグ）を使い、href 属性にリンク先を指定することで、テキストリンクや画像リンク、外部サイトへのリンクなどを簡単に作成できます。ここでは、基本的なリンクの仕組みと書き方を段階的に解説します。

１．テキストリンクの作成

素材のダウンロード

ここで使用する画像を以下のリンクから画像素材をダウンロードできます。

creating-link1 ダウンロード

1.1. 基本構文

リンクにしたい文字列を <a>…</a> で囲み、開始タグに href="リンク先" を指定します。
href の値には、同じサイト内のファイル名（相対パス）やURL（絶対パス）を記述します。

1.2. コード例と出力

ファイル名： lesson06-1.html

<!-- ファイル名: lesson06-1.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク作成🔗</title>
</head>
<body>
  <h1>観光案内ページ</h1>
  <p>次は「</p>
  <a href="park.html">桜並木公園</a>
  <p>」の詳細をご覧ください。</p>
</body>
</html>

ファイル名： park.html

<!-- ファイル名: park.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>桜並木公園🌸</title>
</head>
<body>
  <h1>桜並木公園へようこそ🌸</h1>
  <p>この公園は春になると約200本のソメイヨシノが美しく咲き誇り、多くの花見客でにぎわいます。</p>
  <img src="park.png" alt="桜並木公園">
  <p>‒ 開園時間：午前9時～午後6時</p>
  <p>‒ 入園料：無料</p>
  <p>‒ アクセス：</p>
  <ul>
    <li>JR中央線「桜並木駅」下車 徒歩5分</li>
    <li>駐車場：250台（無料）</li>
  </ul>
  <p>お問い合わせ：03-1234-5678（桜並木公園管理事務所）</p>
  <p><a href="lesson06-1.html">◀ TOPページへ戻る</a></p>
</body>
</html>

ブラウザ表示例

【lesson06-1.html】

【park.html】

1.3. 相対パスと絶対パスの使い分け

同一フォルダ内のページ：href="notice.html"
サブフォルダ内のページ：href="news/update.html"
別ドメインのページ：href="https://example.com/page.html"

２．画像リンクの作成

2.1. 画像をクリックしてページ移動

<img>タグを <a>タグで囲むと、画像自体をリンクにできます。

ファイル名： lesson06-2.html

<!-- ファイル名: lesson06-2.html-->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク作成🔗</title>
</head>
<body>
  <h1>名所ギャラリー</h1>
  <p>画像をクリックすると詳細ページへ移動します。</p>
  <a href="castle.html">
    <img src="osaka-castle.png" alt="大阪城" width="300">
  </a>
</body>
</html>

ファイル名： castle.html

<!-- ファイル名: castle.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>大阪城🏯</title>
</head>
<body>
  <h1>大阪城へようこそ🏯</h1>
  <p>大阪城は1583年に豊臣秀吉によって築かれた、日本を代表する歴史的名城です。桜の名所としても知られ、春には天守閣を背景に約3,000本の桜が咲き誇ります。</p>

  <h2>基本情報</h2>
  <ul>
    <li><strong>所在地：</strong>大阪府大阪市中央区大阪城1-1</li>
    <li><strong>開館時間：</strong>午前9:00～午後5:00（入城は午後4:30まで）</li>
    <li><strong>休館日：</strong>年末年始（12/28～1/1）</li>
    <li><strong>入場料：</strong>大人 600円／小中学生 200円</li>
  </ul>

  <h2>アクセス</h2>
  <ul>
    <li>JR大阪環状線「大阪城公園」駅から徒歩5分</li>
    <li>地下鉄谷町線・中央線「谷町四丁目」駅から徒歩10分</li>
    <li>駐車場：大阪城公園大手門駐車場（有料）</li>
  </ul>

  <p><a href="lesson06-2.html">◀ TOPページに戻る</a></p>
</body>
</html>

ブラウザ表示例
（幅300pxに縮小された大阪城の写真が表示され、クリックで castle.html へ移動）

【lesson06-2.html】

【castle.html】

2.2. 画像の拡大表示リンク

小さいサムネイル画像をクリックすると、大きな画像をブラウザで開く例。

ファイル名： lesson06-3.html

<!-- ファイル名: lesson06-3.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク作成🔗</title>
</head>
<body>
  <h1>写真拡大ギャラリー</h1>
  <a href="big-lake.png">
    <img src="small-lake.png" alt="湖の風景" width="200">
  </a>
  <p>クリックすると拡大画像が表示されます。</p>
</body>
</html>

ブラウザ表示例
（200px幅の湖の写真が表示され、クリックで big-lake.jpg を単体表示）

【lesson06-3.html】

【big-lake.jpg】

３．外部サイトへのリンク

3.1. 絶対URL指定

自サイト以外のWebサイトへリンクする場合、href に完全なURLを指定します。

ファイル名： lesson06-4.html

<!-- ファイル名: lesson06-4.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク作成🔗</title>
</head>
<body>
  <h1>おすすめサイト</h1>
  <p>以下のリンクから公式サイトへ移動できます。</p>
  <a href="https://www.wikipedia.org/">Wikipedia 日本語版</a>
</body>
</html>

ブラウザ表示例

【lesson06-4.html】

【https://www.wikipedia.org/】

3.2. 注意点

絶対URLではプロトコル（http://／https://）を省略しない
サイト移動後、元ページへ戻るにはブラウザの「戻る」機能を使用

まとめ

ここで登場したタグと属性の一覧です。

タグ／属性	説明
<a>…</a>	リンクを作成するアンカータグ
href="リンク先"	リンク先URLまたはファイルパスを指定
<img src="画像パス">	画像を表示するタグ（空要素）
alt="代替テキスト"	画像が表示できない場合の代替テキスト
width="数値"	画像の表示幅をピクセルで指定
height="数値"	画像の表示高さをピクセルで指定

　以上を理解すれば、テキストリンク・画像リンク・外部リンクなど、さまざまなリンクを自由に作成できるようになります。