ホーム　＞　小技集　＞

ホームページの小技：その８（リンクをボタン風に！）

リンクをボタン風に改造出来ます。画像でリンクを作るよりも格段に軽くよりアクティブなページが作れ、しかも設置が簡単！
InternetExplorerでは少し上下の文字と被ってしまいますがセンス良く作ればもっときれいに出来るかも？．．．
注：マックではリンクが表示されません。
注：Netscape4.7以前ではリンクが効きません

広告

例）サンプル１をご覧下さい

以下をヘッダ部に記述します（ヘッダが解らない方はとりあえずタイトルの下の行に！）
<STYLE TYPE="text/css"> <!-- A{ color : #80ffff; text-decoration : none; border-width : 3px; border-style : outset; background-color : #0000ff; border-color : #0000ff; font-weight : bold; } A:HOVER{ color : #0000ff; text-decoration : none; border-top-width : 3px; border-style : outset; background-color : #00ffff; border-color : #00ffff; border-width : 3px; } --> </STYLE>
解説）
A{　　　　　　　のグループと
A:HOVER　　のグループに分かれているのが分かりますよね。
それぞれAは通常のリンクの状態、　A:HOVERはマウスポインタが上に来たときの状態を設定しています。

color : #80ffff;　　　　　　文字色
border-width : 3px;　　　　　枠の太さ
background-color : #0000ff;　背景の色
border-color : #0000ff;　　　枠の色
触るのはこれぐらいにしておきましょう。

例）サンプル２をご覧下さい

以下をヘッダ部に記述します（ヘッダが解らない方はとりあえずタイトルの下の行に！）
<STYLE TYPE="text/css"> <!-- A{ color : aqua; background-color : blue; text-decoration : none; border-width : 3px; border-style : outset; border-color : blue; font-weight : bold; } A:HOVER{ color : blue; background-color : aqua; text-decoration : none; border-width : 3px; border-style : outset; border-color : aqua; } A:ACTIVE{ color : blue; background-color : red; text-decoration : none; border-width : 3px; border-style : inset; border-color : red; } A:VISITED{ color : lime; background-color : teal; text-decoration : none; border-width : 3px; border-style : inset; border-color : teal; } --> </STYLE>
解説）
これは４つの状態を設定しています。
A{　　　　　　　通常のリンクの状態
A:HOVER{　　マウスポインタが上に来た状態
A:ACTIVE{　　リンクをクリックしたときの状態
A:VISITED{　　訪問済みのリンクの状態
サンプル１と同じ設定方法で変更できますがここでは少し違った方法で色を表現しています。

HTMLで定義されている色の名前
■ Black (#000000) ■ Gray (#808080) ■ Silver (#C0C0C0) □ White (#FFFFFF)	■ Red (#FF0000) ■ Yellow (#FFFF00) ■ Lime (#00FF00) ■ Aqua (#00FFFF)	■ Blue (#0000FF) ■ Fuchsia (#FF00FF) ■ Maroon (#800000) ■ Olive (#808000)	■ Green (#008000) ■ Teal (#008080) ■ Navy (#000080) ■ Purple (#800080)

ちょっとややこしくなりましたが頑張ってみて下さい。

ホーム　＞　小技集　＞