ハイパーリンク「a要素」
HTMLファイルでは、他のHTMLファイルなどへジャンプする、ハイパーリンクがあります。
HTMLで他のHTMLファイルなどへ移動する機能を加えるには、「a要素」を使用します。
<a>と</a>で囲った範囲に他のファイルへ移動する機能を加えることができます。
ハイパーリンクは、通常「リンク」と呼ばれ、様々なウェブサイトで使用されているのでなじみがある方も多いでしょう。
お互いのホームページへリンクを張ることを相互リンクなどと呼んだり、よくつかわれてる言葉であり、そして機能でもあります。
ちなみに、「a要素」の「a」はAnchorの略で、船の錨(いかり)や、据え付ける、といった意味があります。
移動先を示す「href属性」
「a要素」だけでは、どこに移動すればよいのかわかりません。
移動先を示すには、「href属性」を使って指定します。
この「href属性」は「a要素」に必ず指定する必要があります。
「href属性」に指定する移動先の場所の指定の仕方は、URLで指定します。
「http://」から始まる絶対パスでも、そのhtmlファイルがある場所を中心に指定する相対パスでもどちらでも構いません。
たとえば、「http://blog.thinkreatesoft.net/」へ移動するリンクを張る場合、
<a href="http://blog.thinkreatesoft.net/">
と記述します。
また、メールアドレスを指定することもできます。この場合、ブラウザではなくメールソフトが立ち上がります。
ただし、メールアドレスを指定することはお勧めしません。スパムメールが大量に送られてくることになるからです。
同一HTMLファイルの指定した場所へ移動する方法
「href属性」はHTMLファイルの指定した場所へ移動することができます。
目次などを作り、その記事にジャンプさせるような使い方ができます。
そのやり方は、「div要素」や「p要素」「h1要素」などほとんどの要素には「id属性」があり、「id属性」にID指定し、
<a href="#指定したID">と指定することで、そのIDがある位置まで移動することができるようになります。
たとえば、「div要素」に「id属性」として"div-element"を指定し、そこに移動するリンクを張る場合、以下のように記述します。
<div id="div-element">
<a href="#div-element">
また、ページの先頭に移動するには<a href="#top">とすれば、ページの先頭まで移動します。
リンク先の表示方法を指定する「target属性」
リンク先を訪問したとき、今表示しているウィンドウから移動する、新規ウィンドウもしくはタブが作られて移動する
２つの移動の仕方を経験したことがありませんか？
移動先のブラウザを今表示しているブラウザか、新規ウィンドウ・タブかを指定するには「target属性」を使います。
「target属性」に指定できる値は４つありますが、HTML５ではフレームが廃止されたため、
新規ウィンドウ・タブで表示する"_blank"、
現在のブラウザで表示する"_self"を覚えてを覚えておくといいでしょう。
なお、「target属性」を省略した場合は"_self"が指定されたものとして、移動先を表示します。
残り二つの値は"_parent"と"_top"ですが、
この二つの値の意味は"_parent"は親フレームに表示、"_top"はフレームを解除して表示という意味になります。
なお、当サイトではフレームに関しては触れる予定はありません。
サンプル
今回説明した、「a要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
また、当サイトのスタイルシートの関係上、リンク上にマウスを置くと、文字の色が赤くなるようになっています。(本来は赤くなりません)
サンプルソースコード
<a href="http://blog.thinkreatesoft.net/">Think & Create ホームへ</a><br> <a href="http://blog.thinkreatesoft.net/" target="_blank">Think & Create ホームを新規ウィンドウで表示</a><br> <a href="#a-element">「a要素」の説明へ</a>(「h2要素」にidを指定しています)<br> <a href="#top">ページの先頭へ</a><br> 画像をクリックすると大きく表示されます<br> <a href="http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png"> <img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="50"width="50" style="border:thick none red;"><br> </a><br>
表示結果
Think & Create ホームを新規ウィンドウで表示
「a要素」の説明へ(「h2要素」にidを指定しています)
ページの先頭へ
画像をクリックすると大きく表示されます
「a要素」のまとめと次回記事について
今回説明した「a要素」はいかがでしたでしょうか。
「a要素」はHTMLとHTMLをつなげる役目をする必須な要素ではないでしょうか？
次回は、今まで「style属性」で指定してきたスタイル情報をひとまとめにできる、スタイル情報「style要素」の説明をします。
以上、当サイト管理人のAsterismでした。