HOME ＞ HTMLリファレンス [ABC順 / 目的別] ＞ <A>
<A>
リンクを設定する （リンク先・リンク元を指定、メールソフトの起動など）
ショートカット
形式 ・ 説明
<A href="リンク先のURL"> リンク元 </A>
- A はアンカー（Anchor）の略。
重要な属性
href=" 〜 "
href="リンク先のURL"
- リンク先へジャンプする。
- 絶対パス または 相対パス でURLを指定する。
同じサイトの別ページにいくときは 相対パス 指定のほうが便利である。
（絶対パスでもいいけどオンラインでのリンクチェックやサイト移転時が大変） - リンク先によっては圧縮ファイルなどのダウンロードが始まったり、特定のソフトが起動したりする場合もある。
href="リンク先のURL#名前"
href="#名前"
- ファイル名のあとに# をつけて名前を指定すれば、
ページ先頭からではなくページ内の特定の位置に場所を指定してジャンプできる。 - 同じページ内にジャンプするときはリンク先URLを省略して #〜 にしてもよい。
- <A name="名前"> であらかじめ特定の位置に名前を指定しておく。
href="mailto:メールアドレス"
- mailto:メールアドレス を URL のかわりに指定すれば、メールソフトが起動する。
- このメールアドレスをロボットでひろって広告やウイルスを大量に送る人がいる。
フォームメール設置より手軽だが、安易にメールリンクをはらない方がよい。
name="名前"
- ページの特定位置に、あらかじめ半角英数字で名前を指定しておくことができる。
- id属性 も同じように使える。
（name属性の場合はAタグに限られるが、id属性はどのタグにも使うことができる。）
同じページ内にid属性とnama属性の名前がどれもかぶらないようにする必要があることに注意。 - とても長い文書のときに「上へ戻る」などを設定すると、見る人にやさしい。
target="ターゲット"
- ターゲット（ウィンドウ名・フレーム名など）を指定
指定されたフレーム・ウインドウにリンク先が表示される。- 特定のターゲットが用意されています。
- _blank → つねに新しいウィンドウでリンク先が開かれる。
- _self → 自分のフレーム・ウィンドウに表示。デフォルト。
- _top → 今表示しているフレームを全て解除して表示する。
- _parent → 複数のフレームの場合、内側のみ解除してそこに表示。
- フレーム名・ウィンドウ名
指定された名前のフレーム・ウィンドウに表示する。
指定された名前のフレーム・ウィンドウがないときは_blankと同じ。
（フレーム・ウィンドウを設定するタグのname属性で任意につけておく）
- 動作を固定してしまうので、本来は使用しないほうがよいとされている。
- ただし、フレームを使用しているときは必要である。
- うっかり指定なしだと、フレームの中にさらにさらにフレームなんてことになりかねない。
- また、別サイトへの移動は必ず_blankか_topを指定しておかないと、著作権侵害にもなりかねない。
その他リンクに関する属性
- accesskey="英数字" ・・・ ジャンプ先のショートカットキーを指定。
- tabindex="数字" ・・・ Tabキーを押した際のフォーカス移動順を指定。
- charset="文字コード" ・・・ リンク先の文字コード（euc-jp や Shift_JIS など）を指定。
- hreflang="言語コード" ・・・ リンク先の言語を指定。（ja など。リンク先の言語が違う場合に使う？）
- type="MIMEタイプ" ・・・ リンク先の MIMEタイプを指定。（text/html、image/gif、video/mpeg など）
- rel="リンクタイプ" ・・・ この文書から見たリンク先との関係。
rev="リンクタイプ" ・・・ リンク先から見たこの文書との関係。- Next（前の文書） 、Prev（次の文書）、Contents（目次）、Help（ヘルプ）などのリンクタイプがある。
一般属性
使用例
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>サンプル</TITLE> </HEAD> <BODY> <P><A href="http://www.yahoo.co.jp/">他サイトは絶対パス指定。</A></P> <P><A href="index.html">同じサイトの別ページは相対パス。</A></P> <P><A href="girl1.jpg"><IMG src="hani.gif" alt="画像へのリンク" border="0"></A></P> <P><A href="mailto:test@sample.co.jp">メール</A></P> <P><A href="index.html" target="_blank">新しいウィンドウが開く</A></P> <P>○○○○○○○（省略）○○○○○○○</P> <P><A name="name"><B>☆ココをリンク終点として名前をつけました。</B></A></P> <P>■■■■■■■（省略）■■■■■■■</P> <P><A href="#name">このページにある、名前をつけたところへジャンプ！</A></P> <P><A href="index.html#m">別ページの特定位置にジャンプ。</A></P> </BODY> </HTML>
解説
- リンクテキストや画像の枠線（border= 〜 の指定なしだと2pxほどの枠線が表示される）は、
特に何も指定しなければ、ブラウザのデフォルトの色になる。
（未読リンク → 青色 / 既読リンク → 赤紫色） - スタイルシートで、未読・既読・マウスオン・アクティブ、リンクのそれぞれの状態に、
下線・上線・打ち消し線（text-decoration: 〜 ;）、枠線（border: 〜 ;）、
文字色や背景色（color: 〜 ; / background-color: 〜 ;）などを指定できる。 - リンク画像の枠線を消したい場合は、 border="0"とするか（非推奨属性）、
スタイルシートで border:none; （NN4の場合はさらに color:背景色; も）と指定する。 - 画像をリンクボタンにするときは、IMGタグに alt属性 を必ず指定する決まりになっている。
（画像が表示されなくてもリンク先が分かるように）
このサイト内で使用している画像（バナー除く）及びテキストの無断複製・転載を禁じます
Copyright © 2006 KURAGEYA, All right reserved.