電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：blueman918
  • 質問日時：
  • 回答数：4件

メインビジュアルとして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用のハックってまだ使えたりするんでしょうか？^^;

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： abril
  • 回答日時：

ANo.2です。


お役に立てた様で良かったです。

> あと、htmlのほうは、
> <div id="main_visual"><!--MAIN VISUAL-->
> <a href="https://www.rink.com">ここに文言が入ってます。</a>
> </div><!--MAIN VISUAL-->
>
> これだけのシンプルなもんです。。

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

<ul id="main_visual">
<li><a href="#">ここに文言が入ってます。</a></li>
</ul>

<p>リンクより下のブロック</p>
</body>
（省略）
---------------------------------------------------------------------
【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には親要素の幅と高さを継承させる

だけです。リンクエリアとしている背景画像の部分には当然リンク箇所である事がわかる様な文言が明示されているなり、クリックを誘導する様なボタン的デザインがされているものと想定しています。

この回答への補足

度々ご丁寧にご説明頂き、恐縮です＞＜
ほんと、大変ためになりました！ありがとうございます！！
また、改めてCSSの奥深さというか、楽しさ？wに触れましたよー。
ありがとうございます！

補足日時：2009/02/22 14:28
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

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


その場合、祖先要素はposition:static以外でなければなりません。
　また、アクセスビリティ・ユーザビリティの意味でポインターが乗ったときにリンクがあることを明示したほうがよいでしょう。

　なお、これは余計かもしれませんが、画面表示のためだけに、わざわざ#main_visualという要素を作られているようですが、HTML/CSSの考え方からは、おかしいです。これは、単なるリンクですから、<ul><li><a href=""></a></li></ul>等とマークアップして、@mediaをスクリーン用に指定しておくと、携帯やサーチエンジン、読み上げブラウザにも問題ありません。
　もちろん、スタイルシートを解除しても意味のあるソースになります。
★将来的(XHTML2.0)には、<nl>(Navigation List)という要素が加わるでしょう。
　とりあえず、それらを含めてソースを示しておきます。
　IEは、bodyやhtmlのmargin/paddingに対して解釈が異なるため、このブロック自体の位置は異なりますが、それは簡単にあわせることが出来ますので省きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
@media screen{
ul#navigation_Link {
position:relative;
background:url(../img/navigation_Link.jpg) no-repeat;
width:666px;
height:418px;
padding:0px;
border: 1px solid red;
}
ul#navigation_Link li{
display:block;
width:338px;
height:43px;
position:absolute;
top:324px;
left:308px;
padding:0px;
border:1px solid green;
}
#navigation_Link li a{
position:relative;
top:-4px;
left:-4px;
display:block;
margin:0px;
border:4px solid transparent;
width:100%;
height:100%;
text-align:center;
text-decoration: none;
}
#navigation_Link li a:visited{
border-style:outset;
border-color:transparent;
}
#navigation_Link li a:hover {
border-style:outset;
border-color:gray;
}
#navigation_Link li a:active {
border-style:inset;
border-color:gray;
}

#navigation_Link li a span{
visibility:hidden;
}
}
-->
</style>
</head>
<body>
<h1>title</h1>
<h2>subTitle</h2>
<ul id="navigation_Link">
<li><a href="./index3.html"><span>トップページへ</span></a></li>
</ul>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKAさん！教科書のようなご丁寧なアドバイス！！とってもためになりましたっ！！本当にありがとうございます！
＞携帯やサーチエンジン、読み上げブラウザにも問題ありません。
なるほど。。そこまで考慮できて、一人前ですよね。。
今回は純粋にソース以外にもCSSに対して色々考えさせられました、ありがとうございました！

通報する
お礼日時：2009/02/22 14:32

No.2

  • 回答者： abril
  • 回答日時：

> 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で問題なくご希望通りの挙動になりますが。
本件程度のものであれば、ハックを駆使せずとも実現できるものと思います。ハックはあくまで最終手段なので…
    • good
    • 0
    • 件
通報する
この回答へのお礼

abrilさん、とってもご丁寧なお答えありがとうございました！！
abrilさんのおかげで解決致しました！！！

全角は、、ハイ、コピペミスです^^;

あと、htmlのほうは、
<div id="main_visual"><!--MAIN VISUAL-->
<a href="https://www.rink.com">
ここに文言が入ってます。
</a>
</div><!--MAIN VISUAL-->

これだけのシンプルなもんです。。
なので、
＞リンクエリア以外の要素も含まれるのであれば
入ってない、ことになりますよね？

なるほど、、、
relativeを親ボックスにかけておいて、
子ボックスに、absoluteで指定する。。。

よくよく考えてみれば、確かにそうですよね。。
あー、、、リンクエリア以外の、ボックスレイアウトではたまにこうやってレイアウトしてましたが、そうですよね、、リンクエリアもこうやって作ればクロスブラウザーのためにpaddingやら、marginやらで悩む必要や、ハックを使用する必要はないんですよね。。これからそうしようー！！
（以前、ハックは最終的手段だから、と同じことを言われました^^;)
今回は、本当にためになりました！！！質問させて頂いてよかったです。
本当にありがとうございました！

通報する
お礼日時：2009/02/17 14:51

No.1

  • 回答者： SAYKA
  • 回答日時：

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



一旦更にdivで囲ってみるか、文字を消したいなら visibility:hidden で対応してみるとか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

SAYKAさん、お答えありがとうございます。
visibility:hiddenだと、文言だけでなく、背景画像も消えてしまい。。。
text-indentってSEO的にも色々議論がわかれるところですけどね。。色々と研究してみたいと思いますー、ありがとうございます。

通報する
お礼日時：2009/02/17 14:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報