リンク要素の簡単リスト|HTMLタグ
HTMLタグのリンク”link要素”に関するリストです。Webサイトでとても重要な要素です。他のページへ移動させる事ができます。
リンク要素の中には多くの属性を指定をすることができます。また、画像にリンク領域を複数埋め込む要素も紹介しています。
HTMLタグのイメージ要素に関するリスト
- <a href=”★”>(指定のページへ移動)
- href=”mailto:★”(メールリンク)
- href=”URL#★”(移動先のラベルに飛ぶ)
- name=”★”(アンカーポイント)
- target=”★”(リンクページの表示方法)
- accesskey=”★”(ショートカットキー)
- <base href=”★” target=”★”>(a要素の初期設定)
- <img src=”★” usemap=”#★”>(画像内にリンク領域を作成)
- <area sharp=”★” coords=”★” href=”★” alt=”★”>(画像内のリンク領域の座標指定)
- tabindex=”★”(TAB移動の順番)
<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>