このWebページ(http://mb.softbank.jp/mb/special/covercolle/rock/)の左下にあるバナー画像は背景に指定されているようですが、そのファイルがHTMLソースに見当たりません。どういう仕組みか教えてください。

バナー画像: http://mb.softbank.jp/mb/special/covercolle/rock/img/bg_related_info1.png

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2011/09/06 00:37:19
  • 終了:2011/09/06 01:41:30

ベストアンサー

id:hatest No.2

‫て‫す‫と‫回答回数4ベストアンサー獲得回数12011/09/06 01:00:15

Cherenkovさんの回答で正解が出てますが、詳しく書くと

CSSでdiv.related-info1に背景画像と画像が見えるように幅・高さを指定しています。

また、そのdivの中にあるアンカー(aタグ)にも、CSSでdisplay:block;

+幅・高さを指定して画像部分がクリックされたらリンクが効くようにしています。

アンカーの文字はtext-indent: -9999px;で画面外に飛ばして見えないようにしています。

IE8以降ならF12キーで起動する開発者ツールで調査できます。

id:fmht7

hatestさん、ありがとうございます!

IE8で開発者ツールで見れました。

またGoogle Chromeの要素の検証でもいけますね。

勉強になりました。

P.S.

最近ごぶさたですが id:hatehahaiku さんにもよろしくお伝えください。^^

2011/09/06 01:41:10

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/09/06 00:40:40

div.related-info1のcssにbackground-imageが設定されています。

http://mb.softbank.jp/mb/special/covercolle/rock/substyle.css


こういった調査はfirebugを使うと簡単ですよ。

id:fmht7

ありがとうございます!

当方Web1.0以前で時間が止まっており悩んでいました^^;

firebug導入検討してみます。

2011/09/06 01:15:43
id:hatest No.2

‫て‫す‫と‫回答回数4ベストアンサー獲得回数12011/09/06 01:00:15ここでベストアンサー

Cherenkovさんの回答で正解が出てますが、詳しく書くと

CSSでdiv.related-info1に背景画像と画像が見えるように幅・高さを指定しています。

また、そのdivの中にあるアンカー(aタグ)にも、CSSでdisplay:block;

+幅・高さを指定して画像部分がクリックされたらリンクが効くようにしています。

アンカーの文字はtext-indent: -9999px;で画面外に飛ばして見えないようにしています。

IE8以降ならF12キーで起動する開発者ツールで調査できます。

id:fmht7

hatestさん、ありがとうございます!

IE8で開発者ツールで見れました。

またGoogle Chromeの要素の検証でもいけますね。

勉強になりました。

P.S.

最近ごぶさたですが id:hatehahaiku さんにもよろしくお伝えください。^^

2011/09/06 01:41:10
  • id:fmht7
    おふたりとも、短時間に回答いただきありがとうございます。
    謎が解けすっきりしました。

    ところで、通常の画像リンク(img src)でなく、このようにbackground imageとして
    さらにcssで指定するのは何か理由があるのでしょうか?

    自分が想像するに
    ・画像ファイルをダウンロードや他で引用されにくい
    ・ウィンドウがリサイズされても乱れにくい
    などがあるのかなと思います。
  • id:hatest
    通常の画像リンク(img)でなく、わざわざbackground-imageとしてcssで指定するのは
    モバイル版や印刷用のCSSを用意すると、同じHTMLで違う用途に使えたりするからじゃないでしょうか。
    または、ただのコーダーの趣味。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません