参照の定義はHTMLでa要素を使用して行われます。その使用法をお示しする前に、ハイパーリンクに関する一般的なヒントをいくつか紹介します。是非、質の良い参照テキストを考えてください。ありふれた「戻る」という表現では通常誰にも役に立ちません。(外部サイトから訪れる場合、通常「戻る」とは何を指すのかがわかりません)、説明的な参照テキストを選ぶようにしてください。
HTMLにおいて、ハイパーリンクは常に同じ原則に従います。
<a href="videos.html">最新ビデオ</a>
a要素にhref属性が割り当てられます。このhref属性には、参照先となる値が期待されます。前の例では、ファイルvideos.htmlが参照されました。これは、ハイパーリンクが定義されたHTMLファイルと同じディレクトリにあります。
ハイパーリンクの定義には、画像の埋め込みと同様のルールが適用されます。
実際、プロジェクト内の参照だけでなく、ハイパーリンクを外部ファイルやドメインにも設定できます。
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
<a>と</a>の間にあるテキストは、最終的に参照テキストとなります。通常、このテキストはブラウザによってアンダーライン付きで表示されます。
目標ウィンドウを指定する
ハイパーリンクをクリックすると、参照先は現在のブラウザウィンドウで開かれます。通常、これは完全に問題ありません。ただし、外部ドメインへの参照を設定した場合、訪問者がこのリンクをクリックすると参照先を新しいブラウザウィンドウまたはタブで開くようにしたい場合があります。この方法の利点は、Webサイトがバックグラウンドで開いたままになることです。
ただし、ページのすべてのハイパーリンクを外部ウィンドウで開くべきではありません。訪問者はすぐにイライラするでしょう。
a要素のtarget属性を使用すると、開くべきウィンドウを指定できます。HTMLでは、まずtargetに対して3つの標準値が提供されます。
• _blank – 参照先を新しいブラウザウィンドウに表示します。
• _self – 現在のブラウザウィンドウで参照先を開きます。
• _parent – フレームから抜け出すことができます。(HTML5ではフレームはサポートされていませんが、これを使用するべきではありません。現在はこれに代わるより優れた代替方法があります。フレームに関心がある方は、http://de.wikipedia.org/wiki/Frame_(HTML)で詳細情報を見ることができます)。
• _top – これもフレームに関連して使用されます。これを使用すると、フレームセットの外側に参照先を開くことができます。
target属性を使用する方法の例を以下に示します:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
この場合、参照先http://www.psd-tutorials.deは新しいウィンドウ/タブで開かれます。ちなみに、予約された名前_blankの代わりにhalligalliのような架空の名前を使用すると、同じ効果が得られます。ただし、targetを使用する場合は、予約された名前を使用することをお勧めします。
参照基準を決定する
HTMLファイルのhead部分に参照基準を定義することができます。このような参照基準は、特定のブラウザウィンドウですべての参照先を表示するようにします。これは、再びフレームと関連して主に有用です。
ただし、リンクをすべて新しいブラウザウィンドウで表示したい場合にも便利です。リンクリストを想像してみてください。その参照先は常に新しいウィンドウで開かれるようにしたい場合、以下のようになります:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
したがって、各a定義にtarget属性を割り当てる必要があります。
見るように、これはあまり効率的ではありません。さらに、数か月後に参照先を新しいウィンドウで開かないようにすることに決定した場合は、ますます効率的ではありません。そのような場合は、先述の参照ウィンドウ基準を使用することで対処できます。これはhead内のbase要素を使用して定義されます。base要素には、所望の値をtarget属性に割り当てます。以下に、その見本を示します:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
タイピングの手間を省くことができます。
アンカーを定義する
他のファイルへのハイパーリンクを設定する方法はすでにお見せしました。ただし、HTMLファイル内にもアンカーを定義することができます。その後、それらのアンカーへの参照を設定できます。これは特に大規模なページに便利です。文書の最初に目次を定義し、訪問者がブラウザウィンドウをスクロールすることなく、自分に関連する場所にジャンプできるようにすることができます。
アンカーはa要素で生成されます。ただし、アンカー定義にはhref属性ではなくname属性が割り当てられます。
<a name="seitenanfang">目次</a> <a name="kapitel1">1章の目次</a> <p>ここにはたくさんのテキストが続きます。</p> <a name="kapitel2">2章の目次</a> <p>ここにはたくさんのテキストが続きます。</p>
アンカー名は自由に設定できます。ただし、可能な限り短く、小文字のみを使用し、特殊文字を使用しないことをお勧めします。
アンカーを参照するには、このチュートリアルの最初に示されたように通常のハイパーリンクを定義します。
<a href="#seitenanfang">ページの先頭へ</a>
href属性にはアンカー名が値として割り当てられます。ここで重要なのは、アンカー名の前にはハッシュ記号が付くことです。
なお、ファイルをまたいでアンカーにリンクすることもできます。次の例では、実際のHTMLファイルと同じディレクトリに存在するnews.htmというファイルがあると仮定しています。このnews.htm内でアンカーseitenanfangが定義されています。このアンカーを参照するには、対象ファイル名(news.htm)の後ろにハッシュ記号を追加します。そして、その後にアンカー名を続けます。
<a href="news.htm#seitenanfang">ページの先頭へ</a>
したがって、任意のファイルでアンカーへのリンクを簡単に設定できます。
