テクノロジーの雑学・豆知識

PC・スマホ、プログラミング、電子機器、電化製品についての雑学・うんちく・豆知識・トリビアを集めたサイトです。気になった記事や文章を個人のメモとして投稿しています

【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">にリンクする時は以下のように書きます。

リンク元

<a href="other.html#bottom">other というページの bottom</a>

 リンク先

<a name="other.html#bottom">文字列<a>