リンク要素の簡単リスト｜HTMLタグ

HTMLタグのリンク”link要素”に関するリストです。Webサイトでとても重要な要素です。他のページへ移動させる事ができます。
リンク要素の中には多くの属性を指定をすることができます。また、画像にリンク領域を複数埋め込む要素も紹介しています。

HTMLタグのイメージ要素に関するリスト

<a href=”★”>

リンク要素の基本。hrefにリンク先のアドレスを指定。

画像を指定した場合はブラウザーに画像のみ表示、ZIPファイル等を指定した場合ダウンロードをさせることもできる。

アドレスの指定は絶対パス（http:***）と相対パス（このページから～）が使える。

画像にもa要素を指定できるのでイメージボタンを制作できる。

a要素をスタイルシートでブロック要素に変換するとエリア（領域）を拡大してクリックさせることもできる。

オレのWEBPADは<a href="http://webpad.felicyle.com/">こちら</a>

href=”mailto:★”

メールアドレスを指定。ユーザーの環境に合わせたメールソフトが起動する。

ご連絡は<a href="mailto:＊＊＊＊@＊＊＊.com">こちら</a>

href=”URL#★”

特定のページ内の指定したid属性へ移動。id属性は<div>や<h1～6>等のセレクタ名に付ける。id属性がつけれる要素であれば種類は問わない。

XHTML1.0の場合は『Transitional』で使える。

<!--特定ページのidを参照-->
ご連絡は<a href="URL#mailform">こちら</a>

name=”★”

a要素のリンク表示先をこのname属性にする。アンカーポイントの指定。上記の#と同じく任意のタグ内に記述。

同じページである場合はURLを省く事ができる。日本語も記述できるが英字が無難。W3Cにこだわるのであれば空タグは禁止。

<!--リンクボタン-->
ご連絡は<a href="URL" name="mailform">こちら</a>

<!--移動先のアンカーポイント-->
<h2>御用の方はこちらからお送りください</h2>

<a name="mailform"></a>
<p>なお、返信はできかねます。</p>

target=”★”

リンク要素をクリックした場合にどのような動作を行うか指定。

XHTMLでこの属性を使う場合は文章型を『Transitional』で記述。

<!--新しいページを開く-->
<a href="index.html" target="_blank">クリック</a>
<!--現在のウィンドウ/フレームにリンク先を表示-->
<a href="index.html" target="_self">クリック</a>
<!--親フレームにリンク先を表示-->
<a href="index.html" target="_parent">クリック</a>

accesskey=”★”

リンク要素にショートカットキーを指定できる。キーボードの操作でリン要素をクリックしてページ移動。携帯端末などで便利な属性。
Winの場合はAlt、Macの場合はCtrlと同時押しで有効となる。

デフォルトでブラウザメニューに設定されているキーは避けるのが無難。

Firefoxの場合

  • Win:Alt+Shift
  • Mac:Ctrl
  • Opera:Shift+Escを押した後キーを押す
オレのWEBPADは<a href="http://webpad.felicyle.com/" accesskey="1">こちら（1）</a>

<base href=”★” target=”★”>

リンク要素の相対パスの設定や開くアクションの設定。この属性でサイトトップURLを設定しているとサイトトップからの相対パスとなる。

記述箇所は<head>内で指定。
XHTML2.0では廃止されxml:base属性で指定する。

XHTMLでは />で閉じる。

<!--サイトトップURLを定義 _blankで開く-->
<a base href="http://webpad.felicyle.com/" target="_blank">クリック</a>

<img src=”★” usemap=”#★”>

画像上の任意のエリアをリンク領域（クリッカブルマップ）として指定する。複数のエリアを指定する事も可能。目には見えない。

クリッカブルマップは<map name="★"></map>内に<area ★>で記述。

XHTMLでは />で閉じる。また『Transitional』で使用可。XHTML1.1以降は廃止されている。

<!--HTML-->
<img src="images/map.jpg" usemap="#map">
<map name="map">
	<area sharp="rect" coords="10, 5, 10, 8" href="http://webpad.felicyle.com/" alt="オレのWEBPAD">
</map>

<!--XHTML-->
<img src="images/map.jpg" usemap="#map" />
<map name="map">
	<area sharp="rect" coords="10, 5, 10, 8" href="http://webpad.felicyle.com/" alt="オレのWEBPAD" />
</map>

<area sharp=”★” coords=”★” href=”★” alt=”★”>

上記にあるusemap属性の座標を指定する属性。マップネームを合わせることで反映させる。

多角形となると座標を調べるのは中々困難なため、専用のソフトを使うのが吉。

XHTMLでは />で閉じる。また『Transitional』で使用可。XHTML1.1以降は廃止されている。

<area>に記述する属性

  • sharp=”★”
    rect（四角形）,circle（円形）,poly（四角形）
  • coords=”★”
    rect（左上X座標,左上Y座標,右下X座標,右下Y座標）
    circle（円の中心X座標,円の中心Y座標,円の半径）
    poly（X座標,Y座標,X座標,Y座標, …）
<img src="images/map.jpg" usemap="#map">
<map name="map">
	<area sharp="rect" coords="10, 5, 10, 8" href="http://webpad.felicyle.com/rect.htm/" alt="四角形の領域">
	<area sharp="circle" coords="30, 15, 50" href="http://webpad.felicyle.com/circle.htm/" alt="円形の領域">
	<area sharp="poly" coords="15, 15, 35" href="http://webpad.felicyle.com/poly.htm/" alt="多角形の領域（三角）">
</map>

tabindex=”★”

TABを押すことで上から順番にリンク領域を選択できるが、その順番を任意で並び替える属性。

<a base href="http://webpad.felicyle.com/" tabindex="2">クリック</a>
<a base href="http://webpad.felicyle.com/" tabindex="3">クリック</a>
<a base href="http://webpad.felicyle.com/" tabindex="1">クリック</a>