リンク

■ リンク

■ リンクについて

【メニュー項目】　次の各項目についての解説を参照してください。

リンクの種類
リンクの書き方
ページの途中にリンクするには
画像をリンクボタンにするには
リンク先の URL（ファイル名やパス）を記入するには
リンクの色を変えるには
リンクの下線を表示しないようにするには
リンクにマウスを乗せたときに色を変えるには
直前のページに [戻る] リンクを張るには
セレクトボックスからジャンプするには
閉じるリンクをつけるには
画像の特定部分にリンクを張るには

■ リンクの種類

ハイパーテキストという言葉がリンク（ハイパーリンク）を含む文書をさすことからもわかるとおり、リンクは HTML において最も重要な概念です。　リンクは、ハイパーテキストどうしを結びつけるほか、ブラウザーで表示した HTML文書から画像や様々のオブジェクトにアクセスするために使用されます。　つまり、

HTML文書へのリンク
1. 他のページ（別のHTMLファイル）
2. ページ内（同じHTMLファイル）の特定の場所
3. 異なるURLをもつページ
画像へのリンク
その他オブジェクトへのリンク

のようなものがあります。

■ リンクの書き方： <a href="xxxx"> ～ </a>

リンクは、<a> タグを使って、

<a href="リンク先"> 文字列 </a>

[例] <a href="linksaki.html">linksaki.html へリンクします。</a>

のように書きます。　このとき、リンク先 には、上の例のように ファイル名 が記入されることが多いのですが、より 一般的な形 としては、

リンク先＝トップページURL ＋パス＋ファイル名＋# id属性

[例] http://ex.osaka-kyoiku.ac.jp/~takeuti/enquete/jyugyo_q.html#Section1
- トップページURL ＝http://ex.osaka-kyoiku.ac.jp/~takeuti/
- パス＝enquete/
- ファイル名＝jyugyo_q.html
- # id属性＝#Section1

のように、ブラウザーで Web ページを開くときと同様の URL で指定します。

ただし、これらのうち、リンク元のHTMLファイルと同一の部分は省略することができます。　したがって、同じフォルダー内に存在するHTMLファイル同士（パスまでが同じ）では、リンク先にはファイル名を書くだけでよいのです。　また、id属性 は HTML文書内の特定の要素の位置に移動する際に指定しますが、指定する場合には移動先要素の id属性の値（識別子）の前に # をつけます。

■ １．HTML文書へのリンク

他のページ（別のHTMLファイル）

HTMLソース　（<body> ～ </body> の間）
<a href="link.html"> link.html へリンクします。 </a>

IEの表示
link.html へリンクします。

移動先のHTMLファイルの指定は、

<a href="HTMLファイル名"> 文字列 </a>

とすることで、文字列の位置をクリックすると指定したファイルに移動します。

ページ内（同じHTMLファイル）の特定の場所

HTMLソース　（<body> ～ </body> の間）
目次：<BR> <a href="#hajimeni">はじめに</a><BR> :<BR> :<BR> :<BR> :<BR> :<BR> <a href="#owarini">おわりに</a> <BR> <h3 id="hajimeni">はじめに</h3> <p>この文書は・・・</p> :<BR> :<BR> :<BR> :<BR> :<BR> <h3 id="owarini">おわりに</h3> <p>今までの話から・・・</p>

HTMLソース　（<body> ～ </body> の間）

目次：<BR>
<a href="#hajimeni">はじめに</a><BR>
      :<BR>
      :<BR>
      :<BR>
      :<BR>
      :<BR>
<a href="#owarini">おわりに</a>
       <BR>
<h3 id="hajimeni">はじめに</h3>
<p>この文書は・・・</p>
      :<BR>
      :<BR>
      :<BR>
      :<BR>
      :<BR>
<h3 id="owarini">おわりに</h3>
<p>今までの話から・・・</p>

IEの表示
目次：はじめに : : : おわりにはじめにこの文書は・・・ : : おわりに今までの話から・・・

IEの表示

目次：
はじめに
:
:
:
おわりに

はじめに

この文書は・・・

:
:

おわりに

今までの話から・・・

移動先のid属性の設定は、移動先にする要素のタグについて、

<要素名 id="識別子">

