マジ

TIPS＆TRICKSを超えた 本気で使える テクニック

第 4 回

マウスオーバー自由自在
リンクにマウスを載せたときに文字の色を変えたり、背景色を付けたりするワザはすっかりお馴染みだ。CSSの機能であるhover疑似
クラスを利用したものだが、色を変える以上の使い方はなかなか思い付かないかもしれない。CSSのさまざまなプロパティーを組み合わせれば、これまで想像もできかったような効果も出せる。今回は、この「マウスオーバー」のテクニックをとことん追究してみよう。
HTML MANIAXで紹介したテクニックは

文：佐藤和人internet.impress.co.jp/maniax/でソースを公開！

JavaScriptなしでも「動き」は出せる！
マウスをリンクに載せたときに○○したいHTML MANIAX

リンクにマウスを載せたときに動きを出JavaScriptはめんどくさい

すには、2 つの方法がある。1 つは a 要素

<a href="maniax.html"にイベント属性を付けてJavaScriptを記述

onmouseover="……"

する方法で、もう1つはCSSのhover疑似

onmouseout="……">

クラスを使う方法だ。a要素にhover疑似クラスを付けたセレクター「a:hover」を使HTML MANIAX

えば、マウスを載せたときのリンクのスタイCSSですっきりルを変更できる。面倒なスクリプトなしで

a:hover { …… }もCSSの1行でページ全体のリンクの動きを変えられるのだ。
a:hoverを使うときの注意点は、CSSの注意点：リンク先になるa要素があるときは①リンク元になるa要素にだけスタイルを付ける
a:link:hover, a:visited:hover {仕様に忠実なネットスケープ6以降ではIEと動作が異なることだ。ネットスケープ6以
降では、name属性を指定してリンクのタ

color: white;ーゲットにしたa要素にもa:hoverが効いてbackground-color: black; }しまう。左の①のようにリンク元になるa要
素にだけhoverを付ける手もあるが、IEで②name属性を持つa要素のスタイルを元に戻すうまくいかないことがある。②のように

a[name]:hover, a[name]:active {name 属性を持つ a 要素のスタイルを別に

color: inherit;指定するのがおすすめだ。

background-color: transparent; }180 +++ internet magazine +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

1［ マウスオーバーのいろいろなワザ ］
まずは、hover疑似クラスを使った簡単なテクニックをいくつか紹介しよう。マウスを載せたときの色を変えたり、下線を付けたり消したりするページはよく見かけるが、hover疑似クラスの力はそれだけではない。

マウスオーバーの秘技
怒濤の4連発！
上線と下線を付ける
ソース①は、リンクにマウスを載せたときに、下線に加えて文字の上にも線① layout1-1.cssが引かれるようにする CSS だ。a 要素に text-decoration: noneを 指 定して、

