リンクの装飾｜CSS辞典｜HTMLタグ・CSS

Home≫CSS辞典≫リンクの装飾

リンクの装飾

≪ CLASS の指定	【 HOME 】	基本余白の変更 ≫

Yahoo!ブックマークに登録

Google Bookmarks に追加

はてなブックマークに登録

livedoorに記事をクリップ

リンク装飾（サンプル）
Yahoo! japan	Yahoo! japan	Yahoo! japan
▼	▼	▼
Yahoo! japan	Yahoo! japan	Yahoo! japan
※ 上が通常の状態で、下が実際に効果を反映したサンプルです。

リンクの装飾（詳細情報）
対応	Internet Explorer 6 ↑ 　Netscape 7 ↑　　（ブラウザの対応）
字体	<style type="text/css"> <!-- a:link {★} a:visited {★} a:hover {★} a:active {★} --> </style>
指定	★の部分に下記の太字の効果を指定していきます。複数の効果を指定する場合は , で区切ってください。「a:link」まだ訪れていないリンク。「a:visited」一度訪れたことがあるリンク。「a:hover」カーソルがリンクの上にあるとき。「a:active」リンク先をクリックしたとき。
効果	リンク用の文字色や装飾を指定できます。
例１	a:link {color:#ff0000;}　　（リンクの色を指定）
結果	サンプル用の文字
例２	a:link {background-color:#ffaaaa;}　　（リンクの背景色を指定）
結果	サンプル用の文字
例３	a:link {text-decoration:none;}　　（リンクの下線を消す）
結果	サンプル用の文字
例４	a:link {text-decoration:underline overline;}　　（リンクに上下線をつける）
結果	サンプル用の文字
解説	a:hover の部分だけに背景色などを指定すると、リンク部分にマウスのカーソルが重なったときだけ背景色を表示したりできます。

≪ CLASS の指定	【 HOME 】	基本余白の変更 ≫

素材の森

素材NAVI

素材R

素材・壁紙

イラスト素材

素材・作成

素材ランキング

無料素材リンク

素材ファン

無料ＨＰ素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索

サイトの説明

素材使用方法

質問集/用語集

作成練習場

カラー見本