たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座   STEP5 リンク


メニュー

リンクを貼ります(同じページ、違うページ、外部サイト)

■STEP5  リンク サンプルを表示

★同じページへのリンク

同じページ内へリンクしてみましょう。
まずは、リンク先を用意します。

a要素のnameプロパティーを使ってリンク先の名前として命名します。
a以外の要素にはidプロパティーを使ってリンク先の名前として命名します。

ソースコード(HTML)

<a name="jump_to_me" >
ここへジャンプされます。
</a>


表示

リンク元はa要素のhrefプロパティーを使ってリンク先の名前を指定します。
名前の前に#を付けます。

ソースコード(HTML)

<a href="#jump_to_me" >
"jump_to_me"へジャンプします。
</a>


表示

ez-HTMLの使い方:
★リンク切れのチェックを行う

このページのトップ

★違うページへのリンク

違うページへリンクしてみましょう。

ページ内リンクと同様にa要素のhrefプロパティーを使ってリンク先の名前を指定します。
名前の#の前にパス+ファイル名を付けを付けます。全体パス、相対パスどちらでもOKです。
リンク先の名前を省略することもできます。この場合は、ファイルの先頭にジャンプします。

ソースコード(HTML)

<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"など特定の名前を指定すればその名前のウィンドウがあればそこにリンクを表示、 なければ新しいウィンドウで表示します。

ソースコード(HTML)

<a href="SamplePage/Sample5.html" target="_blank" >
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。

<a href="SamplePage/Sample5.html" target="Sample" >
サンプル5
</a>を「Sample」という名前で開きます。 同じ名前のウィンドウがあればそのウィンドウに表示し、なければ新しいウィンドウで表示します。


表示

サンプル5 を別窓(新しいウィンドウ)で開きます。

サンプル5 を「Sample」という名前で開きます。 同じ名前のウィンドウがあればそのウィンドウに表示し、なければ新しいウィンドウで表示します。


このページのトップ

★リンクにツールチップを表示する

ツールチップ(ポップアップ ヘルプ)とは、マウスカーソルを乗せたときにポップアップで表示される説明のことです。
title属性で指定するだけでツールチップが表示されます。

ソースコード(HTML)

<a href="SamplePage/Sample5.html" target="_blank" title="これがツールチップです。" >
サンプル5(ここにマウスカーソルをのせて!)
</a>を別窓(新しいウィンドウ)で開きます。


表示

サンプル5(ここにマウスカーソルをのせて!) を別窓(新しいウィンドウ)で開きます。


このページのトップ

★リンク文字に下線をつけない

リンクさせる文字には下線がつきますが、この下線を付けない(下線を消す)ことができます。
text-decorationプロパティーを指定指定します。
また、文字色はcolorプロパティーで変更できます。

ソースコード(CSSファイル)

*.ref_no_line {
text-decoration: none; /* リンクの下線を消す */
color: green; /* 文字色 */
}


ソースコード(HTML)

<a href="SamplePage/Sample5.html" target="_blank" class="ref_no_line" >
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。


表示

サンプル5 を別窓(新しいウィンドウ)で開きます。


このページのトップ

★リンクに点線の枠線をつけない

ブラウザによっては、リンクのクリック後に点線の枠線が表示されますが、これを消す方法があります。
2通り紹介します。これは、画像の場合も同じです。

1.スタイルシートでoutline: none;を指定します。

ソースコード(CSSファイル)

*.ref_no_outline {
outline: none; /* 選択時の点線枠線を消す */
}


ソースコード(HTML)

<a href="SamplePage/Sample5.html" target="_blank" class="ref_no_outline" >
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。


表示

サンプル5 を別窓(新しいウィンドウ)で開きます。


2.または、onfocus属性で"this.blur()"を指定すると点線の枠線が表示されなくなります。

ソースコード(HTML)

<a href="SamplePage/Sample5.html" target="_blank" onfocus="this.blur()" >
サンプル5
</a>を別窓(新しいウィンドウ)で開きます。


表示

サンプル5 を別窓(新しいウィンドウ)で開きます。


このページのトップ

★リンク切れを確認する

リンク漏れやリンク切れの確認方法は、こちらをご覧ください

リンク漏れを確認する

このページのトップ

ステップ5までで学んだ内容だけでホームページを作りました。ボタンをクリックしてください。 スタイルシートは、一度保存してからかまたは直接見てください。

▼STEP6へ

このページのトップ