同じページ内へリンクしてみましょう。
まずは、リンク先を用意します。
a要素のnameプロパティーを使ってリンク先の名前として命名します。
a以外の要素にはidプロパティーを使ってリンク先の名前として命名します。
<a
name="jump_to_me"
>
ここへジャンプされます。
</a>
リンク元はa要素のhrefプロパティーを使ってリンク先の名前を指定します。
名前の前に#を付けます。
<a
href="#jump_to_me"
>
"jump_to_me"へジャンプします。
</a>
ez-HTMLの使い方:
★リンク切れのチェックを行う
違うページへリンクしてみましょう。
ページ内リンクと同様にa要素のhrefプロパティーを使ってリンク先の名前を指定します。
名前の#の前にパス+ファイル名を付けを付けます。全体パス、相対パスどちらでもOKです。
リンク先の名前を省略することもできます。この場合は、ファイルの先頭にジャンプします。
<a
href="Reference/css_property_table.html"
>
"Reference/css_property_table.html"へジャンプします。
</a>
<br>
<a
href="SamplePage/Sample5.html#jump1"
>
"SamplePage/Sample5.html#jump1"へジャンプします。
</a>
外部サイトへリンクしてみましょう。
ジャンプ先を、アドレスで指定すればOKです。
ソースコード(HTML)
<a
href="http://tamachan.tama777.com/"
>
たまちゃんHTMLのおうち
</a>
新たなウィンドウを開いて、リンクを表示するにはtargetプロパティーを用います。
target="_blank"と指定すれば、常に新しいウィンドウでリンクを表示します。
また、target="name1"など特定の名前を指定すればその名前のウィンドウがあればそこにリンクを表示、
なければ新しいウィンドウで表示します。
<a
href="SamplePage/Sample5.html"
target="_blank"
>
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。
<a
href="SamplePage/Sample5.html"
target="Sample"
>
サンプル5
</a>を「Sample」という名前で開きます。
同じ名前のウィンドウがあればそのウィンドウに表示し、なければ新しいウィンドウで表示します。
ツールチップ(ポップアップ ヘルプ)とは、マウスカーソルを乗せたときにポップアップで表示される説明のことです。
title属性で指定するだけでツールチップが表示されます。
<a
href="SamplePage/Sample5.html"
target="_blank"
title="これがツールチップです。"
>
サンプル5(ここにマウスカーソルをのせて!)
</a>を別窓(新しいウィンドウ)で開きます。
サンプル5(ここにマウスカーソルをのせて!)
を別窓(新しいウィンドウ)で開きます。
リンクさせる文字には下線がつきますが、この下線を付けない(下線を消す)ことができます。
text-decorationプロパティーを指定指定します。
また、文字色はcolorプロパティーで変更できます。
*.ref_no_line {
text-decoration: none; /* リンクの下線を消す */
color: green; /* 文字色 */
}
<a
href="SamplePage/Sample5.html"
target="_blank"
class="ref_no_line"
>
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。
サンプル5
を別窓(新しいウィンドウ)で開きます。
ブラウザによっては、リンクのクリック後に点線の枠線が表示されますが、これを消す方法があります。
2通り紹介します。これは、画像の場合も同じです。
1.スタイルシートでoutline: none;を指定します。
ソースコード(CSSファイル)*.ref_no_outline {
outline: none; /* 選択時の点線枠線を消す */
}
<a
href="SamplePage/Sample5.html"
target="_blank"
class="ref_no_outline"
>
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。
サンプル5
を別窓(新しいウィンドウ)で開きます。
2.または、onfocus属性で"this.blur()"を指定すると点線の枠線が表示されなくなります。
<a
href="SamplePage/Sample5.html"
target="_blank"
onfocus="this.blur()"
>
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。
サンプル5
を別窓(新しいウィンドウ)で開きます。
リンク漏れやリンク切れの確認方法は、こちらをご覧ください