CSS
<a> - リンクする
概要
形式 <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> を参照してください。

【i-mode専用】
属性 意味
cti=cti i2。このリンクをクリックすると、cti で指定した番号にダイヤルします。cti をサポートしている機種では href より cti を優先します。0〜9、アスタリスク(*)、シャープ(#)の他、1秒待ちを示すカンマ(,)とキー入力待ちを示すスラッシュ(/)を使用することができます。
utn i3。携帯端末や FOMAカードの識別番号をサーバーに送信します。(詳細
subject=subject i3。href="mailto:〜" でメールを送信する際の件名を指定します。
body=body i3。href="mailto:〜" でメールを送信する際の本文を指定します。
telbook=telbook i3。電話帳登録機能の名前(20バイト)を指定します。
kana=kana i3。電話帳登録機能の半角カナ名(18バイト)を指定します。
email=email i3。電話帳登録機能のメールアドレス(50バイト)を指定します。
ista=id i4。起動するする iアプリを示す OBJECTタグの IDを指定します。
ijam=id i3。ダウンロードする iアプリを示す OBJECTタグの IDを指定します。
ilet=id i5。ダウンロード後、即起動する iアプリを示す OBJECTタグの IDを指定します。
iswf=iswf i5。インタラクティブ再生モードで配信する Flashコンテンツを指定します。
irst=irst i5。赤外線送信するデータに対応した OBJECTタグの IDを指定します。

【一般属性】
属性 意味
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.html">リンク先にジャンプ</a>

<a href="index.html">同フォルダの別ファイルにジャンプ</a>

<a href="../xxx/index.html">別フォルダの別ファイルにジャンプ</a>

<a href="index.html#XYZ">リンク先の特定位置にジャンプ</a>

<a href="#XYZ">同じファイル内の特定位置にジャンプ</a>

<a href="mailto:xyz@xxx.yyy.zzz">メールアドレスにメール送信</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.html、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 や Netscape 6 以降では、A:hover を用いてマウスをリンクに乗せたときの色を変更することができます。例えば以下の記述を <head>〜</head> の間に記述することで、ページ中のすべてのリンクの下線を非表示にし、マウスを乗せたときに赤くすることができます。

<style type="text/css">
<!--
A { text-decoration: none; }
A:hover { color: red; }
-->
</style>
i-modeの電話帳登録機能

i-mode用 HTML3.0 では、下記のようにしてリンクをクリックすることで電話帳に名前やアドレスと登録してもらうことが可能です。

<a href="tel:電話番号" email="メールアドレス"
   telbook="名前" kana="半カナ名">〜</a>
<a href="mailto:メールアドレス"
   telbook="名前" kana="半カナ名">〜</a>
iアプリの起動

i-mode で iアプリを起動するには下記のようにします。href には、iアプリ未対応機種へのメッセージへのページを指定します。

<object declare
  id="app1" data="http://xxx.yyy.zzz/xxx.jam"
  type="application/x-jam">
</object>
<a ista="#app1" href="http://xxx.yyy.zzz/zzz.htm">起動</a>

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。

お問合せフォームはこちらから

ホームページ作成は京都のリュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM10:00-PM7:00


CSS
Ryuumu