形式 | <a href="...">〜</a> <a name="...">〜</a> |
---|---|
サポート | H2〜H4s〜 / e2〜 / N2〜 / i1 |
タグの省略 | 開始タグ:必須、終了タグ:必須 |
包含可能要素 | インライン要素(a を除く) |
a はアンカー(Anchor)の略です。
<a href="...">〜</a> の形式は、指定したページにジャンプしたり、指定したメールアドレスに対するメールソフトを起動したりする目的で使用されます。
<a name="...">〜</a> の形式は、ページの中の指定した個所にジャンプするための目印となる名前を設定します。詳細は後述。
属性 | 意味 |
---|---|
href=url | H2-H4s/e2/N2/i1。リンクをクリックした時のジャンプのアドレス(URL)を指定します。他にも、mailto: による電子メールの送信先指定も可能です。 |
name=name | H2-H4s/e2/N2/i1。<a name="XXX">〜</a> で囲んだ部分に XXX という名前を指定します。後述の「名前付け」を参照してください。 |
target=target | e3/N2。表示ターゲットを指定します。 |
属性 | 意味 |
---|---|
accesskey=key | H4s/e4/N6/i1。例えば accesskey=X としておくと、キーボードで ALT キーを押しながら X キーを押したとき、このリンクにフォーカスが移動します。(IE4.0 ではリンククリック、IE5.0 ではリンクにフォーカス移動となります。) |
tabindex=n | H4s/e4/N6。タブインデックスを指定します。 |
属性 | 意味 |
---|---|
charset=charset | H4s。リンク先文書のキャラクタセット(euc-jp や Shift_JIS など)を指定します。 |
hreflang=hreflang | H4s。リンク先文書の言語(ja など)を指定します。 |
methods=methods | H2。リンク先のオブジェクトが持つ機能についての情報を記述しますが、あまり使用されていません。HTML2.0 では定義されていましたが、HTML3.2 で削除されました。 |
rel=rel | H2-H4s。この文書から見たリンク先の文書との関係を記述します。rel には next, previous, parent などを指定します。あまり使用されていません。 |
rev=rev | H2-H4s。リンク先の文書から見たこの文書との関係を記述します。rev には next, previous, parent などを指定します。あまり使用されていません。 |
type=type | H4s。リンク先文書の MIMEタイプ(text/htmlなど)を指定します。 |
urn=urn | H2。ほとんど使用されていません。HTML3.2 では削除されました。 |
属性 | 意味 |
---|---|
datafld=datafld | e4。データバインド機能を用いる際の、データソースの列名を指定します。 |
datasrc=datasrc | e4。データバインド機能を用いる際の、データソースの ID を指定します。 |
属性 | 意味 |
---|---|
coords=coords | H4s。クライアントサイドイメージマップの座標を指定します。<area> を参照してください。 |
shape=shape | H4s。クライアントサイドイメージマップの形を指定します。<area> を参照してください。 |
属性 | 意味 |
---|---|
class=class | H4s/e3/N4。クラスを指定します。 |
dir=dir | H4s/e5/N6。文字の表示方向を指定します。 |
id=id | H4s/e3/N4。ID を指定します。 |
lang=lang | H4s/e4/N6。言語を指定します。 |
style=style | H4s/e3/N4。スタイルシートを指定します。 |
title=title | H2-H4s/e2/N6。タイトルを指定します。 |
IE拡張属性 | 他にもIEで拡張された属性が指定可能です。 |
HTMLソース |
---|
<a href="http://xx.yy.zz/index.htm">リンク先にジャンプ</a> <a href="index.htm">同フォルダの別ファイルにジャンプ</a> <a href="../xxx/index.htm">別フォルダの別ファイルにジャンプ</a> <a href="index.htm#XYZ">リンク先の特定位置にジャンプ</a> <a href="#XYZ">同じファイル内の特定位置にジャンプ</a> <a href="mailto:xyz@xxx.or.jp">メールアドレスにメール送信</a> <a href="ftp://xx.yy.zz/XYZ.LZH">FTPを用いたダウンロード</a> <a name="XYZ">この文章に"XYZ"という名前をつけます</a> |
<a href="...">の形式は、リンクを表示するのに用います。
<a href="http://www.yyy.zzz/xxx/yyy/zzz.html">ZZZ</a>
ファイルが同じサーバにある時は、http://〜 を省略することができます。
<a href="/xxx/yyy/zzz.html">ZZZ</a>
ファイルが同じフォルダにある時は、/xxx/yyy/ の部分も省略することができます。
<a href="zzz.html">ZZZ</a>
ファイルがひとつ上のフォルダにある場合は、「ひとつ上の」を意味するドットドット(..)を用いて次のように表現します。
<a href="../index.html">戻る</a>
ひとつ上のフォルダの中の、xyz というフォルダの中の、index.html というファイルを参照するには次のようにします。
<a href="../xyz/index.html">ZZZ</a>
<a name="...">の形式は、<name="...">〜</a>で囲まれた部分に name="..." で指定した名前をつけます。名前は、# マークをつけてhref="..." で参照することができます。表示上は何の変化もありません。
下記の例では、目次の「はじめに」をクリックすると、そのページの中の「はじめに」節の個所にジャンプ(ページがスクロール)します。
目次: <a href="#hajimeni">はじめに</a> : : : <h1><a name="hajimeni">はじめに</a></h1> <p>この文書は・・・</p>
別のページの特定場所にジャンプさせるには、次のようにします。
<a href="betupage.html#ABC">別ページのABCにジャンプ</a>
画像をクリックするとジャンプするようにするには、次のようにします。
<a href="xx.html"><img src="xx.gif" alt="xx" border=0 width=10 height=10></a>
border=0 をつけないと、画像の周りに青い線が表示されてしまいますので注意してください。
下記のように <img の前で改行すると、画像の前後に青い小さなゴミが表示されることがあります。改行しないか、IMGと属性の間、属性と属性の間などで改行するようにしましょう。
<a href="xx.html"> <img src="xx.gif" border=0 width=10 height=10> </a>
下記のようなメールアドレスリンクをクリックすると、メールソフトが起動します。ただし、ページを見る人の環境によって動作は異なります。
<a href="mailto:foo@xxx.yyy.zzz">foo@xxx.yyy.zzz</a>
下記のように、HTML 以外のファイルに対してリンクを張ることも可能です。この場合、そのファイルがダウンロードされ、拡張子によって適切なアプリケーション(.doc の場合は Microsoft Word)が起動したり、ダウンロードの確認ダイアログが表示されたりします。
<a href="manual.doc">マニュアル</a>
http://〜/ や、http://〜/〜/ のように、ファイル名を省略して指定した場合は通常、index.html、index.htm、default.htm などの省略時のファイルが表示されます。省略時のファイルが存在しない場合は、サーバーの設定によって、フォルダの中のファイルの一覧が表示されたり、エラーとなったりします。
フレーム分割している時、クリックした内容を別のフレームに表示したい場合は次のようにしてください。XXX には、<frame name="XXX"> で指定したフレームの名前を指定してください。
<a target="XXX" href="xxx.html">xxxx</a>
フレーム分割を解除して表示したい場合は、次のようにしてください。
<a target="_top" href=xxx.html">xxxx</a>
別ウィンドウを開いてそこに表示したい場合は、次のようにしてください。
<a target="_blank" href="xxx.html">xxxx</a>
http://〜/ディレクトリ名/ の最後のスラッシュ(/)は無くても動作しますが、極力指定するようにしましょう。これを省略すると、ブラウザとサーバーの間で「http://〜/〜 を頂戴」、「http://〜/〜/ じゃないとやだね」、「http://〜/〜/ を頂戴」....のように、無駄な通信が発生します。
例えば http://〜/〜/ を開くと http://〜/〜/index.html が読込まれますが、両者は別の URL として認識されますので、ブラウザのキャッシュが効きません。 <a href="index.html">[戻る]</a> とするところを <a href="./">[戻る]</a> とするとよいのですが、これだとローカルマシンでテストする際に不便なので困ったものです。
スタイルシートの text-decoration を用いると、リンクの下線を表示しないようにすることができます。また、IE4.0 以降では、A:hover を用いてマウスをリンクに乗せたときの色を変更することができます。例えば以下の記述を <head>〜</head> の間に記述することで、ページ中のすべてのリンクの下線を非表示にし、マウスを乗せたときに赤くすることができます。
<style type="text/css"> <!-- A { text-decoration: none; } A:hover { color: red; } --> </style>