シェアする
Creating Hyperlinks - Japanese Only
みなさまどうも。いかがお過ごしでしょうか。
続きまして『ハイパーリンク』について勉強していきましょう。
ネットサーフィンしてるときやエッチな画像を探していたりするときに他のページへの遷移部分があるかと思います。試しに以下の部分をクリックしてみてください。
ページが遷移されましたね、これが『ハイパーリンク』と呼ばれる機能です。一般に『リンク』と略されて呼ばれていますね。
『ハイパーリンク』を実装するには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』です。
これは新規のウィンドウ(最近のブラウザでは新規のタブ)で遷移先ページを表示することができます。試しに以下のリンクをクリックしてみてください。
いかがでしょうか。新しいタブとかウィンドウでページが表示されたかと思います。では記述方法について確認していきましょう。以下のように記述します。
<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タグの使い方は以上となります。続いては『絶対パス』と『相対パス』の使い分けについてとその他のパスの記述方法について解説していきたいと思います。
引き続き頑張っていきましょう。ではでは～
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
