ハイパーリンクを使うと、別のページにスムーズにアクセスできます。
HTMLでは、ハイパーリンク （単に リンク ともいう）を使うと、クリックするだけで別のページに移動できます。
を移動先に指定できるのは、自身のサイト内のウェブページ、他のウェブページ、画像などです。ハイパーリンクを作成するには、<a> タグを使用します。
a は アンカー(錨) が語源です。どこに移動するかを指定するのに、いくつかの指定方法があります。
これは、Internet Explorer などで、ウェブページを閲覧する際に、アドレスバーに表示されている
ウェブページアドレス（URL） を直接指定する方法です。
一般的に、全く異なるサイトにリンクする場合に便利です。
<a>タグを以下のように使用します。
<a href="http://ジャンプしたいページのURL/">画面上に表示される文字列</a>
- <a href="・・・"> と </a> で囲んだ範囲がクリックできるエリアとなり、この範囲に記述した文字が全体がクリック対象になります。
上の例は 画面上に表示される文字列 のようになります。
HTML入力
<a href="http://www.yahoo.co.jp/" target="_blank">Yahooにジャンプ！</a>HTML出力
http://で始まる 絶対URL ではなく、相対URL を指定すると、リンクを簡単に表現できます。
また、ウェブページアドレスや、ファイルの配置が移動した場合、 絶対URLは配置に合わせて書き換える必要がありますが、
相対URLは 現在のファイルの位置を基準として 相対的にファイルの位置を指定するので
現在のファイルとの位置関係が変わらない限り書き換える必要がありません。
そのため、自分のサイト内のページにジャンプする場合は 相対URL を使用すると便利です。相対URLの指定方法
- 作業中のファイルから見て、同一場所にある場合、 フォルダ以下にある場合、 自分より上のフォルダにある場合で
表現が変わります。- フォルダ内にあるファイルの場合は、そのフォルダ名からファイル名までを順に「/」で区切って指定します。
- 自分より上のフォルダにあるファイルの場合は、一つ上を示すごとに「../」をつけて指定します。
○作業中のファイルと 同じ階層 に呼び出したいファイル hogehoge.html がある場合
<a href="hogehoge.html">ここをクリック！</a>○dokosokoフォルダ内に呼び出したいファイル hogehoge.html がある場合
<a href="dokosoko/hogehoge.html">ここをクリック！</a>○現在のファイルからみて 一つ上のフォルダに hogehoge.html がある場合
<a href="../hogehoge.html">ここをクリック！</a>○現在のファイルからみて 二つ上の階層のフォルダに hogehoge.html がある場合
<a href="../../hogehoge.html">ここをクリック！</a>
HTML入力
<a href="index.html">ここをクリック</a>すると、トップページに戻れます。出力
ここをクリックすると、トップページに戻れます。
クリックすると、同一ページ内の、異なる位置に移動することもできます。
画面をスクロールさせることに似ています。
このとき <a> タグは以下のような特殊な記述になります。移動先の位置に <a name="mark"> と記入します。
mark の文字は好きな名前でかまいません。 ただし半角英数文字を推奨します。
移動先のマーク自体は画面に表示されません。移動元の位置に <a href="#mark"> と記入します。
mark の文字は先ほど決めた mark というキーワードにあわせます。
キーワードの先頭には # をつけます。
HTML入力<a name="mark">ここに印をつけています。</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#mark">ここをクリック</a>すると、印をつけた場所に移動します。出力
印をつけた場所に自動的にスクロールします。(距離が近いので分かりにくいかもしれません。)
ページが上下に長いとき、同一ページ内の特定の場所に移動する際や、
別のページ内の特定の位置に移動する際に便利です。