外部CSSで画像にリンクを貼りたい

まだCSS初心者ですので宜しくお願いします。

外部CSSに位置指定した「画像」にリンクを貼りたいのですが
いろいろ調べてもその方法がわかりません。
以下のタグにどのようにリンクの指定をすればよいでしょうか？

div#index{
margin-top:5px;
background:url(../img/oribox.gif) no-repeat right bottom;
}

また、HTMLにはどのように記述したらよいかも宜しくお願いいたします。

No.2 ベストアンサー 回答者： kappa-pa 回答日時： 2007/02/09 15:31

・backgroundに表示したい画像ファイル(../img/oribox.gif)のリンクならお書きになった書き方で適正だと思います。

ただしサーバでその場所にファイルが格納されていることが前提。

・アンカー<a></a>をつけたいと言われるなら、実体のあるテキストを置くか透明な画像でも置かない限りbackgroundにアンカーは無理。

この回答へのお礼

ややこしくてすみません。

先に表示した画像をクリックすると別のところへジャンプ！とさせたかったのです。

普通にＨＴＭＬで書いたほうが良いのですね。。。
ただその方法だと画像の細かな位置決めで困ってます。。。

お礼日時：2007/02/10 17:53

No.6 回答者： dezimac 回答日時： 2007/02/10 22:49

混乱されるようなら、CSSは下手に使わない方がいいでしょう。

ブラウザによってCSSの解釈に誤差があるので、ブラウザによっては思い通りに表示されない場合もありますよ。
特に最大勢力を誇るWindows版IEはCSSに問題が多々あるので、それに合わせると他のブラウザだとレイアウトが大きくずれる事があります。
理解して使えば、ある程度は防げますが。

既に他の方々が述べられているように、CSSは背景や文字色等の装飾等のデザインをするものなので、全てをCSSで表現する必要はありません。
今まで<FONT>や<B>等で色等を指定していたのや、<table>を表じゃなくてレイアウト目的の升目として利用していたのを、CSSでやると考えて下さい。
尚、段組み等の高度なレイアウトに関しては先に述べたようにブラウザによってズレ等が生じるので、CSSを理解しきれない内は<table>を使った方が安全です。
極端にいれば、文字の装飾とマージン（間隔）設定のみをCSSでやる。

意味のある画像の表示は<img>タグで。単なる背景画像（飾り）ならCSSで。
<img>タグで表示しても、CSSで位置等の微調整は可能です。というかそれがCSSの役目です。CSSは画像を表示するのが役目ではありません。

例えば、CSSで
img {
margin: 5px 20px 5px 10px;
}
とかすれば、画像の周囲の空きを調整出来ます。

この回答へのお礼

遅くなって申し訳御座いません
分かりやすい説明ありがとうございました！
CSSを使ってTABLEタグを消したい、というのもあったのですが
それは無理みたいですね。
ブラウザによって表示しきれない点を踏まえると
CSSの有効活用方法を間違っておりました。
どうもありがとうございました！

お礼日時：2007/03/16 09:46

No.5 回答者： MAN_MA_RUI 回答日時： 2007/02/10 11:25

時々誤解する方がいらっしゃるんですよねー^^;

確かにHTMLにあった多くの機能がCSSへと移行されていますが、それは見栄えを定義する要素のみです。
HTMLの機能が全てCSSに移行されたわけではありません。なんでもCSSで代用するって言うのは便利そうに見えて不便なこと。
リンクやらなにやらCSSにしてしまうとCSSが使えない環境下では何も表示されなくなるのです。

かなり大雑把に言うとHTMLで行うべきは段落分け、改行、リンク、通常の画像埋め込みなど、CSSで行うべきは配色、背景画像、枠のスタイルなどです。

それから、CSSを記述するものは普通、タグなんていいません。
タグに匹敵する一般的かつ広く通用した名称（俗称）は特になかったはずです。

この回答へのお礼

御回答有難う御座います。

なるほど。。。基本はＨＴＭＬでＣＳＳは補足と考えればよいのですね＾＾；
私はＣＳＳで行うものと考えておりました＾＾；；
ありがとうございました。

お礼日時：2007/02/10 17:48

No.4 回答者： noname#56851 回答日時： 2007/02/09 17:39

画像やテキストは画面を作る材料です、cssはそれらをどの様なデザインで表示するかを決める物なので、普通にHTMLで貼り付けるのがよいと思います。

この回答へのお礼

むむ。。。
やっぱりＨＴＭＬで楽に書いたほうが良いてことですよね。。。

ありがとうございました＾＾；

お礼日時：2007/02/10 18:01

No.3 回答者： dezimac 回答日時： 2007/02/09 15:34

何が何でも、画像とかはCSSで表示するようにしなければいけない訳じゃありませんよ。

普通にHTMLで、
<a href="○"><img src="○" alt="○"></a>
でいいのでは。

よく使われる手法だと、
<h1><a href="">見出し</a><h1>
として
h1 {
margin: 0px;
padding:0px;
text-indent: -1000em;
background: url("title.jpg") no-repeat;
}
h1 a{
display: block;
margin: 0px;
padding:0px;
width: 180px;
height: 25px;
text-decoration: none;
}

この回答へのお礼

なるほど。。。

ん～　ＤＩＶ要素などの中でも同じなのでしょうか？

div#index{
margin-top:5px;
background:url(../img/oribox.gif) no-repeat right bottom;
}
div a{
margin: 0px;
padding:0px;
}

HTMLでは
<div>
<a href=""></a>
</div>

と書けばよいのでしょうか？＾＾；；
こんがらがってきました。。。

お礼日時：2007/02/10 18:00

No.1 回答者： akuhijrwq 回答日時： 2007/02/09 15:30

cssでリンクをはらせるということはできません。

なぜhtmlでリンクするんじゃいけないのですか？？

この回答へのお礼

ＣＳＳの範囲が未だに理解できずにいたので。。。
結局基本はＨＴＭＬということなのですね？

お礼日時：2007/02/10 17:50