a要素
a要素の役割
aとはアンカー(錨=anchor)の略です。
a要素で囲んだテキストや画像をクリックすると、別のHTMLファイルにジャンプさせることができます。
また、a要素で指定した場所に名前をつけ、その場所をジャンプの着地点に指定することができます。
a要素に設定できる属性
属性名 | 意味 |
accesskey | ショートカットキーの設定。accesskey="a"とすれば、「Alt(ブラウザによってはCtrl)+a」でこの要素にフォーカスされる。 |
charset | リンク先のファイルの文字コードを指定する。meta要素でcharsetが指定されていれば、この属性を指定する必要はない。 |
coords | イメージマップの領域の座標。クリッカブルマップを作成するときにshape属性と共に使うが、使えるブラウザが少ないため、クリッカブルマップはarea要素で指定する方がよい。 |
class | クラス名。CSSを適用するときなどに使用する。 |
dir | 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。 |
href | リンク先URLを指定する。 |
hreflang | リンク先の言語コード。日本語、英語といった言語を指定する。リンク先のファイルのhtml要素に記述してあれば必要ない。 |
id | ID名。CSSを適用するときに使用する。 |
lang | 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。 |
name | 名前。アンカーポイントを設定するときに使用。nameよりもidで指定することを推奨されている。 |
rel | この文書から見たリンク先のページの意味を示す。あまり使わない。 |
rev | リンク先から見た、この文書の意味を示す。あまり使わない。 |
shape | イメージマップの領域の形状。クリッカブルマップを表示するときに使う。a要素は、対応するブラウザが少ないため、area要素で使用する。 |
style | スタイルシートを直接記述する。 |
tabindex | Tabキーを押したときに移動する順番。 |
target | リンク先を表示するウィンドウ・フレーム名。 |
title | 補足情報。リンクテキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。 |
type | リンク先のMIMEタイプ。あまり使わない。 |
a要素の使い方
他のページにリンクを貼る
<a href="http://www.yahoo.co.jp/">Yahoo!ジャパン</a>
実際には以下のように表示される。
Yahoo!ジャパンというテキストをクリックすると、Yahoo!ジャパンのサイトにジャンプします。
このように、a要素のhref属性に、飛ばしたいウェブページのURLを記述すると、<a>~</a>タグに囲まれたテキストがリンクテキストとして表示されます。
<a>~</a>タグで画像を囲うと、画像をクリックするとリンク先にジャンプします。
URLの記述方法には、絶対参照と相対参照があります。
同じページの特定の箇所にリンクを貼る
<a name="jump" id="jump">ここにジャンプ</a>
<a href="#jump">ジャンプします</a>
a要素にname属性(id属性)を設定すると、<a>~</a>タグで囲まれた部分を目印とします。
この目印は、href属性で#の後にname属性(id属性)に設定した名前を指定すると、その目印の部分にジャンプさせることができます(その目印のある行がそのページの先頭になります)。
なお、この目印のことをアンカーポイント(錨)と呼びます。
今、このページでは「a要素に設定できる属性」のタイトル部分に、「jump」というアンカーポイントを設定しています。以下のリンクをクリックすると、その部分までジャンプします。
他のページの特定の場所にリンクする
<a href="../index.htm#reference">要素リファレンスに戻る</a>
別のページのアンカーポイントを指定した位置にジャンプすることもできます。
上記のように別の場所のURLを書いた後に、「#アンカーポイント名」とします。
本「HTML」コンテンツの「要素リファレンス」というタイトルテキストに「reference」というアンカーポイントを設定してあります。上記のリンクをクリックすると、その場所までジャンプします。
リンク先を別ウィンドウで開く
<a href="http://www.yahoo.co.jp" target="_blank">Yahoo!ジャパンを別ウィンドウで開く</a>
target属性をa要素に記すと、リンク先を表示する場所を、現在のウィンドウにするか、別のウィンドウを開いて表示するか、同一ウィンドウの別フレームにするか、などを指定することができます。
上記のアンカーテキストをクリックすると、Yahoo!Japanをブラウザの別ウィンドウで開きます。
target属性に使える値
target属性 | 効果 |
_blank | 新しく、フレーム名の設定されていないウィンドウを開く |
_parent | リンク元の親フレームに表示する。フレームがない場合は、「_self」と同じ動作になる。 |
_self | 現在と同じフレームに表示する。 |
_top | フレームを解除して現在のウィンドウ全体に表示する。 |
ウィンドウ名(フレーム名) | 指定した名前と同じ名前が設定されているウィンドウ(フレーム)に表示する。 |
※親フレーム、子フレーム
フレームには親フレームと子フレームがあります。
親フレームとは、ウィンドウ全体のことで、そのウィンドウのうちどことどこをフレームに分割するかを指定しています。子フレームとは、分割された個々のフレームのことです。
target属性とユーザビリティ
a要素のtarget属性を使用するべきか使用しないべきかは、議論の余地があると思いますが、基本的には、target属性は使用するべきではないという論調になっています。
これは、target属性を指定して、別ウィンドウで開くことにしていても、それをユーザ側は想定していないため、いきなり別ウィンドウが開くことで、混乱を招くということが主な理由です。
ユーザビリティの観点から、リンク先を同一ウィンドウに表示するか、別ウィンドウで開くかは、ユーザの判断に任せるべきであって、ウェブサイト側が強制的に行うことはよくないとされています。
ですから、基本的にはリンク先は同一ページに表示するようにしておいて、別ウィンドウで開きたいときには、アンカーテキストの上にマウスカーソルを置いて、「右クリック」→「新しいウィンドウで開く」を指定してもらう、という方針をとるか、target属性を指定するのであれば、リンク先は別ウィンドウで開かれる旨の注意書きをアンカーテキストの近くまたは、title属性などに明記しておくといいでしょう。
ユーザビリティ=SEOでもあるので、補足説明のないtarget属性の使用は、SEOの観点からも推奨されません。
メーラーを起動する
<a href="mailto:メールアドレス">メールを送る</a>
href属性に「 mailto: 」と記し、その後に送信先のメールアドレスを指定すると、そのメールアドレス宛の新規メールの編集画面を開きます。
上記をクリックすると、架空のメールアドレス宛(ここでは上記のソースのとおり、「メールアドレス」になっていますが、実際は、xxx@xxx.xxxという形式になります)のメールの編集画面が立ち上がります。
件名、本文等が入力された状態でメーラーを起動する
<a href="mailto:メールアドレス?subject=件名&cc=メールアドレス&bcc=メールアドレス&body=本文">ないよう月メールを送る</a>
送り先のメールアドレスを指定した後に、「 ? 」を書いてパラメータを指定すると、メールの件名や本文を予め指定した状態で、新規メールの編集画面を開くことができます。
パラメータ同士は「 & 」で区切ります。
パラメータ | 記述する内容 |
bcc | BCCで送信するメールアドレス(半角カンマで複数指定可能) |
body | メールの本文 |
cc | CCで送信するメールアドレス(半角カンマで複数指定可能) |
subject | メールの件名 |
以下のリンクをクリックすると、件名、本文、BCC・CCのメールアドレスが入力された状態で、メールの新規編集画面が立ち上がります。
(文字化けする場合には、UTF8対応のメーラーで確認してください)
なお、本文に改行等の特殊な文字を使用する場合には、以下のように書きます。
目的 | 表記法 |
改行 | %0D%0A |
半角スペース | %20 |
半角クエスチョンマーク | %3F |
メールアドレスの暗号化
mailtoによってメールアドレスを記述することは、ウェブサイトの問い合わせ先などを記すときに使いますが、そのままメールアドレスを入力すると、スパムメールの餌食になってしまいます。
スパムメールを送信する業者は、ウェブサイトに無防備に書かれているメールアドレスなどを収集するプログラムによって集めたメールアドレス宛に大量に広告メール等を送りつけています。
つまり、そのままメールアドレスを入力してしまうのは、望ましくありません。
最もよいのは、画像や全角英文字で記しておいて、ユーザに自分で入力してもらう方法ですが、それだと手間がかかってしまうので、JavaScriptなどで暗号化したものを載せる方法が今のところ一番いいのではないかと思います。
ただし、JavaScriptによる暗号化であっても、暗号を解析するプログラムがあれば、収集されてしまうことになります(今のところわたしの経験では大丈夫なようですが)。
いずれにしても、暗号化と解析はいたちごっこなので、解析されたら別の暗号化の手段を考える、ということで対処するしかないのかもしれません。
→メールアドレスの暗号化におすすめのサイト「メールアドレス収集ロボット対策用アドレス暗号化スクリプト」
応用編
リンクの色分け
<body link="#色" alink="#色" vlink="#色">~</body>
body要素に属性を設定することで、リンクテキストの色を設定することができます。
属性 | 効果 |
alink | マウスボタンをクリックしたときのリンクの色 |
link | リンク先が未訪問の場合の色 |
vlink | リンク先が既訪問の場合の色 |
ただし、body要素にリンクテキストの色を指定するのは、推奨されていません。
リンクテキストの色を指定するには、基本的にCSSを使いましょう。
CSSを使った方がより細かく指定でき、余計な記述をHTMLファイル内から消せます。
→詳しくは「CSS:用途別リファレンス:テキストを修飾する」をご覧ください。
CSSを使ったブロック全体のリンク
<a href="http://www.yahoo.co.jp/" style="display:block;width:200px;height:100px;">Yahoo!Japan</a>
CSSを使ってリンクの範囲を任意の範囲に指定することができます。
a要素に、CSSのdisplayプロパティでblockを指定すると、その要素をブロック要素に変更できます。それから、widthとheightで横幅と高さを明示すれば、指定の範囲にリンク範囲を広げることができます。
上記のリンクテキストは、横幅200px、高さ100pxの範囲にマウスカーソルがのるとリンク先にジャンプします。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-1-31