|
|
|
|
| Link方法 |
|
|
|
| ● |
リンクの基本 |
|
|
|
|
|
|
|
■文字リンクの場合
<a href="リンクURL">リンクテキスト</a>
■画像リンクの場合
< a href="リンクURL">画像のurl</a>
|
|
|
|
|
| ● |
リンクの開き方 |
|
|
|
|
|
<a href="リンクURL" target="ターゲット">リンクテキスト</a>
■新しいウィンドウで開く例
<a href="http://yahoo.co.jp" target="_blank">YAHOO JAPAN</a>
■親ウィンドウに開く例
<a href="http://yahoo.co.jp">YAHOO JAPAN</a>
■ターゲットの種類
|
target="_blank" |
新しいウィンドウで開く |
|
|
target なし |
同じページで開く |
|
|
target="_top" |
フレームを解除して新たに開く |
|
|
target="_self" |
同じウィンドウ（フレーム）に開く |
|
|
target="_parent" |
親フレームに開く |
|
|
target="フレーム名" |
フレームから別フレームに開く |
|
|
|
|
|
|
|
|
|
|
|
|
| リンク文字のアンダーライン |
|
| ● |
アンダーラインの非表示 |
|
|
|
|
| |
■非表示
<a href="リンクURL" target="ターゲット" style="text-decoration: none;">リンクテキスト</a>
こんな感じになります→→ kzn.tokyo
|
|
| |
|
|
| ● |
マウスを乗せるとアンダーラインを表示する |
|
|
|
|
|
|
|
■<head>と</head>の間に以下のstyleを入れる
<style type="text/css">
<!--
a:link {
text-decoration:none;
color:#0033cc; ←未訪問リンクのアンダーラインの色
}
a:visited {
text-decoration:none;
color:#0033cc; ←既訪問リンクのアンダーラインの色
}
a:active {
text-decoration:none;
color:#0033cc; ←リンクをクリックした時のアンダーラインの色
}
a:hover {
text-decoration:underline; ←マウスカーソルを乗せた時にアンダーライン表示
}
-->
< /style>
こんな感じになります→→ kzn.tokyo
|
|
|
|
|
|
| ● |
マウスを乗せるた時にリンク文字色変える |
|
|
|
|
|
|
| |
上のstyle太字分部を変更する
a:hover {
text-decoration:underline;
↓↓
a:hover {
text-decoration:none;
color:#ff0000; ←マウスを乗せた時の文字色を指定
|
|
| |
注意：予めリンク文字を色指定した場合はこの設定は無効になります。 |
|
| |
|
|
|
| |
そのほか様々な設定に関してこちら ↓ のサイトに書かれています。 |
|
| |
ホームページを小粋に |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
