ホーム > 小技集 >

ホームページの小技:その8(リンクをボタン風に!)

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

例)サンプル1をご覧下さい

以下をヘッダ部に記述します(ヘッダが解らない方はとりあえずタイトルの下の行に!)

解説)
A{       のグループと
A:HOVER  のグループに分かれているのが分かりますよね。
それぞれAは通常のリンクの状態、 A:HOVERはマウスポインタが上に来たときの状態を設定しています。

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

例)サンプル2をご覧下さい

以下をヘッダ部に記述します(ヘッダが解らない方はとりあえずタイトルの下の行に!)

解説)
これは4つの状態を設定しています。
A{       通常のリンクの状態
A:HOVER{  マウスポインタが上に来た状態
A:ACTIVE{  リンクをクリックしたときの状態
A:VISITED{  訪問済みのリンクの状態
サンプル1と同じ設定方法で変更できますがここでは少し違った方法で色を表現しています。
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)
ちょっとややこしくなりましたが頑張ってみて下さい。

<--前ページ ホーム 次ページ-->

ホーム > 小技集 >