CSSで指定した背景画像にリンクエリアを設定する方法。

Question

メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。
大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。

以下CSSのソースです。

#main_visual {
   background:url(../img/main_visual.jpg) no-repeat;
   width:666px;
   height:418px;
   text-indent:-9999px;
}  

#main_visual a{
　 display:block;
   width:338px;
   height:43px;
　 position:relative;
   top:324px;
   left:308px;
} 

上のように、666 X 418の画像の中に、
上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、
firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。

どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか？　毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか？^^;

abril · Accepted Answer

ANo.2です。お役に立てた様で良かったです。 > あと、htmlのほうは、 >

> ここに文言が入ってます。 >

> > これだけのシンプルなもんです。。そうでしたか。であれば、他の方のご指摘にもありますが、マークアップはulでされた方が妥当でしょうね。 ANo.2でのスタイルを、ulでマークアップする場合はちょっとした変更を加えるだけでOKです。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- （省略）

リンクより上のブロック

ここに文言が入ってます。

リンクより下のブロック

（省略） --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- ul#main_visual {←"ul"はなくてもいいです（以下同） position: relative; background: url(../img/main_visual.jpg) no-repeat; width: 666px; height: 418px; list-style: none; margin: 0; padding: 0; } ul#main_visual li { position: absolute; top: 324px; left: 308px; width: 338px; height: 43px; } ul#main_visual a { display: block; width: 100%; height: 100%; text-indent: -9999px; } --------------------------------------------------------------------- ANo.2からの変更点は：・#main_visualをulのマークアップに都合がよい様にディフォルトのリストスタイルや余白をリセット・aをliの子要素とする為、位置決めや縦横サイズはliで指定・aには親要素の幅と高さを継承させるだけです。リンクエリアとしている背景画像の部分には当然リンク箇所である事がわかる様な文言が明示されているなり、クリックを誘導する様なボタン的デザインがされているものと想定しています。

SAYKA · Answer

aは元々inline（block化してるけど）だから上位の text-indent:-9999px; の影響を受けてるだけじゃない？

一旦更にdivで囲ってみるか、文字を消したいなら visibility:hidden で対応してみるとか。

abril · Answer

> firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。

。

※ちなみに、質問者様が提供されたCSSのソースの"#main_visual a"のプロパティ指定の中に全角スペースが入ってます。もしオリジナルのCSSから”そのまま”コピペされたのだとしたら、Firefox等で挙動がおかしいのはそのせいである可能性が高いです。この位置での全角スペースの記述は認められていませんので、プロパティの解釈が無効になります。
以下はオリジナルには全角スペースが入ってない、単なるコピペの際のミス、という前提で話をしています。

質問者様のソースでそのまま再現しても、Firefox2/3、Safari3共に「(top:0 left:0)にリンクエリアがきてしまって」という状況にはなりませんが（DOCTYPE等が不明ですので、一応HTML4.01 StrictとXML宣言付XHTML1.1の両方のサンプルで試してみましたがいずれも同じでした）？

ただ、リンクエリアが#main_visualのボックスに対し、正確に"top: 324px; left: 308px; width: 338px; height: 43px;"となっているかというと、微妙にずれている様です。それは、ちょっと現在のCSSの指定におかしなところがあるからです。

もしも、#main_visualのボックス（この場合はdivでマークアップしてあると仮定します）の中に、リンクエリア以外の要素も含まれるのであれば、positionやtext-indentを指定するポイントが相応しくないと思います。以下は、その点を考慮し、且つリンクエリアが質問者様ご希望の各環境でも"top: 324px; left: 308px; width: 338px; height: 43px;"で表示される様に修正してみたサンプルです。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
（省略）
<body>
<div id="main_visual">
<p>リンクエリアより前に記述したブロック</p>

<a href="#">リンクエリア</a>

<p>リンクエリアより後ろに記述したブロック</p>
</div>
</body>
（省略）
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
#main_visual {
position: relative;←追加
background: url(../img/main_visual.jpg) no-repeat;
width: 666px;
height: 418px;
}
#main_visual a {
display: block;
position: absolute;←修正
top: 324px;
left: 308px;
width: 338px;
height: 43px;
text-indent: -9999px;←#main_visualではなくこちらに指定
}
---------------------------------------------------------------------

以上のサンプルで、IE6/7、Firefox2/3、Safari3で問題なくご希望通りの挙動になりますが。
本件程度のものであれば、ハックを駆使せずとも実現できるものと思います。ハックはあくまで最終手段なので…

リンクエリアより前に記述したブロック

リンクエリア

リンクエリアより後ろに記述したブロック

（省略） --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- #main_visual { position: relative;←追加 background: url(../img/main_visual.jpg) no-repeat; width: 666px; height: 418px; } #main_visual a { display: block; position: absolute;←修正 top: 324px; left: 308px; width: 338px; height: 43px; text-indent: -9999px;←#main_visualではなくこちらに指定 } --------------------------------------------------------------------- 以上のサンプルで、IE6/7、Firefox2/3、Safari3で問題なくご希望通りの挙動になりますが。本件程度のものであれば、ハックを駆使せずとも実現できるものと思います。ハックはあくまで最終手段なので…

ORUKA1951 · Answer

この場合、#main_visuaという、祖先ブロック内でabsolute;で位置指定をすべきです。その場合、祖先要素はposition:static以外でなければなりません。　また、アクセスビリティ・ユーザビリティの意味でポインターが乗ったときにリンクがあることを明示したほうがよいでしょう。　なお、これは余計かもしれませんが、画面表示のためだけに、わざわざ#main_visualという要素を作られているようですが、HTML/CSSの考え方からは、おかしいです。これは、単なるリンクですから、

等とマークアップして、@mediaをスクリーン用に指定しておくと、携帯やサーチエンジン、読み上げブラウザにも問題ありません。　もちろん、スタイルシートを解除しても意味のあるソースになります。 ★将来的(XHTML2.0)には、(Navigation List)という要素が加わるでしょう。　とりあえず、それらを含めてソースを示しておきます。　IEは、bodyやhtmlのmargin/paddingに対して解釈が異なるため、このブロック自体の位置は異なりますが、それは簡単にあわせることが出来ますので省きます。 Untitled

title

subTitle

トップページへ

CSSで指定した背景画像にリンクエリアを設定する方法。

aは元々inline（block化してるけど）だから上位の text-indent:-9999px; の影響を受けてるだけじゃない？

> firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。

この場合、#main_visuaという、祖先ブロック内でabsolute;で位置指定をすべきです。

ANo.2です。

この回答への補足

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング