- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
- HTML&CSS ( 41 )
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
- Flash ( 31 )
- 3D ( 1 )
- サイトメンテナンス ( 39 )
- サイト紹介 ( 8 )
毎週金曜日に発行しています
テクニック
CSSによるホバーリンク(2) 
投稿日：2006年6月13日 レベル：初級 ソフトウェア：
CSSを使ってhoverリンクを作成する方法を知るために色を変更する以外の方法について勉強しましょう。
1.ここで作成する内容を示します。
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
}
a:hover {
color: #9A0319;
}
</style>
</head>
<body>
This is my Text.
<a href="http://www.greycobra.com">
This is a Link to GreyCobra.com
</a>. Here is some more text.
</body>
</html>
2.aタグに2箇所の記載があることが分かります。一つ目の記述は単純にaと記載されており、次のものは a:hover と記載されています。現在までわれわれは単純に色だけを変更してきました。以下に示す文章をコードすることでマウスホバーがリンク上に来ない限り下線を表示させないようにします。
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
text-decoration: none;
}
a:hover {
color: #9A0319;
text-decoration: underline;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>
3.この内容を保存し、インターネットブラウザで開いてみてください。ご覧のとおり、マウスホバーによりリンクにサイトがあわない限り下線が表示されません。次のようなことも可能になります。
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
text-decoration: none;
font-weight: bold;
font-family: arial;
font-size: 10px;
}
a:hover {
color: #9A0319;
text-decoration: overline underline;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>
4.上記の内容を保存し、インターネットブラウザで開くと、リンクの表示形式が非常に変更されたことが分かります。望みの形式を得るまでこれらの周辺の効果をいじってみてください。
グッドラック！
引用:Web Design Library著者:GreyCobra.com翻訳:atuk
スポンサードリンク
