説明
<a>-</a> 開始タグ:必須 終了タグ:必須
a要素は、主にリンクとして使用します。
<a href="リンク先URI">リンク</a>の形でリンク先の文書に関連付けます。
また、ページ内のある部分へのリンクとしても使用されます。
<a name="アンカー名">アンカー</a>や、id属性を持つ要素、たとえば、
<div id="アンカー名">アンカー</div>などの形をしたアンカー(リンク終点)に、
<a href="リンク先URI#アンカー名">リンク</a>の形のリンクを関連付けます。
name属性と
id属性の値は、同じ「名前空間」を共有するので、基本的に同一文書内に同じ値を記述することはできません。ただし、古いブラウザとの互換性を保つために、a要素内において同一名を指定する場合はその限りではありません。
| 一般属性
| id class style title lang dir %events;
|
| charset="文字セット"
| H4-
リンク先の文字セット
"SHIFT_JIS" "EUC-JP" "ISO-2022-JP" "UTF-8"など。
|
| type="MIMEタイプ"
| H4- N6-
MIMEタイプ
リンク先リソースのデータ形式を指定。
|
| name="名前"
| H2-x1 ie1- N1-
ページ内リンク終点  参照
文字参照も可。id属性も指定可。
|
| href="URI"
| H2- ie1- N1-
リンク先のURI 参照
|
| hreflang="言語コード"
| H4- N6-
リンク先の言語コード
"ja" "en-US" "en" "fr" "zh"など。
|
| target="目標フレーム"
| H4-x1 ie3- N2-
目標フレーム (フレーム名やウィンドウ名) 参照
|
| rel="リンク形式"
| H2- ie3- N6-
リンク先のリンク形式
[ ]区切りのリストで指定。
|
| rev="リンク形式"
| H2- N6-
リンク元のリンク形式
[ ]区切りのリストで指定。
|
| accesskey="文字"
| H4- ie4- N6-
アクセスキー
(Win[Alt]+[文字]、Mac[ctrl]+[文字]でフォーカス)
|
| shape="形"
| H4- N6-
イメージマップの形 詳細
| rect | 四角形 (初期値)
| | circle | 円
| | poly | 多角形
| | default | 画像全体
|
|
|
| coords="座標"
| H4- N6-
イメージマップの座標 詳細
画像左上隅を(0,0)とした[,]で区切られた座標のリスト。
| "shape=rect" | 左上X,Y,右下X,Y
| | "shape=circle" | 中心X,Y,半径
| | "shape=poly" | 角の座標X,Yのリスト
最初と最後の座標が同じになるように指定。
| | "shape=default" | 画像全体
|
|
座標は長さで指定。ただし%値は参照元が不明確。
|
| tabindex="数字"
| H4- ie4- N6-
タブインデックス [0-32767]
([tab]キーを押したときに切り替わるフォーカスの順序を指定)
|
| onfocus="スクリプト"
| H4- ie3- N2-
選択時 詳細
|
| onblur="スクリプト"
| H4- ie3- N2-
選択解除時 詳細
|
|
| >(%inline;)* -(a)</a>
|
|
| disabled
| ie5-
未調査
|
| datafld="CDATA"
| ie4-
未調査
|
| datasrc="URI"
| ie4-
未調査
|
| method="method"
| H2 ie4-
未調査
|
| sdapref=""
| H2
未調査
|
| suppress=""
| N4
未調査
|
| urn="URN"
| H2 ie4-
未調査
|
|
<a href="anchor.htm">リンク</a>
<a href="anchor.htm"><img src="img/go1.gif" alt="go" border="0"></a>
<a href="anchor.htm#sec1">section1</a> → <a name="sec1">section1</a>
<a href="anchor.htm#sec2">section2</a> → <a name="sec2">section2</a>
<a href="anchor.htm#sec3">section3</a> → <div id="sec3">section3</div>
<a href="anchor.htm#sec4">section4</a> → <div id="sec4">section4</div>
<a href="mailto:tmyk@tom.mot.yan.kim.ne.jp">TMYK</a>
コロン[:]とメールアドレスの間には、スペースを入力しないでください。
スタイルシートによるデコレーション
<head>
<style type="text/css"><!--
a:link {color:#00f;} /* リンク */
a:visited {color:#00f;} /* 訪問済みリンク */
a:hover {color:#f0f;} /* ポイント時のリンク */
a:active {color:#f0f;} /* アクティブなリンク */
--></style>
</head>
...
<a href="anchor.htm">リンク</a>
...
<head>
<style type="text/css"><!--
a:link {color:#00f; text-decoration:none;}
a:visited {color:#00f; text-decoration:none;}
a:hover {color:#069; text-decoration:underline; background:#def;}
a:active {color:#069; text-decoration:underline; background:#def;}
--></style>
</head>
...
<a href="anchor.htm">リンク</a>
...
HTMLにおいて通常使用する色の指定方法は、6桁の16進数ですが、
スタイルシートでは3桁の16進数を使用し、簡略化して記述することができます。#09fは、#0099ffと同じ意味を持ちます。
スタイルシートの擬似クラスには決められた順序があります。link、visited、hover、acriveの順です。
特定クラスが指定されているリンクと、特定クラスが指定された要素に含まれるリンクのスタイルシートの指定
a.クラス名:link {...} /* リンク */
a.クラス名:visited {...} /* 訪問済みリンク */
a.クラス名:hover {...} /* ポイント時のリンク */
a.クラス名:active {...} /* アクティブなリンク */
.クラス名 a:link {...} /* リンク */
.クラス名 a:visited {...} /* 訪問済みリンク */
.クラス名 a:hover {...} /* ポイント時のリンク */
.クラス名 a:active {...} /* アクティブなリンク */
スタイルシートの擬似クラスには決められた順序があります。link、visited、hover、acriveの順です。
マウスが乗ったら色を変える
