<a> - リンクする

トップ > HTMLリファレンス > <a>

■ 概要

項目説明
形式<a href="...">~</a>
サポートH2 / e2 / Ch1 / Fx1 / Sa1 / Op2 / N1 / i1
カテゴリフローコンテンツ, フレージングコンテンツ, インタラクティブコンテンツ, パルパブルコンテンツ
親要素フレージングコンテンツ を子要素に持てるもの
子要素トランスペアレント (ただし、インタラクティブコンテンツ を子孫に持つことはできない)
タグの省略開始タグ:必須 / 終了タグ:必須

■ 説明

a はアンカー(Anchor)の略です。

<a href="...">~</a> の形式は、指定したページにジャンプしたり、指定したメールアドレスに対するメールソフトを起動したりする目的で使用されます。

<a name="...">~</a> の形式は、ページの中の指定した個所にジャンプするための目印となる名前を設定していました。HTML5 では name 属性は廃止され、代わりに、任意の要素に id属性を指定します。

■ 属性

【重要な属性】
属性意味
href=urlH2/e2/Ch1/Fx1/Sa1/Op1/i1。リンクをクリックした時のジャンプのアドレス(URL)を指定します。他にも、mailto: による電子メールの送信先指定も可能です。
target=targetH5/H4T/e3/Ch1/Fx1/Sa1/Op。表示ターゲットを指定します。別ウィンドウ(別タブ)で開きたい場合には target="_blank" を指定します。フレームに分割している際に、フレーム分割を解除して全画面に表示したい場合は target="_top" を指定します。
download=filenameH5/Ch14/Fx20。HTML5 で追加されました。リンク先のリソースをダウンロードする目的のリンクであることを示します。値は省略可能で、指定する場合は、ダウンロードの際のファイル名を指定します。この属性を指定することで、画像などのファイルでもクリック時に表示するのではなく、ダウンロードできるようになります。ファイル名に制限はありませんが、OSや環境によって使用不可能文字が変更されることがあります。
name=nameH2-4/e2/Ch1/Fx1/Sa1/Op1/i1。<a name="XXX">~</a> で囲んだ部分に XXX という名前を指定します。HTML5 では廃止され、代わりに任意の要素に id属性を指定します。
【リンク先に関する情報】
属性意味
rel=relH2。この文書から見たリンク先の文書との関係を記述します。rel には next, previous, parent などを指定します。あまり使用されていません。
hreflang=hreflangH4。リンク先文書の言語(ja など)を指定します。
type=typeH4。リンク先文書の MIMEタイプ(text/htmlなど)を指定します。
urn=urnH2-2。あまり使用されていません。HTML3.2 で削除されました。
media=mediaH5d。メディアを指定します。HTML5 の草案で検討されていましたが、最終案では削除されました。
charset=charsetH4-4。リンク先文書のキャラクタセット(euc-jp や Shift_JIS など)を指定します。HTML5 では廃止されました。
methods=methodsH2-2。リンク先のオブジェクトが持つ機能についての情報を記述しますが、あまり使用されていません。HTML2.0 では定義されていましたが、HTML3.2 で削除されました。
rev=revH2-H4。リンク先の文書から見たこの文書との関係を記述します。rev には next, previous, parent などを指定します。あまり使用されていません。HTML5 では廃止されました。
【データバインド関連】
属性意味
datafld=dataflde4-7。データバインド機能を用いる際の、データソースの列名を指定します。IE8 で廃止されました。
datasrc=datasrce4-7。データバインド機能を用いる際の、データソースの ID を指定します。IE8 で廃止されました。
【クリッカブルマップ関連】
属性意味
coords=coordsH4-4。クライアントサイドイメージマップの座標を指定します。<area> を参照してください。HTML5 では廃止されました。
shape=shapeH4-4。クライアントサイドイメージマップの形を指定します。<area> を参照してください。HTML5 では廃止されました。
【i-mode専用】
属性意味
cti=ctii2。このリンクをクリックすると、cti で指定した番号にダイヤルします。cti をサポートしている機種では href より cti を優先します。0~9、アスタリスク(*)、シャープ(#)の他、1秒待ちを示すカンマ(,)とキー入力待ちを示すスラッシュ(/)を使用することができます。
utni3。携帯端末や FOMAカードの識別番号をサーバーに送信します。
subject=subjecti3。href="mailto:~" でメールを送信する際の件名を指定します。
body=bodyi3。href="mailto:~" でメールを送信する際の本文を指定します。
telbook=telbooki3。電話帳登録機能の名前(20バイト)を指定します。
kana=kanai3。電話帳登録機能の半角カナ名(18バイト)を指定します。
email=emaili3。電話帳登録機能のメールアドレス(50バイト)を指定します。
ista=idi4。起動するする iアプリを示す OBJECTタグの IDを指定します。
ijam=idi3。ダウンロードする iアプリを示す OBJECTタグの IDを指定します。
ilet=idi5。ダウンロード後、即起動する iアプリを示す OBJECTタグの IDを指定します。
iswf=iswfi5。インタラクティブ再生モードで配信する Flashコンテンツを指定します。
irst=irsti5。赤外線送信するデータに対応した OBJECTタグの IDを指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

■ 使用例

HTML
<a href="http://xx.yy.zz/index.htm">リンク先にジャンプ</a>

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

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

<a href="index.htm#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="..." で参照することができます。表示上は何の変化もありません。

下記の例では、目次の「はじめに」をクリックすると、そのページの中の「はじめに」節の個所にジャンプ(ページがスクロール)します。

HTML
目次:
<a href="#hajimeni">はじめに</a>
      :
      :
      :
<h1><a name="hajimeni">はじめに</a></h1>
<p>この文書は・・・</p>

別のページの特定場所にジャンプさせるには、次のようにします。

<a href="betupage.html#ABC">別ページのABCにジャンプ</a>

HTML5 では、name属性は廃止されます。代わりに、名前を付けたい要素に id属性を指定してください。

<h1 id="hajimeni">はじめに</h1>

■ テクニック

■ ファイル名省略時の動作

http://~/ や、http://~/~/ のように、ファイル名を省略して指定した場合は通常、index.html、index.htm、default.htm などの省略時のファイルが表示されます。省略時のファイルが存在しない場合は、サーバーの設定によって、フォルダの中のファイルの一覧が表示されたり、エラーとなったりします。

■ フォルダの後ろのスラッシュ(/)

http://~/ディレクトリ名/ の最後のスラッシュ(/)は無くても動作しますが、極力指定するようにしましょう。これを省略すると、ブラウザとサーバーの間で「http://~/~ を頂戴」、「http://~/~/ じゃないとやだね」、「http://~/~/ を頂戴」....のように、無駄な通信が発生します。

例えば http://~/~/ を開くと http://~/~/index.html が読込まれますが、両者は別の URL として認識されますので、ブラウザのキャッシュが効きません。 <a href="index.html">[戻る]</a> とするところを <a href="./">[戻る]</a> とするとよいのですが、これだとローカルマシンでテストする際に不便なので困ったものです。


Copyright (C) 1996-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/a.htm