他のページへリンクする

2016年8月3日(更新: 2016年11月26日)

ホームページといえば、ページ間の移動が欠かせません。

別のページに移動する仕組みは「ハイパーリンク」と呼ばれます。

普通はハイパーを略してリンクと呼んでいます。リンク(link)結びつけるものを表す英語です。

ひとつのページに情報を詰め込むよりも、情報の種類ごとにページを分けて作る方が、読みやすくページの読み込みも早いサイトになります。

今回はそのリンクを実際に作る方法について解説します。

リンクの作り方

リンクはaタグを使います。aは Anchor(アンカー: 錨)の略です。

aタグのhref属性に、移動したいページやファイルのURLを書きます。

書式

<a href="移動したいページのURL">リンクを設定したいテキスト</a>

hrefは Hypertext Reference(ハイパーテキスト リファレンス) の略です。

URL(Uniform Resource Locator)とは、Webページの住所のようなものです。ブラウザで表示しているページのURLは、ブラウザの上部のアドレスバーに表示されています。

例えば、Google Chrome であれば以下のように表示されます。

Google Chromeのアドレスバー

それでは、aタグの使用例を以下に示します。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>リンクテスト</title>
  </head>
  <body>

    <h1>オススメリンク集</h1>

    <!-- 外部ページへのリンク -->

    <a href="https://www.google.co.jp/">Google</a>
    <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
    <a href="http://joyplot.com/">JoyPlot</a>

  </body>
  </html>

実際の動作サンプルはこちらです。

自分で用意したHTMLソースへのリンク

さて、先ほどの例ではインターネット上のページのURLを指定しました。今度は、自分で作った他のページに移動するリンクを作ってみます。

今まで page1.html に自己紹介を作ってきましたね。このページに移動するためのリンクを作ってみましょう。

新しく top.html というファイルを page1.htmlと同じディレクトリに作ってください。

作ったら中身を以下のようにしてください。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>家野ペイジのホームページ</title>
  </head>
  <body>

    <h1>私のホームページへようこそ!</h1>

    <h2>このページについて</h2>

    <p>家野ペイジが、好きなことを発信するページです。私の自己紹介をご覧ください。</p>

  </body>
  </html>

サンプルはこちらです。「私の自己紹介」の部分がクリックできるようになっていると思います。そこをクリックすると、top.html から page1.html に移動します。

画像にリンクを設定する

リンクは文章だけでなく、画像などにもつけることができます。画像にリンクを貼る場合はimgタグをaタグで囲みます

具体例として、画像をクリックするとGoogleに移動するHTMLソースを以下に示します。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>リンクテスト</title>
  </head>
  <body>

    <h1>画像リンクテスト</h1>

    <!-- 画像のリンク -->

    <a href="https://www.google.co.jp/"><img src="profile.png"></a>

  </body>
  </html>

サンプルページで動作を確認してみてください。

画像リンクの動作サンプル

リンク先を新しいタブで開く

aタグにはtarget属性を指定することができます。リンク先を別のタブで開かせたい場合は、target属性に_blankを指定します。_(アンダースコア) から始まるので注意してください。

タグに複数の属性を書く場合は、半角スペースで区切ります。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>リンクテスト</title>
  </head>
  <body>

    <h1>画像リンクテスト</h1>

    <!-- 画像をクリックすると別のタブにリンク先を表示する -->

    <a href="https://www.google.co.jp/" target="_blank"><img src="profile.png"></a>

  </body>
  </html>

blank(ブランク)は白紙という意味です。つまり、まだ何もないところ(新規タブ)に表示するということです。

サンプルはこちらです。

target属性に _self と書くと、同一タブにリンク先を開きますが、何も指定しなくても自動的にこの設定になります。

リンクに補足情報を追加する

リンクにマウスを乗せた時に、ツールチップと呼ばれる説明文が表示される枠を表示して、リンク先の補足情報をユーザーに伝えることができます。

これを行うためには、aタグに title属性 を追加します。

例えば、以下のように書きます。

<a href="https://www.google.co.jp/" title="有名な検索エンジンのグーグルに移動するリンク">Google</a>

マウスを乗せると、次のようにツールチップによる説明文が表示されます。(スクリーンショットにはマウスポインタが映っていませんが、マウスを乗せた状態です)

aタグリンクのtitle属性でツールチップを表示

おさらい

リンクついておさらいをしましょう。

  • テキストや画像を aタグ で囲えば、別ページに移動できる リンク として機能します。
  • href属性 で移動先を指定します。
  • target属性 で同一タブで開くか、別のタブで開くかを指定できます。
  • title属性 でリンク先の説明を表示するツールチップを設定できます。

次回は、今回作ったトップページ(top.html)と自己紹介ページ(page1.html)の見栄えを良くしていきたいと思います。ページのレイアウトを制御する「CSS」に関して説明します。

コメントを残す

メールアドレスが公開されることはありません。