【HTML・CSS】リンクの張り方を解説

・リンクさせたい文字をアンカータグで囲む

「<a href=”ジャンプ先アドレス”> リンクさせたい文字 </a>」と書きましょう。

＜例＞

わたしのホームページは <a href=”http://www.goo.ne.jp/“> goo </a>

の簡単ホームページを利用して作ってます

・goo の文字をクリックして goo のHPにジャンプ

target=”_blank”をつければ別窓が開きます。

＜例＞

<a href=”ジャンプ先アドレス” target=”_blank”> goo</a>

・リンク上にマウスを持ってきた時にリンク文字の形状を変える

<head></head>間に下記を埋め込みます。

＜例＞

<style type=text/css><!–
a {
text-decoration:none;
/*リンク文字は飾り無し*/
font-size:12pt;
}/*文字の大きさ:12pt;*/
/*リンク部分の修飾はここに記述*/

a:link {
color:black;
}/*<a></a>に囲まれた未訪問リンク部分の修飾*/

a:active {
color:gray;
}/*<a></a>に囲まれてアクティブになったリンク部分の修飾*/

a:visited {
color:#b0b0b0;
}/*<a></a>に囲まれた既訪問リンク部分の修飾*/

a:hover {
color:red;
background:blue;
}/*<a></a>に囲まれてマウスが乗ったリンク部分の修飾*/
/*文字色赤背景色blue*/
–></style>

・画像をクリックしてジャンプしたい時

リンクさせたい画像をアンカータグで囲む

＜例＞

<a href=”ジャンプ先アドレス”> 画像 </a>

例えばこの画像↓をクリックするとフレッドハッチンソンにジャンプします。

このコードはこのようになっています↓。

<p>この画像を</p>

<a href=”http://www.fhcrc.org/” target=”_blank”>

<img src=”画像の置いてあるアドレス” style=”border:none;”>
</a>

<p>クリックするとフレッドハッチンソンにジャンプします</p>

・ページの中でジャンプしたい時

ページの中でジャンプしたい時は、hrefとnameで対応関係をつくります。

＜例＞

リンク元

<a href=”#page”>文字列<a>

リンク先

<a name=”page”>文字列<a>

リンク元には「 #」を付ける点がポイントです。

・他のページの途中にジャンプしたい時

other.html というページの <a name=” bottom”>にリンクする時は以下のように書きます。