HTML

<a> リンク

詳細を開く 詳細を閉じる

リンク : <a>

<a>要素は、


別ウィンドウで表示

<a href="aaa.html">aaa</a>
<br>
<a href="http://ykato.net/">ykato.net</a>

別のウィンドウ(またはタブ)で開く : target

  • 属性「target="_blank"」を指定すると、別のウィンドウ(またはタブ)でリンク先を開くことができます。
  • ウィンドウになるか、タブになるかは、ブラウザに依存します。

別ウィンドウで表示

<a href="aaa.html" target="_blank">
	別のウィンドウで表示
</a>

フォーカス時にツールチップを表示 : title

  • title属性を指定すると、「ツールチップ」を表示させることができます。
  • 「ツールチップ」は、ポインタ(=マウス)をフォーカスさせると現れる小さなボックスです。

別ウィンドウで表示

<a href="aaa.html" title="aaaへ移動します。">
	ここにマウスを移動させると「ツールチップ」が表示されます。
</a>

画像リンク : <img>

画像から「HTMLページ」へリンク

  • <a>要素<img>要素を入れると、画像リンクを作れます。
  • 下のサンプルでは、画像をクリックすると、別のHTMLファイルへ移動します。

別ウィンドウで表示

<a href="aaa.html">
	<img src="../img/sample.jpg">
</a>

画像から「画像」へリンク


別ウィンドウで表示

<a href="../img/large.jpg">
	<img src="../img/small.png">
</a>

ページ内のリンク : #

  • 以下のような手順で、ページ内のリンクを作成することができます。
    1. 移動先の要素(なんでも良い)に、「id」を指定します。例では<div>要素に「id="aaa"」を設定しています。
    2. <a>要素の「href」属性(=移動先)を「#(id名)」に指定します。 例では「<a href="#aaa">」と設定しています。
  • HTML5では、移動先を「#top」とした場合(つまり、<a href="#top">○○</a>と書くと)、(id="top"を指定しなくても)ページ先頭へ移動します。

別ウィンドウで表示

<a href="#aaa">一番下へ移動</a>

<div class="dummy">ダミー</div>

<a href="#top">ページの先頭へ移動</a>

<div id="aaa">一番下</div>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