CSSでロールオーバーのやり方を教えてください。

質問

はじめまして。
現在CSS勉強中の者です。
初心者サイトには2つ分画像一枚にして移動させるようなことが書いてありましたが、これ以外に方法はありますでしょうか？
なければこの方法で作ろうと思うのですが、すでにオンマウス時とオフマウスの時の画像を別々に作っていますので、こちらでマウスオーバーさせる方法があればうれしいです。

htmlは以下のように記述しています。

<ul>
<li><a class="home" href="index.html">home</a></li>
<li><a class="menu" href="menu/index.html">menu</a></li>
<li><a class="access" href="access/index.html">access</a></li>
<li><a class="coupon" href="coupon/index.html">coupon</a></li>
<li><a class="rec" href="menu/index.html#recom_item">rec</a></li>
<li><a class="qa" href="qanda/index.html">qa</a></li>
<li><a class="contact" href="contact/index.html">contact</a></li>
<li><a class="recruit" href="recruit/index.html">recruit</a></li>
<li><a class="company" href="company/index.html">company</a></li>
<li><a class="school" href="school/index.html">school</a></li>
</ul>

これはとあるサイトを参考にしたのですが、なぜか<a>○○○</>の中の文字が表示されていません・・・これもわからずじまいでした。

基本的なCSSは理解しているような気がしてたんですが・・・
どうかご教授よろしくお願いいたします。

回答No.3

abril · ベストアンサー

> 現在CSS勉強中の者です。
と書いてらっしゃるのに、

> 現在、私が作ったCSSはおそらく間違いだらけだと思い書きませんでした。
> できればサンプルのような形で教えていただければ幸いに思います。
という姿勢では、「勉強」にならないのでは？何を覚えるにしても、トライ＆エラーを繰り返して行くしかないと思いますが。私自身、何年もその積み重ねでCSSもまあそこそこあれこれと使いこなせる様になりましたが、それでも今でも、こんな考え方があったのか、と他人のソースを見てうならされる事があったり、自分なりに更なる改良案を思いついたり、と、常に進行形です。

手厳しいと思われるのを承知で言わせて頂きますが、人に何かを教えてもらいたいのであれば、間違いだらけのものを見られるのが恥ずかしいから…ではだめです。間違いがあってうまく行かないのなら、どこがどの様に間違っているのかを指摘を受け、理解しなければ、身につきません。この質問内容からするに、残念ですが「基本的なCSSは理解して」いるレベルではまだない、と思われます。

とにかく、No.1の回答者様もおっしゃっている様に、提示すべき情報が不足しています。”最低限”問題の箇所の<ul>、<li>、<a>に対するCSSの現在の指定をきちんと明らかにして下さい。a:hoverを利用したこの手のロールオーバーの実現方法はいくつかあり、No.2の回答者様の様な方法も含め、かなりポピュラーな小技の一つですが、質問者様のやろうとしている事がイメージできませんと適切なアドバイスもできません。

> 中の文字（homeとかmenu）が表示されないようにする方法もわからなくて
とありますが、メニューの文字部分はテキストとして表示させて背景画像だけをon/offで切り替えたい、という事ではなく？？「オンマウス時とオフマウスの時の画像を別々に作って」とあるのは、文字部分も含めて画像にしてあるものを背景画像として扱い、<a>中のテキストは<a>の中を空にしない為だけに記述、という事ですか？もし後者だったらわざわざ背景画像にせずとも単なる<img>タグでHTML内に記述して、JavaScriptを使った方が早いのでは？

ちなみに「2つ分画像一枚にして移動させる」というのは多分positionを使った指定だと推測します。positionでの指定はそのブロックの前後関係によっては表示が思う様に行かない事もありますので、positionというプロパティをきちんと理解していないと難しい場合もありますのでご注意下さい。

お礼

ありがとうございます。

おっしゃる通りです。補足に該当箇所のCSSとHTMLを書かせていただきます。
文字部分も画像にして作ってあります。ですので<a></a>の中を空にしたくないためにこのような手法を使ってみたいと思いました。
javascriptだったらなんとかできるのですが、一度CSSでも試してみたいと思い、各当していました。

どうかよろしくお願いいたします。

補足

******HTMLになります*******

<div id="contents"><img src="img/contents.gif" width="180" height="30" />
<ul id="menu">
<li><a class="home" href="index.html" title="home">home</a></li>
<li><a class="menu" href="menu/index.html">menu</a></li>
<li><a class="access" href="access/index.html">access</a></li>
<li><a class="coupon" href="coupon/index.html">coupon</a></li>
<li><a class="rec" href="menu/index.html#recom_item">rec</a></li>
<li><a class="qa" href="qanda/index.html">qa</a></li>
<li><a class="contact" href="contact/index.html">contact</a></li>
<li><a class="recruit" href="recruit/index.html">recruit</a></li>
<li><a class="company" href="company/index.html">company</a></li>
<li><a class="school" href="school/index.html">school</a></li>
</ul>
</div>

