スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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

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

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


300_301_007_1.jpg

今回はCSSを利用してホバー効果をリンクに持たせる方法を勉強します。
1. お使いのtext editor(メモ帳など)で新規ドキュメントを作成し、下記の内容を書き出して下さい。

<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>
</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.上記のファイルをhover.htmlとして保存してください。このhover.htmlをブラウザで開くと、テキスト、リンクの跡にさらにテキストが表示されると思います。現時点では面白くないでしょうが、これからCSSスタイルを利用してこれらの表示方法を変更しましょう。

<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;
}
</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. この内容を書き足し、保存して、再度ブラウザで表示させると、リンク配色が通常の色からダークグリーンに変更されたことが分かるはずです。まず、<style>タグを<head>タグ内に配置しました。<style>タグ内ではa { } という文字を書くことで”a” タグのスタイル変更が可能になります。このスタイル内では色指定としてcolor に#007431を指定しています。各宣言の最後を”;”で終了しています。“a” タグを{}で囲んで宣言を完成します。CSSの学習を進めるうちに、これら一つ一つの意味の理解が深まるはずです。次にLink上にマウスを動かしたとき(hover状態のとき)の動作に対応するstyleを追加しなければなりません。

<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>


4. 記載内容を見ると、“a:hover” スタイルが追加されていることが分かります。これはa タグのコンポーネントにホバーオーバーがかかったときの状態を指定します。ここでは、色指定を#9A0319、深い赤色に変更するような内容になっています。この内容を保存し、ブラウザで表示させてみてください。ごらんのように、リンクの色がリンクにサイトがあったときに変化することがわかります。

<a href="http://www.webdesign.org/img_articles/8199/index_example.htm" target="_blank">結果の表示</a>

グッドラック!!


引用:Web Design Library著者:GreyCobra.com翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

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