Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - ハイパーリンクを作ってみよう

ハイパーリンクを作ってみよう

みなさまどうも。いかがお過ごしでしょうか。

続きまして『ハイパーリンク』について勉強していきましょう。

ネットサーフィンしてるときやエッチな画像を探していたりするときに他のページへの遷移部分があるかと思います。試しに以下の部分をクリックしてみてください。

http://www.google.co.jp/

ページが遷移されましたね、これが『ハイパーリンク』と呼ばれる機能です。一般に『リンク』と略されて呼ばれていますね。

『ハイパーリンク』を実装するにはaタグというものを使います。以下にサンプルソースを用意したので確認してみましょう。

<a href="ここにパスを記述">リンクを設定するテキストなど</a>

ではこのaタグについて解説していきます。

まずaタグは空要素タグではないので閉じタグが必要です。閉じタグの書き忘れに注意です。

そして開始タグと閉じタグの間にテキストなどを記述します。その部分がリンクとなります。上記の場合では「リンクを設定するテキストなど」の部分がリンクとなりますね。

aタグは画像などもリンクとして設定することができます。以下のサンプルソースをみてください。

<a href="ここにパスを記述"><img alt="" src="sample.jpg"></a>

このようにするとsample.jpgという画像に対してリンクを設定することができます。

そしてaタグに何か属性がついていますね。これは『href属性』といい、この値にリンク先のパスを記述します。『href』の読み方は『エイチレフ』が一般的な気がします。ちょっと話が脱線しちゃいますが、なんとこの『href』は長年使われている属性にも関わらず何の略であるのかはっきりしていないらしいです。ちょっと不思議ですね。『hypertext reference』の略なのでは、という推測が今のところ最有力らしいです。

では話を戻します。この『href属性』の値に記述するパスは『絶対パス』と『相対パス』、どちらを使ってもOKですのでまずは『絶対パス』(URL)でちょっと記述してみます。googleさんのページに遷移させたい場合は以下のようになります。

<a href="http://google.co.jp/"><img alt="" src="sample.jpg"></a>

続いて相対パスで記述してみましょう。同じ階層のindex.htmlに遷移させたい場合は以下のようになりますね。『./』は省略していますので注意です。

<a href="index.html"><img alt="" src="sample.jpg"></a>

HTMLファイルがウェブサーバーに上がってる状態で、かつファイル名の指定がなかったときは『index.html』のデータを送信する、という設定がサーバー側にされていた場合は『相対パス』でも『URL』と同じように『index.html』を省略することができます。

ということは『./』と記述すると同じ階層の『index.html』を指定したことになります。以下のサンプルを参照してみてください。

<a href="./"><img alt="" src="sample.jpg"></a>

ちょっと不思議な感じがしますがこれでも問題なく動きます。こんな感じで『index.html』は省略されて記述されることが多いので覚えておきましょう。

aタグの基本的な使い方は以上となります。続いてaタグで良く使用する『target属性』について解説していきます。

aタグには『target属性』がつけられます。『target属性』でよく使用する値は『_blank』です。

これは新規のウィンドウ(最近のブラウザでは新規のタブ)で遷移先ページを表示することができます。試しに以下のリンクをクリックしてみてください。

http://www.google.co.jp/

いかがでしょうか。新しいタブとかウィンドウでページが表示されたかと思います。では記述方法について確認していきましょう。以下のように記述します。

<a href="http://google.co.jp/" target="_blank">ここをクリック</a>

href属性とともに半角スペースを空けて『target="_blank"』と記述するだけです。

その他『target属性』で取れる値は『_self』や『_top』、『_parent』があります。

『_self』については現在のウィンドウに表示するという指定になりますが、aタグのデフォルトの挙動(『target属性』を記述していない状態)が『_self』と同様の挙動になっています。なので『_self』をわざわざ指定する必要はあまりありません。

『_top』と『_parent』については主にフレームを分割した場合に使用される値となりますが、使用される機会は少なめです。iframe要素を使用する必要があるため当記事では細かい解説を割愛します。『target属性』で使用する値はほぼ『_blank』となっていますので『_blank』の使い方だけマスターしちゃいましょう。

HTML4.01ではaタグに『name属性』をつけてページ内リンクを実装していましたが、HTML5ではaタグのname属性は廃止されていますのでご注意下さい。

HTML5で同様の機能を作成する場合はid属性を使用します。

aタグの使い方は以上となります。続いては『絶対パス』と『相対パス』の使い分けについてとその他のパスの記述方法について解説していきたいと思います。

引き続き頑張っていきましょう。ではでは～

この記事は桜舞が執筆致しました。