ホームページできるかな/超初心者さん向きHP作成
Web dekirukana.net
サイトメニュー >> ホームページのデザインテンプレートをダウンロードできるサイト
トップページ
HPのはてな?
HPはどこにある?
HPのなかみ
HTMLって?
相対・絶対パス
つくってみよう!
用意するもの
作成手順
HP用素材
基本の小技集
HPを公開!
もっと知ろう!
タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム
メール
メールフォーム BBS
掲示板

リンク
リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献
【クリック募金】


【ウィルス対策】
Click Here!

【HTMLタグ】
みんなのタグ辞書
TAG <index>

【PCトラブル】
Windows.FAQ

【ランキング】
206 Web Ranking
ホームページの情報屋さん

【P R】


Click Here!

Click Here!



リンク

> タグの簡易テスト(別窓)
| 文字でリンク | 画像でリンク | リンクターゲット | 変化するリンク | 同じページ内でのリンク |
| ロールオーバーイメージでリンク |

変化するリンク

| 触れると変化するリンク | 触れるとへこむリンク |

■触れると変化するリンク
マウスを重ねると、リンク指定した文字に色がついたり、下線がついたりします。
スタイルシートを使います。スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>

<body>
☆リンクは表示させたい部分に記述します☆
</body>

</html>

表示例・1
スタイルシートの記述
<style type="text/css">
<!--
a:link { color: #66CCCC}
a:visited { color: #A2A49D}
a:hover { color: #FF9999}
a:active { color: #FF0000}
-->
</style>

a:link ・・・リンクの状態
a:visited ・・・クリック済みのの状態
a:hover ・・・触れたときの状態
a:active ・・・クリックしたときの状態
表示例・2
スタイルシートの記述
<style type="text/css">
<!--
a:link { color: #000000; background-color: #FFFFEC; text-decoration: none}
a:visited { color: #000000; background-color: #E3E3E3; text-decoration: none}
a:hover { color: #000000; background-color: #F4EFAE; text-decoration: underline overline}
a:active { color: #000000; background-color: #E0D6E4; text-decoration: none}
-->
</style>

a:hover は、
文字色(color:)、背景色(background-color:)、上下線をつけています
a:link、a:visited、a:active は、
文字色(color:)背景色(background-color:)をつけ、下線を消しています(text-decoration: none)
カスタマイズいろいろ
<style type="text/css">
<!--
a:link {            } /*リンクの状態*/
a:visited {            } /*クリック済みのの状態*/
a:hover {            }/ *触れたときの状態*/
a:active {            } /*クリックしたときの状態*/
-->
</style>

          の中に入れるもので、いろいろカスタマイズできます。
中に入れるものは、{ 属性(プロパティ):(コロン) 値; (セミコロン) }と記述します。複数入れることもできますよ。代表的なものを以下にご紹介しますので、いろいろ試してみてくださいね。
文字の色 color: 色;
文字のサイズ font-size: サイズ;
背景色 background-color: 色;
余白 padding: サイズ;
マージン margin: サイズ;
リンクの下線を消す text-decoration: none;
取り消し線 text-decoration: line-through;
下線 text-decoration: underline;
ドット下線 border-color: 色; border-style: dotted; border-bottom-width:: サイズ;
上線 text-decoration: overline;
ドット上線 border-color: 色; border-style: dotted; border-top-width: サイズ;
上下線 text-decoration: underline overline;
ドット上下線 border-color: 色; border-style: dotted; border-top-width: サイズ; border-bottom-width:: サイズ;
※サイズは数字px(ピクセル)または数字pt(ポイント)で。
例) font-size: 10px; margin: 5pt;



■触れるとへこむリンク
マウスを重ねると、リンク指定した文字や画像がへこむように少し動きます。
「触れると変化するリンク」と同様にスタイルシートを使います。スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>

<body>
☆リンクは表示させたい部分に記述します☆
</body>

</html>

表示例
スタイルシートの記述
<style type="text/css">
<!--
a:hover {
visibility : visible;
float : none;
clear : none;
position : relative;
top : 1pt;
left : 1pt;
}
-->
</style>
top : 1pt; left : 1pt; のところでへこみ具合が調節できます。
文字や画像のリンクは普通に<body>区間に。

このページのトップへ
BACK HOME
ホームページできるかな
相対パス・絶対パス HTMLって? ホームページのなかみ ホームページはどこにある? 作成手順 作成サンプル 用意するもの ホームページ用素材 HPを公開!FFFTP 基本の小技集 コラム 特殊文字 記号のよみかた いろいろな色 タグの簡易プレビュー
Copyright(C) 2003-2005 laz All rights reserved.
当サイト内の無断使用及び無断転載を固く禁じます。