a { text-decoration: none; }a:hover { text-decoration: underline overline;
background-color: #FFFFA0; }リンクの下線を消す。a:hover の textdecorationプロパティーには、underlineに加えてoverlineも指定することで、マウスを載せたときにリンクの上下に線が引かれるようになる。

リンクを揺らすソース②のCSSを使うと、リンクにマウスを載せたときに文字がへこむように右下に動く。a:hoverでpositionプロパティーをrelativeとし、leftとtopのプロ② tips1-2.html

パティーに動かす長さを指定すればいい。ここでは6ピクセルにしたが、自分

a:hover { position: relative; left: 6px; top: 6px;
background-color: #FFFFA0; }のページで使うときは、1 〜 2 ピクセル程度に抑えたほうがいい。

周囲に枠線を付ける
aのようなインライン要素にも、CSSの枠線が指定できる。ソース③のサンプルでは、マウスを載せたときに周囲に赤い点線が付く。a要素にページの背景色と同じ色の枠線を指定し、a:hoverで枠線の色を赤くしているだけだ。このワ③ tips1-3.html

ザに対応しているのはウィンドウズ版IE
5.5以降、マッキントッシュ版 IE 5、おa { text-decoration: none; border: 4px dotted #B0FFB0; }a:hover { border-color: red; }よびネットスケープ6以降。

頭に画像を付ける
ソース④は、リンクにマウスを載せるとハートの画像が文字の前に現れるというものだ。a:hoverには、backgroundプロパティーで背景画像を指定する。
no-repeatを加えれば、背景画像は1つだけ表示される。画像と文字がかぶらないように、a要素にはpadding-leftプ④ tips1-4.html

ロパティーで左に余白を空けておく。対応ブラウザーはソース③と同じだ。

a { text-decoration: none; padding-left: 16px; }a:hover { background: #FFFFA0 url(heart.gif)
no-repeat; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ internet magazine +++

181

2

［ マウスオーバーで画像を操作 ］
a要素の中にimg要素を置いて画像リンクを作れば、マウスを載せたときにJavaScriptで画像を切り替えられる。ありふれたワザだ。ところが、a:hoverを使えば、それと同じようなことがCSSだけでもできるのだ。

「a要素」をブロックにする
ソース①と②は、ID属性が「menu」の「p要素」の中に、マウスオーバーで画像が変化するリンクを置いたものだ。
ボタン型の画像を2枚用意して、CSSを使って切り替えるには、aとa:hoverに別々の背景画像を指定すればいい。ただし、それだけではボタンの画像がリンク の 大 きさに 収 まらない 。w i d t h とマウスを載せたときに画像を切り替えるのはJavaScriptでおなじみの効果。実はCSSだけでもできる。

heightのプロパティーで幅と高さを画像に合わせる必要がある。しかし、aのよ① tips2-1.html（CSS部分）

うな イン ライン 要 素 には 、w i d t h と#menu a { background-image: url(off.gif);display: block; width: 140px; height: 60px;
text-align: center; text-decoration: none;
font: bold 16px/54px Verdana; }#menu a:link{ color: white; }#menu a:visited { color: #FFC0C0; }#menu a:hover{ background-image: url(on.gif); }heightの効き目はない。
そこで、ソース①のように display プロ
パティーにblockを指定して、a要素の見た目を無理矢理divのようなブロック要素型にする。するとwidthとheightが効くようになり、リンクを画像の大きさにぴったり合わせられる。
さらにソース①では、リンクの文字が画像の中央に表示されるように、text-align② tips2-1.html（HTML部分）

プロパティーにcenterを指定している。
行の高さを54ピクセル（fontプロパティ<p id="menu"><a href="home.html">home</a>……</p>

ーの値の「54px」の部分）として、文字の上下位置も調整している。

横に並べるのは少し難しいぞ！
ソース①と②の方法では、aがブロック要素になるので、必然的にリンクが上下方向に並ぶことになる。aをインライン要素のままにして、画像リンクを左右に並べる方法はないだろうか。
ソース③と④は、透明な GIF 画像を画像を横に並べるのはちょっと難しい……。

利用して、背景画像を切り替える裏ワ③ tips2-2.html（CSS部分）

ザだ。ソース④のように a 要素の中に#menu a img { border-style: none; }#menu a img#home { background: url(off1.gif); }#menu a:hover img#home { background: url(on1.gif); }img要素で透明な画像を置く。ソース③のCSSではa要素の中のimg要素に背景画像を指定している。透明な画像に背景画像を付けているわけだ。
なお、筆者の環境では、IEでこのワ④ tips2-2.html（HTML部分）

ザを使うと、ときどきマウスを載せたときの画像が元に戻らなくなるという現象<p id="menu"><a href="home.html"><img id="home" src="trans.gif"
alt="Home" width="140" height="60"></a>……</p>

182 +++ internet magazine +++が見られた。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

3［ マウスオーバーでポップアップ ］
ここで紹介する2つのサンプルは、マウスを載せたときにリンクとは別の場所に画像や文字をポップアップさせるものだ。どう見てもJavaScriptを使っているとしか思えない。これがCSSだけでできるのだから驚きだ。

離れた場所に画像を出現させろ！
ソース①と②のサンプルは、リンクにマウスを載せると、リンク先をイメージした画像を画面右上に表示するものだ。
どうやってリンクとは別の場所に画像を表示させているのだろう。

マウスを載せると右側に画像が出現する。これもCSSを使ったマニアックなワザだ。

① tips3-1.html（CSS部分）

ソース②を見てみよう。a要素の中にはリンクのテキストに加えてimg要素で画像を置いている。この画像はソース①の「#menu a img」で widthと height#menu a img { display: inline; width: 0; height: 0;
border-style: none; }#menu a:hover { background-color: #FFD0D0; }#menu a:hover img { position: absolute;
right: 1em; top: 1em; width: 100px; height: 100px; }のプロパティーに 0 を指定しているた
め 、見 え なくなって い る 。
「#menua:hover img」で widthと heightに 幅と高さを指定することで、マウスを載せたときに画像が表示されるようになる。
このテクニックのミソは、マウスを載せたときのスタイルにposition: absolute② tips3-1.html（HTML部分）を加え、座標を指定して画像を配置し<p id="menu"><a href="profile.html">自己紹介<img src="profile.gif" alt=""></a>……</p>ていることだ。これで、a要素の中にある img 要素を好きな場所にワープさせられるようになる。

リンクの説明表示を自由自在に操れ！
ソース③と④では、マウスを載せるとリンクの説明が四角い枠の外に表示される。ソース②のimg要素の代わりに、ソース④ではa要素の中にspan要素を置く。ソース③では、「#menu a span」
でa要素の中のspan要素を非表示にすマウスを載せると下側にリンクの説明文が出る。これもCSSだとはなんとも驚きだ。

る。
「#menu a:hover span」ではリンク③ tips3-2.html（CSS部分）にマウスを載せたときに span 要素をdisplay: blockとして表示させ、座標を#menu { position: relative; }#menu a span { display: none; }#menu a:hover { background-color: gray; }#menu a:hover span { display: block;position: absolute; top: 3em; left: 0em;
background-color: #FFFFC0; color: black; }指 定して 動 かして い る 。 I D 属 性 が「menu」のp要素にはposition: relativeを指定しているので、座標の原点はp要素の左上になることに注意しよう。
このページで使ったテクニックは、次のサイトを参考にしたものだ。CSSを使った高度なデザインが紹介されている④ tips3-2.html（HTML部分）ので、ぜひ見てほしい。

<p id="menu"><a href="no1.html">第1回<span>ブラウザー振り分けでCSSを100%活用</span></a>Å……</p>インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

CSS/edge
www.meyerweb.com/eric/css/edge/+++ internet magazine +++183

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.