とすることで、この要素の位置 が "#識別子" として参照できます。　すなわち、

<a href="#識別子"> 文字列 </a>

としてリンクを作成することができます。

なお、id属性の値である識別子は、同一ページ内で一意的である必要があります。　つまり、同一の識別子をもつ要素が複数あってはいけません。

従来の HTML4.01 まででは、同一HTML文書内のジャンプ先 は、<a> タグの name属性を使用して指定していました。HTML5では、<a> タグの name属性は廃止され、このような用途に使用することはできません。同一HTML文書内のジャンプ先は、必ず、要素（タグ）に設定し、id属性により指定 しましょう。

異なるURLをもつページ

HTMLソース　（<body> ～ </body> の間）
<a href="http://osaka-kyoiku.ac.jp/university/index.html"> 大阪教育大学 </a>

IEの表示
大阪教育大学

のように、href= 以下に URL を書けば OK です。

さらに、移動先の要素のid属性（識別子）を指定（"#識別子"を追加）することで、異なるURLをもつページについても、ページ内の特定の場所を表示することができます。

■ ２．画像へのリンク

基本的には、HTML文書へのリンクと同じで、指定するファイル名が画像ファイルの名前になる点が異なるだけです。　ただし、当然ながら、画像ファイルの特定の場所を指定して表示することはできません。

また、指定する画像ファイルの形式は、Jpeg形式（.jpg または .jpeg を拡張子としてもつ）、 Gif形式（.gif）、 PNG形式（.png）が望ましく、それ以外の形式では、ブラウザーでは表示できない可能性があります。　また、たとえ表示できても、ファイルのサイズの観点から望ましくない場合が多いのです。

HTMLソース　（<body> ～ </body> の間）
<a href="http://www.osaka-kyoiku.ac.jp/~joho/images/cubex2s.jpg" alt="3Dプリンタ"> 3Dプリンタ </a>

IEの表示
3Dプリンタ

■ ３．その他オブジェクトへのリンク

これも、基本的には、HTML文書へのリンクと同じで、指定するファイル名が異なるだけです。　指定可能なオブジェクトとしては、音声（ファイル、ストリーム）、ビデオ（ファイル、ストリーム）、pdfファイル、スクリプト（cgi、Java、VB、etc.）、アップレット、アクティブXコンポーネントなど様々なものがあります。　ただし、ブラウザーやPCにインストールしてあるソフトで読み込めないような種類のファイルは、リンクをクリックしても、単にダウンロードしてファイルを保存するだけとなります。

なお、HTML5 では、新たに <audio>、<video>、<object> などの要素が導入されて、ブラウザー内でメディアファイルの再生・表示やアニメーションの表示を行うことができるように配慮されております。

■ 直前のページに [戻る] リンクを張るには

直前に見ていたページに戻るには、JavaScript の history.back() や history.go() を用いると便利です。

<a href="javascript:history.back()">[戻る]</a>
<a href="javascript:history.go(-1)">[戻る]</a>

■ セレクトボックスからジャンプするには

下記のテクニックを用いることで、セレクトボックスで選択したサイト（ページ）にジャンプさせることができます。

<select onchange="location.href=this.options[this.selectedIndex].value">
 <option value="#">検索サイトにジャンプ
 <option value="http://www.yahoo.co.jp/">Yahoo
 <option value="http://www.google.co.jp/">Google
 <option value="http://www.infoseek.co.jp/">Infoseek
</select>

■ Word や Excel の文書を開くには

Word や Excel などの文書ファイルを開かせるには、単にその文書へのリンクを張るだけで構いません。指定したファイルがダウンロードされ、.doc であれば Word、.xls であれば Excel など、拡張子に従って適切なアプリケーションが起動されます。

<a href="sample.doc">サンプル文書</a>

■ 閉じるリンクをつけるには

クリックするとウィンドウが閉じるような、閉じるリンクをつけるには、次のようにします。IE の場合、JavaScript を用いて開いたウィンドウはそのまま閉じることができますが、閲覧者があらかじめ開いていたウィンドウを閉じる際には、セキュリティの都合上、「ウィンドウは、表示中の Webページにより閉じられようとしています。このウィンドウを閉じますか？」の確認ダイアログが表示されます。

<a href="#" onclick="window.close()">[閉じる]</a>