CSSでのリンク指定（？）

質問

現在、外部ＣＳＳで、<h1>タグの背景にタイトル画像を表示するように設定しています。
ＨＴＭＬ上の<h1>タグ内では、タイトルに値するテキストを入れていますが、ブラウザの表示できない所においやってあります。

その表示されているタイトル画像（h1で表示している部分）に他ページへのリンクを設定したいのですが、こうした場合のリンク設定はどのようにすればよろしいのでしょうか？

ＣＳＳ内で設定することは可能なのでしょうか？

それとも、ＨＴＭＬ上でなんらかの形でリンク設定を行うものなのでしょうか？

よろしくお願いいたします。

回答No.3

taba · ベストアンサー

そもそも文字を表示されないところにおいやっているという考え方は間違っていますね。でも、正直画像を表示したいときは悩ましいです。私も同じようなケースで、少し調べたりして、今のところこんなやり方をしています。参考までに。
<h1><a href="url"><span>タイトル</span></a></h1>
CSS側では、
h1 a{
　display:block;
　width:適宜;
　height:適宜;
　background: url(http://～) no-repeat 0px 0px;
}
h1 a span{
　display:none;
}
こんな感じです。span自体はマークアップ上不適切だとは思うんですが、これが今のところ一番ましなのではないかと思っています。
Aタグの背景に画像を入れていて、それをブロック化しているので、画像サイズと一致させれば違和感はないと思います（背景画像はリンクの対象になりません）。

お礼

なるほど！
ありがとうございました。

回答No.2

UKY

そもそもなぜタイトル画像が CSS で表示されるようになっているのでしょうか。
たとえ画像とはいえタイトルという文書の重要な構成要素が「スタイル」に過ぎないのはどうかと思います。
文書の一部なのですから、<img> などによって文書そのものに含まれているべきだと思うのですが。

> ＣＳＳ内で設定することは可能なのでしょうか？

CSS はあくまでもスタイルシート、見た目をいじくるための代物に過ぎません。
文書内にリンクを生成するには、文書そのもの (HTML) を書き換える必要があります。

お礼

ありがとうございました。

回答No.1

arenani_sorenani

普通に

<a href="**.html"><h1 style="background-image: url(**.gif);"></h1></a>

でH1全体がリンクされると思いますが・・・

お礼

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

h1全体にリンクをかけますと、

IEでいえば、通常リンク指定のある画像の上に、マウスをオーバーすると、「指マーク」にカーソルが変更すると思うのですが、

h1に背景画像を設定して、h1全体にリンクをかけると、
カーソルに変化がないようなのですが、こちらは何らかの設定によるものなのでしょうか？

お手数をおかけして申し訳ありませんが、よろしくお願いいたします