ページを繋ぐ！

　ここまでの内容でページを作成したら、後は作ったページ同士をリンクで繋いだり、他のページへ跳べる様にすればWebページの完成と言えます。
　リンクはHTMLの最大の特徴と言えるハイパーリンクという機能によるものです。別の人のページへジャンプするいわゆる「リンク」も、一つのサイト内の複数のページを移動するのも基本的に全く同じ事で、これを理解しないとホームページは作れないと言っても過言では無いくらい重要です。

<A href="index.html">トップページヘ</A>
　　　　　　↓
トップページヘ

　リンクにはAタグを使用し、href属性に移動先のページのURLを書きます。最初の部分やサンプルページでも解説していますが、URLには絶対パスまたは相対パスを使用できます。

　またhref属性にはもう一つ書き方があります。

mailto

メールは<A href="mailto:xxx@xxx.jp">こちら</A>
　　　　　　↓
メールはこちら

　この様に「mailto:メールアドレス」と書けば、クリックした時にブラウザに関連付けられたメーラーを起動してくれます。しかしこの機能に対応していない環境の人もいるので、メールアドレスを別に明記しておくのが良いでしょう。

ページ内リンク

<A name="top"><H3>ページを繋ぐ！</H3></A>
　　　　　　・
　　　　　　・
　　　　　　・
<A href="#top">ページトップヘ</A>
　　　　　　↓
ページトップヘ

　このページの見出しの「ページを繋ぐ！」の部分にはあらかじめAタグでname="top"という指定がしてあり、上のような書き方をする事でそのページ内の特定の位置にジャンプする事が出来ます。

<A href="basic.htm#color">色指定</A>
　↓
色指定

　の様にURLの後に#名前を付ければ別のページの特定の場所へとジャンプする事も出来ますが、その場合その部分が読み込まれるまでのタイムラグがあるので余り頼らない方がいいでしょう。

ターゲットリンク

<A href="index.html" target="_self">同一フレーム内</A><br>
<A href="index.html" target="_blank">別ウィンドウ</A><br>
<A href="index.html" target="_top">そのウィンドウのフレーム全解除</A><br>
<A href="index.html" target="_parent">そのウィンドウのフレーム一段階解除</A><br>
<A href="index.html" target="name">指定のウィンドウまたはフレーム</A><br>
　↓
同一フレーム内
別ウィンドウ
そのウィンドウのフレーム全解除
そのウィンドウのフレーム一段階解除
指定のウィンドウまたはフレーム

　target属性でリンク先のページを開くウィンドウの名前を指定してやります。初期値は"_self"なので通常書く必要はありません。また、"_top"と"_parent"はフレームを使用した場合にのみ有効なので、ここでは解説しません。
　"name"となっているのは半角英数で付けた名前なら何でもよく、本来はやはりフレームを使用するためのものですが、これにはもう一つ使い道があります。

<A href="index.html" target="index">トップページ</A><br>
<A href="basic.htm" target="name">基本</A><br>
<A href="text.htm" target="name">テキスト</A><br>
<A href="img.htm" target="name">画像</A><br>
<A href="table.htm" target="name">テーブル</A><br>
<A href="link.htm" target="name">リンク</A><br>
　↓
トップページ
基本
テキスト
画像
テーブル
リンク

　targetで名前を指定した時に、画面上にその名前の付いたウィンドウが無い場合、新たにその名前の付いたウィンドウを作って開きます。その状態で同じ名前を指定したリンクをクリックすると、先ほど開いたウィンドウにそのページを開く事になります。
　これだと必ず新しいウィンドウを開く"_blank"と違って大量のウィンドウを開いたり閉じたりという事が無いので、例えばCGギャラリーのようなページでサムネイルや画像のタイトルのリンクに使用するといった使い方が考えられます。

リンク先の一括指定

<HTML>
 <HEAD>
  <BASE target="_blank">
 </HEAD>
<BODY>

<A href="index.html" title="HTML guideの目次">トップページ</A><br>

</BODY></HTML>
　↓
トップページ

　BASEタグはヘッダ情報として使用するタグで、例の場合はそのページ内のリンク全てが新しいウィンドウを開くようになります。herf属性でリンク時の基準となるURLを指定する事もできますが、あまり使う機会はないと思います。
　使い方としては、フレーム使用時のメニューページやリンクページなど、ほぼ全てのリンクが特定ターゲットを指定する場合に有効です。BASEタグでtarget指定した後、そのページ内で別ターゲットにリンクしたい場合は、各Aタグ等で改めてtargetを指定します。要はいちいちtargetを指定する手間を省く為のものだと思えば良いでしょう。

リンク時のコメント文（IE向け）

<A href="index.html" title="HTML guideの目次">トップページ</A><br>
　↓
トップページ

　title属性はIEだとIMGタグのalt属性と同様の効果を得る事が出来ますが、NN4.08ではサポートされておらず何も起こりません。出ないだけで特に問題は無いので、JavaScriptのカーソルを合わせるとコメントが出るというものの代わりだと思って使ってみるのもいいでしょう。

リンクの文字色

<BODY link="#0040FF" vlink="#0040FF" alink="#4080FF">

　BODYタグの属性によって、リンクしたテキストの文字色を決める事が出来ます。
　linkが未訪問時の色、vlinkが既に訪れた事のあるリンクの色、alinkが現在選択中のリンクの色で、指定しなかった場合、link="#0000FF" alink="#800080" vlink="#800080"という値が適応されます。

リンク時の下線について

　通常テキストにAタグでリンクを張ると、そのテキストにはUタグと同様の下線が付きます。リンクされている場所を区別する為ですが、他に下線で強調しているテキストがあると紛らわしいですし、「リンクは文字色が違うし、マウスポインタが変化するから分かる」とか「下線付きのテキストは美しくない、読みづらい」とかいった理由で下線を消したい人もいるでしょう。
　しかし現在HTMLそのものにこの下線を消す方法はなく、スタイルシートを使うしかありません。ただ、スタイルシートはタグの属性の様に記入して使うことも出来るので、その方法を紹介します。

<A href="index.html" style="text-decoration:none">トップページ</A>
　↓
トップページ

　この様にstyle="text-decoration:none"という記述をすればそのリンクに下線は付きません。ただ下線が無くなると、色以外で他のテキストと見分けが付かなくなるので、太字にしたり括弧で囲むなど目立つ様にする工夫もした方が良いです。わざと分かりづらくするのは別ですが（笑
　このページ全体には上の例とは違った方法でスタイルシートが用いられており、例の部分では一旦消した下線をAタグに入れ子したUタグで付け直しています。マウスポインタを置いた時に色が変わるのもスタイルシートの機能ですが、その方法に付いてはこの場ではとりあえず解説しません。

　ちなみに画像をリンクさせたときの枠線は、IMGタグのborder属性の値を0にしないと消えないので間違わない様にしてください。

≪Index　 ≪Back　 Next≫