ハイパーリンク - 個人サイトのためのHTML LS講座

ページとページをつなぐリンクのことをハイパーリンクとよびます。そのハイパーリンクについての説明です。

画像やファイルへリンクを貼る際のパス(URL)の指定方法には、「絶対パス」と「相対パス」の2つがあり、どちらを使用してもOKです。画像へリンクを貼る場合は、テキストの部分を画像 <img src="画像のURL"> に置きかえます。

◆絶対パス(絶対URL)→ http:// から書き始めるもの

主として他サイトへのリンクに使用します。たとえばYahooへのリンクを貼る場合は、

http://www.yahoo.co.jp/

と指定します。

◆相対パス(相対URL)→ 目的のファイルがそのファイルに対してどこにあるかを指定するもの

主として自分のサイト内のページへのリンクに使用します。

《同じフォルダ内の x.html への指定方法》

x.html

同じフォルダ内のファイルを指定するときは、そのまま「ファイル名」の形で指定します。

《1つ上のフォルダ内の x.html への指定方法》

../x.html

1つ上のフォルダ内のファイルを指定するときは「../ファイル名」の形で指定します。2つ上の場合は 「../../ファイル名」で指定します。

《同じフォルダ内のxyフォルダ内にある x.html への指定方法》

xy/x.html

「フォルダ名/ファイル名」の形で指定します。
▲ページの先頭へ
<a href="URL">テキスト</a> で、他のページへのリンクを貼ることができます。
<a href="menu.html">menu.htmlのページ</a>

《表示結果》

menu.htmlのページ
▲ページの先頭へ
<a href="#リンク先">Aへリンク</a> で、<a name="リンク先">A</a> へのリンクを貼ることができます。長いページを見やすくするために使います。
<a href="#link">Aへリンク</a>


<a name="link">A</a>

《表示結果》

Aへリンク


A
▲ページの先頭へ
<a href="リンク先" target="_blank">新しいウインドウで開く</a> で、リンク先を新しいウインドウで開くことができます。
<a href="menu.html" target="_blank">新しいウインドウで開く</a>

《表示結果》

新しいウインドウで開く
▲ページの先頭へ
<a href="#top">テキスト</a> または <a href="#">テキスト</a> で、ページ内のトップへリンクすることができます。
<a href="#top">Go to TOP</a>

<a href="#">Go to TOP</a>

《表示結果》

Go to TOP(#topを指定)

Go to TOP(#を指定)

▲ページの先頭へ
<a href="#!">テキスト</a> で、どこにも移動しないリンクを作成できます。
<a href="#!">どこにも移動しません</a>

《表示結果》

どこにも移動しません
▲ページの先頭へ

>>HTML LS講座メニューへ戻る