スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSSによるホバーリンク(2)

CSSによるホバーリンク(2)

投稿日:2006年6月13日   レベル:初級    ソフトウェア:DreamWeaverGoLiveFrontPage


300_301_008_1.jpg

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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング