HTMLのリンクタグ
今回は、HTMLのリンクタグについての解説です。
この記事で説明するHTMLのリンクタグのおかげで、今日のインターネット網が存在しています。
ホームページを作成する上で、HTMLのリンクタグを理解することは、めちゃくちゃ重要です。
HTMLのリンクタグは、今表示させているウェブページから、別のウェブページへの誘導だけでなく、同じWebページ内の別の位置にジャンプさせることもできます。
このような、同じウェブページの別の位置にジャンプさせるリンクのことを、ページ内リンクといいます。
１ページが大きなウェブページで、ページ内リンクが使用されていなければ、サイト訪問者は、目的の部分まで、ひたすら自分でスクロールしなくてはいけなくなり、時間がかかって不便です。
さらにリンクタグでリンクできるのはウェブページだけではありません。
あなたが通常使用しているメールアドレスにもリンクをはることができます。
この場合は、サイト訪問者が簡単にメールを送信できるようになります。
このようにHTMLのリンクタグを使いこなすといろいろと便利です。
このリンクタグは、ウェブページを作成する基本中の基本なのですが、絶対パスや相対パスといったことを、ある程度理解している必要があるので、まずはそこから学習していきましょう！
絶対パスと相対パス
Perl/CGIを設置するとき意外でも、普通にHTMLでホームページを作成するときなどにも登場するのが、絶対パスと相対パスという用語です。
ほかにも、仮想パスという用語もありますが、あまり登場しないので、今回はパスなだけにパスします（笑）。
これらの用語は「パス」という言葉からもわかるように、HTMLやCGIなど、目的のファイルの場所(ファイルまでの道すじ)を表すものです。
CGIの設置マニュアルなどには、「絶対パスで指定してください」などと書かれている場合があります。
CGI以外でも、ホームページを作る際、リンク部分のタグを書く際、このような用語が出てきます。
今のホームページ作成ソフトなどでは、出てこないかもしれませんが、ホームページやCGI設置をする上で、とても大切な考え方なので、今回の記事で一番最初に説明しておきます。
インターネットで、あるホームページを開いていて、別のページに移動しようと思ったときに別のページまでの道すじを表現するためのパスの書き方には、大きく分けて二種類の方法があり、その二種類が、絶対パスと相対パスなんです。
絶対パスとは、大本の部分から目的のファイルやフォルダの位置を表現するパスの指定方法のことです。
大本の部分から順に表現されているので、奥まった部分にあるファイルを指定するときなどは、どうしてもパスが長くなってしまいます。
書き方の例としては、下記のようなものがあります。
例１： http://www.xxx.com/xxx/xxx.html
例２： /xxx/xxx.html
例２では、ホームページ作成者が、インターネットサーバー内で参照することのできる一番もとのフォルダから指定していると考えてください。
それに比べて相対パスとは、自分の今いる位置を基準にして、目的のファイルやフォルダを指定します。
ですから、自分と相手の位置関係が近ければ、パスは短くなりますし、遠ければ、長くなってしまいます。
例１： ../../xxx/xxx.html
例２： ./xxx/xxx.html
これらの用語に初めて触れる方にはわかりにくいかもしれませんが、重要なのでホームページのリンクなどで実際に試してくださいね。
それでも全然わからないという方のために、もっと感覚的に説明します。
感覚的にでも理解しておけば、後に学習したときの吸収が早いです。
では想像の世界へ（笑）。
あなたは小学５年生の子どもを持った親だとします。
今日は授業参観なので、保護者であるあなたは学校に行きました。
しかし、小学校は思ったより広かったので、あなたは道に迷ってしまいました。
あなたが３階でうろうろしていたら、人が通りかかったので、あなたは、５年生の教室までの道を聞くことにしました。
(５年生の教室は、５階という設定です。)
そのときに…
「５年生の教室は、この２階上ですよ。」
という道の教え方で道を教えられた場合、それは相対パス的な教え方をされたことになります。
いまあなたがいる場所を基準として、目的地を示していますよね。
もしあなたが、３階ではなく、２階で道を聞いた場合は、教えられ方も変わりますよね。
そうではなく…
「５年生の教室は、５階ですよ。」
という道の教え方をされた場合、これは絶対パス的な教え方をされたことになります。
この教え方であれば、あなたがどこの階にいても、同じ教えられ方になります。
ちょっとわかりにくかったでしょうか？
絶対パス、相対パス、それぞれよい部分があるので、上手に使い分けると便利です。
絶対パスと相対パスを感覚的に説明すると以上です。
具体的には後述します。
HTMLでリンク作成
ホームページ作成でリンクを設定するには、aタグを使います。
aタグに囲まれた内容が、リンク部分になります。
例えば、以下のように記述します。
<a href="index.html">リンク</a>
href=""の「"」と「"」との間に、リンク先ページのファイル名を指定します。
ファイル名の指定方法は、絶対パスまたは、相対パスが使用可能です。
よくわからない場合は、URLで指定するとよいでしょう。
<a href="https://kimurashuuichi.com/index.html">リンク</a>
このように指定した方が確実ですね。
<戻る>
HTMLのパス指定方法
ここでは、ホームページ作成時に使用するHTMLの相対パスの使用例をいくつか説明します。
1. 同じレベル内でのリンク
同じフォルダ内で、違うファイルにリンクするときは、ファイル名のみを指定するか、ファイル名の前に「./」をつけます。
例えば…
https://kimurashuuichi.com/index.html
から
https://kimurashuuichi.com/index2.html
に相対パスでリンクをはる場合は、以下のように記述します。
<a href="index2.html">リンク</a>
<a href="./index2.html">リンク</a>
どちらでもOKです。
2. 下の階層へリンク
下の階層（奥まったフォルダ内のファイル）にリンクするときは、それぞれのフォルダ名またはファイル名とのあいだに、「/」をつけます。
例えば、
https://kimurashuuichi.com/index.html
から、
https://kimurashuuichi.com/sample/cgi/index.html
に相対パスでリンクをはる場合は、以下のように記述します。
<a href="sample/cgi/index.html">リンク</a>
<a href="./sample/cgi/index.html">リンク</a>
どちらでもOKです。
3. 上の階層へリンク
上の階層（親のフォルダ）のファイルにリンクする場合は、上位に上がるフォルダの分だけ「../」をつけます。
../とは、フォルダを一つ上がるという命令です。
例えば、
https://kimurashuuichi.com/sample/cgi/index.html
から、
https://kimurashuuichi.com/index.html
にリンクをはる場合は、以下のように記述します。
<a href="../../index.html">リンク</a>
相対パスでリンクをはるには、このように記述します。
4. 別のフォルダへリンク
別のフォルダ内のファイルにリンクするときは、「../」で一度共通の派生元まで戻って、そこから新たにフォルダ名とファイル名を指定します。
例えば、
https://kimurashuuichi.com/sample/cgi/index.html
から、
https://kimurashuuichi.com/lineup/index.html
にリンクをはる場合は、以下のように記述します。
<a href="../../lineup/index.html">リンク</a>
相対パスでリンクをはるには、このように記述します。
上記の例では、「cgi」フォルダと、「lineup」フォルダの共通の派生元が「https://kimurashuuichi.com/」という大本の部分しかありません。
したがって、「../」を２回使って、フォルダを２階層上がって、再び、１階層フォルダを下がっています。
相対パスは理解するまではややこしいので、よくわからない場合は、URLで直接指定した方がぶなんです。
<戻る>
相対パスの基準指定
HTMLのbaseタグで、相対パスの基準となる位置を指定することができます。
基準の位置は、絶対パスで指定します。
このタグはHTMLファイルのheadタグに囲まれた部分へ記述します。
リンク先のウェブページを相対パスで指定する場合、通常はリンク元のウェブページが相対パスの基準位置になります。
baseタグは、その基準となる位置を変更できます。
フォルダとファイル名の位置関係がよくわからなくなる場合は、baseタグを使用して、基準を一箇所にまとめておくと便利です。
<html>
<head>
<title>サンプル</title>
<base href="https://kimurashuuichi.com/">
</head>
<body>
…
</body>
</html>
baseタグには、target属性を指定することもできます。
<base href="https://kimurashuuichi.com/" target="_blank">
target属性については後述します。
画像リンク作成
前述した方法では、テキストリンクになってしまいますが、リンク部分の文字を画像にすることもできます。
<a href="index.html">
<img src="index.gif" alt="リンク">
</a>
上記の例のように、画像（imgタグ）をaタグで囲むとその画像がリンクボタンになります。
index.gifは、GIF画像ファイル名です。
リンクタグと同じように、画像ファイルまでのパスは、絶対パスまたは、相対パスを使用します。
画像をリンクボタンに指定した場合、一般的なブラウザでは画像の枠に線が入ってしまいます。
この枠線を消したい場合には、以下のように記述します。
<a href="index.html">
<img src="index.gif" alt="リンク" border="0">
</a>
imgタグ内に、border=""を追加して、枠線の太さを「0」に指定しています。
ウェブページに画像を貼り付けるイメージタグについては、また別の機会に説明します。
<戻る>
リンクウィンドウの指定
ホームページ作成時に使用するHTMLのaタグに、target=""を追加すると、リンク先のページを、どのウィンドウ（フレーム）で表示するのかを指定できます。
例えば、以下のように記述します。
<a href="index.html" target="_top">リンク</a>
このtarget=""の指定は、新たにブラウザを立ち上げて、ウェブページを表示させる場合や、フレームタグを使って画面を分割している場合などに使用します。
target=""で指定している「_top」以外には、以下のようなものがあるので、あなたのウェブサイトの構造にあわせて使い分けてください。
「_blank」の場合は、新たにブラウザを立ち上げてウェブページを表示します。
「_top」の場合は、フレームの分割を廃止して、画面全体でウェブページを表示します。
「_self」の場合は、リンク元と同じウィンドウ（フレーム）に、ウェブページを表示します（通常はこのタイプです）。
「_parent」の場合は、親フレームに、ウェブページを表示します。
ウィンドウ名（フレーム名）の場合は、任意のウィンドウ（フレーム）に、ウェブページを表示します。
注意すべき点は、「target="_blank"」が指定されたリンクでは、ユーザーの環境によってはポップアップブロックが機能してしまい、リンク先が表示できなくなる場合があるという点です。
<戻る>
ページ内リンク
HTMLタグのリンクタグは、あるページから別のウェブページに移動できるだけでなく、ページ内リンクという方法を使用すると、同じページの中でも移動させることができます。
このWebページでも、１ページ当たりの説明が長くなってしまっているので、上部に目次としてページ内リンクを配置しています。
もくじのページ内リンクをクリックすると、あらかじめ対応させておいた項目にジャンプします。
つまり、訪問者側で、わざわざページをスクロールして目的の項目を探すという手間をなくしているわけです。
これはサイト訪問者に対してのナビゲーション的な役割をはたします。
それでは、HTMLタグのページ内リンクについて説明します。
aタグに下記のような指定を行うと、ページ内のリンク移動が可能になります。
まずはリンク元には以下のように記述します。
<a href="#abc">ABCの場所へジャンプ</a>
そしてリンク先には以下のように記述します。
<a name="abc">ここへジャンプしてきます。</a>
リンク先のname=""には、任意の名前（識別名）を指定します。
上記の例の場合は「abc」になります。
識別名には、アルファベットで始まる半角英数字（一部の記号も使用可）で好きな名前を指定できます。
識別名に使用できる記号は、ハイフン（-）、アンダーバー（_）、コロン（:）、ピリオド（.）の4つです。
リンク元のhref=""には、シャープ（#）に続けて、name=""で使用した名前を指定します。
上記の例では、abcという名前が、リンク元とリンク先を結びつけることになります。
1ページ中に複数のリンク設定を行う場合には、この名前が重複しないように注意が必要です。
上記の例では、同じページでの例ですが、少し応用すると、違うページでも特定の場所を指定してリンクさせることができます。
例えば、index.htmlから、index2.htmlの指定した場所にリンクをはる場合は以下のように記述します。
まずは、リンク元のindex.htmlには…
<a href="index2.html#abc">ABCの場所へジャンプ</a>
リンク先のindex2.htmlページの中で、ジャンプさせたい部分には…
<a name="abc">ここへジャンプしてきます。</a>
このように記述すると、別のページでも特定の場所に飛ばすことができます。
<戻る>
メール送信リンク
リンクのクリックで、メールソフトを起動させて、サイト訪問者にメール送信を促すことができます。
HTMLのaタグにこの指定を行うと、リンクをクリックしたときにメールソフトが立ち上がるようになります。
メールの宛先欄には、指定したメールアドレスが既に入力済みの状態となります。
<a href="mailto:xxx@xxx.com">メールはこちらへ</a>
「mailto:」に続けて送信先メールアドレスを記述します。
さらに、もう一工夫することで、予め件名や本文を挿入しておくこともできます。
<a href="mailto:xxx@xxx.com?subject=お問い合わせ&body=ご記入ください">メールはこちらへ</a>
「mailto:」に続けて送信先メールアドレスを記述します。
その後に「?」を入れ、続いて以下の内容を記述します。
件名を挿入する場合は…
subject=ここに件名を記述
本文を挿入する場合は…
body=ここに本文を記述
両方挿入する場合は「&」で区切って記述します。
ただし、ユーザーの環境によっては、日本語の部分（件名や本文）が文字化けする場合があります。
文字化け対策としては、メール送信用にエンコードしておくという手がありますが、あまりおすすめはできません。
さらに、ウェブサイトにメール送信リンクなどでメールアドレスを掲載していると、不正なメールアドレス収集プログラムによって、あなたのメールアドレスが収集されてしまう恐れがあります。
SEO対策リンク
最後に、SEO（検索エンジン上位表示対策）のためのリンク作成方法についてお話します。
HTMLのaタグに、title=""でリンク先のタイトルを指定することで、検索エンジンにリンク先のウェブページの内容を伝えることができます。
<a href="http://www.google.co.jp/" title="検索エンジンGoogle">リンク</a>
検索エンジンのアルゴリズムは日々進化しているので、この方法が有効であるかどうかはわかりませんが、コンピューターにリンク先の内容を伝えるという意味では間違いではないと思います。
興味のある方は、ぜひ使ってみてください。
<戻る>