みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssを使ったロールオーバについて どちらの記述が良いでしょうか?

cssを使ったロールオーバについて どちらの記述が良いでしょうか?

cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。
----------------------------------------------------------------------
ul.menu { margin:0px 0px 25px 0px;
padding:0px;
clear:both;
float:left;
width:200px;}

ul.menu li {float:left;
width:100px;
display:inline;
text-indent:-9999px;
overflow:hidden;
ist-style:none;}

ul.menu li a {display:block;
width:100px;
height:50px;}

li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;}
li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;}
li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;}
li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;}

<ul class="menu">
<li class="menu1"><a href="a.html" title="a">a</a></li>
<li class="menu2"><a href="b.html" title="b">b</a></li>
</ul>
----------------------------------------------------------------------
表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか?と言われ、下記のように書き直しました。
----------------------------------------------------------------------
#menu { width:200px;
height:50px;
margin : 0px 0px 25px 0px ; }

#menu h2 {width:100px;
height:50px;
margin:0;
float:left;}

#menu h2 a {display:block;
width:100px;
height:50px;
background-image:url(image/menu.gif) ;}

a.menu1 { background-position: 0 0 ;}
a:hover.menu1 { background-position: 0 -50px ;}
a.menu2 { background-position: -100px 0 ;}
a:hover.menu2 { background-position: -100px -50px;}

<div id="navi">
<h2><a href="a.html" class="menu1" title="a"></a></h2>
<h2><a href="b.html" class="menu2" title="b"></a></h2>
</div>
--------------------------------------------------------
こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。
とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。

投稿日時 - 2010-09-09 19:09:24

QNo.6170458

困ってます

質問者が選んだベストアンサー

<a>タグの中身は、SEO的にもアクセシビリティ的にもリンク先の内容を説明するテキストが入って然るべきなので、前者で宜しいと思います。

IE7(他ブラウザも)でスクロールバーが消すには以下のように記述します。
html{overflow:hidden;}

投稿日時 - 2010-09-09 20:27:37

お礼

回答ありがとうございます。

やはり<a>タグが空なのはよくないんですね…。
overflow:hidden;のことも教えてくださってありがとうございます!
勉強になりました!

投稿日時 - 2010-09-10 21:28:20

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問