他のページへのリンク方法

1枚のページに沢山のことを盛り込むとページが縦長になり、読みにくいものです。

そのような時は、通常次の2 種類の方法が用いられます。

同じページ内で、関連する個所へジャンプさせる方法
他のページに移動する方法

また、ネット上の友達や他のサイトとリンクを張る方法もここで説明します。

【注意】
たまに見かけるのが「無断リンク禁止」「リンクはトップページのみ許可」と書いてあるサイトです。

「無断リンク」は「著作権侵害」では無く、その言葉に強制力はありません。
加えて、どのページにリンクを張っても問題はありません（ただし、相手が不利益を生じるリンクは、「不法行為法（民法709条）」が適用される可能性があります）。

同じページ内で、関連する個所へジャンプさせる方法

上記のリンク先をクリックしてみてください。そのタイトルのコンテンツに同じページ内で移動することができます。

ジャンプを実現するには、「リンク場所」と「リンク先」を指定する必要があります。

まず、ジャンプさせたい個所に好きな名前をつけて次のように記述します。
<a name="jump">ここがジャンプ先です。</a>

その場所へ飛ばすためには、次のタグで先ほどつけた「名前」を呼び出す形式をとります。
<a href="#jump">ページ内でジャンプします。</a>

ただしこの時、任意でつけた名前の前に「#」が必要です。

単純な例を作ってみました。次のように記述してテストしてみましょう。
ファイル名：index.html

<html>
<head>
<title>ページのジャンプ方法</title>
</head>
<body>

<a href="#jump">ページ内でジャンプします。</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="jump">ここがジャンプ先です。</a>

</body>
</html>

記述し終えたら「ブラウザ」の「更新」ボタンをクリックして確認してみましょう。

ただし、「ブラウザ」を下図のように小さくして確認して下さい。上記の例だと、本文が短すぎてブラウザの1画面で表示されるため、ジャンプを確認できないからです。

実際クリックしてみると次のように目的のコンテンツにジャンプします。

id属性と、name属性

name属性の変わりにid属性で指定することで、ページ内でジャンプすることも可能です。
<p id="jump">ここがジャンプ先です。</p>

id属性の場合は、a要素を含むあらゆる要素の開始タグで用いることができます。両者には次のような違いがあります。

id属性は、name属性の役割以外にも多くに利用できます。例えば「スタイルシート選択子」や「プログラム処理の識別子」などがあります。
古いブラウザの中には、id属性をサポートしていない場合があります。
name属性の方が、命名の自由度が高くなっています。

また、次のような使用は、一つの文書内で重複しているため、いけません。

<a name="jump">ここがジャンプ先ですす</a>

<p id="jump">ここもジャンプ先になります</p>

一方、次のような同じ位置では許されます。

<a id="jump" name="jump">この例は問題ありません</a>

上記を踏まえた上で、id属性とname属性のどちらを使用するか決めてください。

他のページに移動する方法

通常よく用いられる「リンク」方法を説明します。「リンク」には次の2 種類があります。

自分の作成した他のページに移動したい場合
他人が作成したページに移動したい場合

基本は「同じページでジャンプ」する時のタグと全く同じです。

ただ今回異なるのは次の点です。「アドレス（URI）」を指定する必要がある

つまりリンクしたい相手の「Web ページの住所」を、省略せずに指定する必要があります。
ファイル名：index.html

<html>
<head>
<title>ページのリンク方法</title>
</head>
<body>

<a href="http://search.msn.co.jp/default.asp">
MSN サーチ
</a>

</body>
</html>

では、作成したHTML文書をブラウザで確認してみましょう。

インターネットに接続された状態で「MSN サーチ」をクリックすると、実際にリンク先に移動します。ジャンプ

これらのタグを使えば自分だけの「リンク集」も作成できます。

他のページへのリンク方法