リンクタグ

リンクタグの基本

テキストにリンクを貼るときは、<a></a>タグでリンクを貼りたい語句を挟み、赤字のURLの部分にそのHTMLファイルから見た相対パスか絶対パスを入力します。

<a href="URL">リンク</a>

例

絶対パスと相対パス

絶対パスとは、ルートディレクトリから見たファイルの位置であり、http://から始まるものがそれにあたる（例えば、グーグル・・・http://www.google.co.jp/）。一方、相対パスとは、そのファイルから見たリンク先ページの位置のことである。
通常、自分のサイト内でのリンクには相対パスを使い、他の人が作ったサイトへリンクを貼るときは絶対パスを使用する。

相対パス

例　[ ]はフォルダを示す

[public_html] --- index.html
　　　　　　　　　├ [image1] ------- a.gif
　　　　　　　　　　　　　　　　　　　　　　　b.gif
　　　　　　　　　├ [folder] -------- main.html
　　　　　　　　　　　　　　　　　　　　　　 main2.html
　　　　　　　　　　　　　　　　　　├--- [image2] -------- f_a.gif

・index.htmlから見たimage1の中のa.gifは、./image1/a.gifとなる
　　（同一階層のフォルダから始まることを示す先頭の./は省略しても良い）

・index.htmlから見たimage2の中のf_a.gifは、./folder/image2/f_a.gifとなる

・folderの中のmain.htmlから見たindex.htmlは、../index.htmlとなる
　　（一つ階層をさかのぼるときは、ドットを2つ続けて../、2つ上の階層は../../となる）

・folderの中のmain2.htmlから見たimage1の中のb.gifは../image1/b.gifとなる

画像のリンク

基本的にテキストのリンクと同じで、<a></a>タグで<img>タグを挟むだけだが、border属性を0にしておかないと、画像にリンク画像であることを示す青い枠が表示されてしまうので気を付けましょう。

<a href="../index.html" name="top"><img src="../img/title01.gif" alt="ウェブ　ライズ" width="155" height="45" border="0"></a>

例

リンク先の開き方

クリックしたときに、リンク先のページをどのように開くか指定することが出来ます。_self（クリックしたウィンドウで開く）、_blank（別ウィンドウで開く）、_parent（親フレームで開く）、_top（フレームの分割表示を廃止し、ウィンドウ一面で開く）、ウィンドウ名（指定したウィンドウ名で開く）がありますが、このウィンドウの開き方を赤字のtarget属性に入力することで、リンク先の開き方を指定することが可能となります。
通常、_selfと_blankを使いますが、、targetを入力しないと_selfと同じ指定となるので、_selfは入力しなくて大丈夫です。また、他のサイトを開くときは_blankを使用し、自分のサイトと区別化します。

<a href="../inde.html target="_self">このウィンドウで開く</a>
<a href="http://www.yahoo.co.jp/" target="_blank">別ウィンドウで開く</a>

例

このウィンドウで開く
別ウィンドウで開く

テキストリンクの色変更

テキストリンクの色は指定しないと、通常は青色でクリックすると紫に変化します。この色は変更可能で、<body>タグに指定する方法とcssの二通りがあります。linkはクリックする前のテキストリンクの色、vlinkは一度でもクリックした後の色、alinkはクリックした直後の色（リンク先のページが読み込まれるまで表示される色）です。
色（カラーコード）は、カラーチャートを見て、それぞれ希望の色に変更してください。

<body>タグに指定する場合

<body link="#0000FF" vlink="#3300FF" alink="#FF6600">

cssで指定する場合は、alinkがクリックする前の色、a:visitedが一度でもクリックした後の色、a:hoverがロールオーバー時の色、a:activeがクリックした直後の色です。
この下記のタグを希望のカラーコードに変更し、<head></head>タグの間に貼り付けることによって、cssでテキストリンクの色を変更できます。

cssで指定する場合

<style type="text/css">

</style>

ページ内リンク

同じページのある場所に移動したいときに使用するのが、ページ内リンクです。例えば、このページの下のほうにある▲トップへ戻るがこれにあたります。
戻りたい場所に<a>タグのname属性を使用し任意の名前を入力しますが、これはブラウザ上では表示されません。そして、リンクとして使用する方には、href属性で、#に先ほどつけたname属性の名前を入力します。リンク元、リンク先ともにテキストだけではなく、画像を使用することも可能です。

<a name="top">トップ</a>

<a href="#top">▲トップへ戻る</a>

例

▲トップへ戻る

他のページの特定の場所にリンクする

基本的に、上記のページ内リンクと同じです。ただ違うのは、href属性にそのページへの相対パスが必要ということです。

<a name="top">トップ</a>

<a href="html.html#top">▲トップへ戻る</a>

例

▲HTML タグページのトップへ戻る

メールソフトの起動

リンクにメールソフトを起動するように設定し、クリックするとメーラーが立ち上がるようにすることが出来ます。下記の赤字のところに、送信先のメールアドレスを入力してください。
また、メールアドレスの最後に?を入力して件名や本文を入力しておくことが可能です。件名がsubjectで、内容がbodyですが、この二つを入力する場合は、あいだを&で区切ってください。
この設定もテキスト部分を<img src="画像へのパス">にすることによって、画像を使ってメールソフトを起動させることが出来ます。

メーラーを起動する
<a href="mailto:info@XXXX.com">メール</a>

起動したメーラーに件名と本文を入力しておく
<a href="mailto:info@XXXX.com?subject=件名&body=内容">メール</a>

テキストにツールチップを表示する

画像と同様、テキストリンクにもロールオーバーした時に、ツールチップを表示させることが出来ます。<a>にタグにtitle属性を使用し、赤字の部分にツールチップに表示させたい文字列を入力します。

<a href="http://www.google.co.jp/" title="グーグル">

例

ロールオーバーするとグーグルと表示されます