*****CSSになります*****

ul#menu {
　　list-style:none;
width:100%;
padding-left:0px;
margin-left:0;
list-style: none;
margin-top: 0px;
text-indent: -500px;

}
a.home {
width: 180px;
height: 30px;
background-image: url(img/menu1.gif);
display: block;
margin: 0;
border-bottom: #F3F3F3 solid 1px;
}
a:hover.home {
background-image: url(img/menu3.gif);
width: 180px;
height: 30px;
}

a.menu {
width: 180px;
height: 30px;
background-image: url(img/menu2.gif);
display: block;
margin: 0;
border-bottom: #F3F3F3 solid 1px;
}

回答No.9

abril

No.6での回答部分以外での、CSSの記述に関するアドバイスです。

●id属性とclass属性の名前はだぶらない方が混乱しないでしょう。"ul#menu"の中に"a.menu"が出てくるなど、かなり紛らわしいです。
●コピペのミスかとは思いますが先程の回答内で指摘した様に、一つのid/class内でプロパティを二重に指定しない様に。もし対立する様な指定がしてあった場合は、より後の記述が有効になりますのでご注意を。
●同じプロパティは一括指定した方がすっきりします。上記で言えばmargin-leftとmargin-bottomにわざわざ分けるのではなく、"margin: topの値 rightの値 bottomの値 leftの値;"といった具合です。もし上下左右のマージン全てが不要なら"margin: 0;"の一行で済みますし。
●共通する指定と個別の指定を整理しましょう。今回の"ul#menu"内の<li>ごとのメニューは、background-imageのパス以外は同じスタイルを持っています（よね？）。ということは、その部分以外はclassごとに重複して指定しなくても、まとめられるのです。質問者様の現在の指定に最低限の改良を加えるとしたら、下記の様に整理できるかと思います。

ul#menu a {
display: block;
width: 180px;
height: 30px;
margin: 0;
border-bottom: #F3F3F3 solid 1px;
}
ul#menu a.home {
background-image: url(img/menu1_off.gif);
}
ul#menu a.home:hover {
background-image: url(img/menu1_on.gif);
}
ul#menu a.hogehoge1 {
background-image: url(img/hogehoge1_off.gif);
}
ul#menu a.hogehoge1:hover {
background-image: url(img/hogehoge1_on.gif);
}
（以下同様で繰り返し）

それから、一応先程は「質問者様のやりたい方法論で実現させる」為の回答をしましたが、結論から言うと単にメニューをロールオーバーさせる為だけに”敢えて”このやり方をするメリットが何もない…と思えるのですが。
仮に、現在のやり方を【方法論1】としておきます。
メニューの文字部分をHTML側でテキストとして記述し、”共通の”on/off背景画像をa:hoverを利用して表示を切り替える、というやり方であれば、用意する画像も2種類で済むのでメニューが増えたり文字が変わったりしても新たに画像を作成する手間も省け、CSSでも各メニューごとにclassを分けて設定する必要もなくなり、JavaScriptを使わないロールオーバー効果を得る為の実用的な方法論として、HTML側にもCSS側にも何も矛盾するところはない考え方です。これを【方法論2】とします。
※ちなみにテキストの色もon/offで切り替えたいのであればaとa:hoverに更にcolorに関する指定を加えれば可能です。
しかし、今回の様に”文字部分も含めたon/off画像をメニューの数の分だけ用意する”となると、メニューの構成内容が変わる度に画像もCSSも修正しなければならないので前者の様なメンテナンスの手間を省く効果もなく、CSSもメニューの数の分だけclassを用意するので煩雑です（上記の改良案の様にまとめて書いたとしてもです）。JavaScriptを使用したくないという事だけが問題なのであれば【方法論1】で充分な筈です。
もしも、「JavaScriptを使用したくないし、テキストが表示されることでレイアウトが固定できなくなる可能性を残すのは嫌」という理由だったとしても、”背景を透過したor最小限の背景を含めて切り抜いた文字部分の”画像を作成し、HTML側の<a>タグ内のコーディングをテキストではなくこれらの文字画像に差し替える、という考え方の方が妥当でしょう。これを【方法論3】とします。
【方法論3】は文字画像が背景を透過できない場合は【方法論1】と同じだけ画像を用意／メンテナンスしなければなりませんが、CSSでの記述は【方法論2】と同様で済みます。文字画像が背景を透過でき更に文字色の部分にもon/offでの区別をつける必要がないのであれば必要な画像の数は半分になります。よって、【方法論1】は【方法論3】と比較しても分が悪いと思われます。

以上、長くなりましたが、今一度、ご自分のやりたい事が果たして「最適」な方法論なのかどうかという事を再考してみることをおすすめ致します。

お礼

皆様多くの解答本当に、本当にありがとうございました。
是非、今後の参考にさせていただきます。

といいますか、かなり参考になりました。

また、abrilさん、すみません。皆様へのお礼の場をお借りいたしました。

皆さん本当にありがとうございました。

回答No.8

kuzumiHK

おっと・・・abrilさんのNo6の回答とかぶってますね・・・失礼しました。

回答No.7

kuzumiHK

割り込みですみません。
即興で作ったのでブラウザチェックなどはしていませんが、
例えば、テキストだけspanで囲うなどして、
display:noneしてしまうというのはいかがでしょう。
（スタイルはlinkとhoverのみで超手抜きです…）

<ul>
<li><a class="home" href="index.html"><span>home</span></a></li>
</ul>

li{
list-style:none;
}

a{
display: block;
width:200px;
height:50px;
}

.home:link{
background-image:url(home.gif);
}
.home:hover{
background-image:url(home2.gif);
}

span{
display:none;
}

回答No.6

abril

色々と…問題はありますが、とりあえず提示されたCSSをできるだけ活かしたまま、質問者様のやりたい方法論を実現させる、という観点でお答えします。

ul#menu {
（略）
}
●text-indentは不要
（本件には影響は及ぼしませんがlist-styleがだぶって指定されています）

a:hover.home {
（略）
}
●記述ミスです。"a.home:hover"が正しいです。詳細は省きますので「CSS　疑似クラス」とかのキーワードでググるなどして、このあたりを正しく理解しておいて下さい。

とりあえずこの2箇所を修正しただけでも、マウスオーバー／マウスアウトでon/off画像はロールオーバーされる様になりましたし、クリックも勿論できます。その他のa.hogehoge1、a.hogehoge2…のクラスについては背景画像のパス部分が変わる以外は全て同様の指定の繰り返しとなります。

ただし、この方法論では、on/off画像部分はあくまで<a>タグの要素（この場合は"home""menu"というテキスト部分）に対する”background”として指定されているので、前者（前景）が後者（背景）の上に表示されるのは当然の結果となり、質問者様の望む様な「中の文字（homeとかmenu）が表示されないようにする」という状態は、HTML側のコーディングを若干変えないと実現は無理ではないかと思われますが…参考にされた「とあるサイト」のオリジナルのHTMLコーディングとCSSの記述をこちらが知り得ない以上、断言はできませんが、例えば：

<li><a class="home" href="index.html"><span>home</span></a></li>

という様に、<a>の中のテキストを更に何らかのタグ（と言っても<span>ぐらいしか入れ子にできない筈ですが）で囲っていませんでしたか？仮に上記の様にコーディングしてあれば下記の様にCSSに記述することでテキスト部分を非表示にできます：

ul#menu a span {
display: none;
}

とりあえず試してみて下さい。
長くなりましたので、直接の回答以外の「問題点」を分けて投稿します。

回答No.5

goldfox

＞中の文字（homeとかmenu）が表示されないようにする方法もわからなくてこちらで質問させていただきました

テキストを入れるのではなく、透明画像を入れればよいです。
その画像にalt属性（とtitle属性）で「home」などと書いておけば、
画像が表示されないブラウザではalt属性で何のリンクかが分かります。

回答No.4

SAYKA

>サンプルのような形で教えていただければ
残念だけどそれだとただの丸投げの質問になるから答えてあげられないんだよね。

とりあえずaで囲ってある文字をimgにして
img:hover
じゃない？

回答No.2

Dorohedorer

CSSでマウスオーバーのようなものをやりたいということですね。
その場合ですと、対象となるaタグをdisplay:block;によってブロック要素にして、大きさなどを決め・・・とやって、マウスがリンク上にある時とない時で背景画像を変えるというわけです。

以下のサイトが参考になるかと。
http://www.aboutworks.com/shokodei/diary/doc/over/

回答No.1

SAYKA

？？？
画像のような話をしていてcssも書いてないし何をしたくて、どう違っているのかがさっぱりわからないんだけど・・・？

とりあえずbackground-imageでやりたいって事かな？
http://www.tohoho-web.com/css/reference.htm#hover

お礼

ありがとうございます。

すみません・・・background-imageを想像していました。
普通に背景に指定しただけではクリックできない背景だけの画像しか表示されませんでした。

また、中の文字（homeとかmenu）が表示されないようにする方法もわからなくてこちらで質問させていただきました。

現在、私が作ったCSSはおそらく間違いだらけだと思い書きませんでした。
できればサンプルのような形で教えていただければ幸いに思います。

どうかよろしくお願いいたします。