--
.bbb{BACKGROUND: url(1.gif) #333333 no-repeat; width: 200px}
.bbb:hover{BACKGROUND: url(2.gif) #333333 no-repeat;width: 200px}
--
<A class=IbbbI href=IurlI>文字列</A>
--
としていますが、URLリンクの大きさが画像の幅にならず、文字列の幅になります。
URLリンクの幅を画像ファイルの幅(200px)にする方法を教えてください。
No.1
175
29
16pt
http://www.mozilla.gr.jp/standards/webtips/webtips0030.html
非置換インライン要素とwidth、heightプロパティ - Web標準普及プロジェクト
A のように inline な部分では width が利かないそうです。
いまのところ DIV などを使う (あるいは ”display: block;” にする) しかないと思います。
CSS 2.1 では ”display: inline-block;” という指定もできるそうです。
というわけで、改行が入ってもいいなら
「display: block; を入れる」が回答です。
それがいやなら前後にスペースを入れるとか文字を大きくするとか、でしょうか。
気持ち悪いですが。
No.2
260
16pt
http://www6.plala.or.jp/go_west/nextcss/ref/prp/dsp_n_ps/overflo...
overflow - CSS Dencitie
文字列の後ろに全角スペースをある程度連結します。
スタイルシートで、white-space:nowrapとoverflow:hiddenを指定することで改行なしで、所定の幅を超える部分を隠すことができます。
WinXP Home の IE6SP2で確認しました。
<html>
<head>
<style>
.bbb{BACKGROUND: url(1.gif) #999 no-repeat; width: 200px; white-space:nowrap; overflow: hidden}
.bbb:hover{BACKGROUND: url(2.gif) #ccc}
</style>
</head>
<body>
<A class=”bbb” href=”url”>文字列 </A>
</body>
</html>
設定したのですが、上手く動作しませんでした。やはり、「文字列の後ろに全角スペース」の方法はよくなさそうです。
No.3
30
16pt
http://www.hajimeteno.ne.jp/stylesheet/css1/p-box-other.html#oth...
CSS1-プロパティ 4-4.その他
widthはブロックレベル要素と置換要素にのみ適用されるみたいです。
Aはインライン要素なので、上の .bbb の指定に display:block; を加えて
ブロックレベル要素の扱いにすれば幅指定ができるようになると思います。
http://www.hajimeteno.ne.jp/stylesheet/css1/p-classific.html#dis...
CSS1-プロパティ 5.分類（リスト）
ちなみにdisplayプロパティについてはこちらを。
ただ、ブロックレベル要素にするということはDIVやPのように
文字リンクの後に自動で改行が入るような表示になるので、
通常通り続けて横に文字や他のリンクを起きたいような場合には
後々の指定がちょっと面倒なことになるかもしれません。
http://www.hajimeteno.ne.jp/stylesheet/css1/p-box-other.html#oth...
CSS1-プロパティ 4-4.その他
（自分の場合は、ブロックレベル要素を寄せるのにfloatなどを使っています）
ありがとうございます。display:block で上手く動きました。
あと、最初に答えられた方のDIVを用いる方法が気になりますので、引き続き回答を求めます。
他の方法もありましたらご指摘ください。
よろしくおねがいいたします。
No.4
774
16pt
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#bo...
$B;k3P@07A%b%G%k(B
HTMLの各タグにはブラウザ内にあらかじめデフォルトのCSS(見栄え)が定義されています。
矩形領域の値を指定できるのはblockとして定義されているものです(<p></p>など)。一方、inlineとして定義されているタグは文字列がある場所に対してのみ作用します。(<em></em>など)
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html
$BIm5-(BA: HTML 4.0$B$K$*$1$k%9%?%$%k%7!<%H$NNc(B
a には通常インラインボックスが定義されているので文字のある場所にしか作用しないと思います。
解決法ですが、
★強引にaをblockタイプにしてしまう。
a.bbb {display block}
★aの中にblock要素を入れる。
<A href=IurlI><div class=bbb>文字列</div></A>
かと思います(上記は試してないのでうまく動かないかもしれません。概念だけ参考にしてください）
ありがとうございます。
No.5
32314
16pt
<div onClick=”location.href=’url’;” class=”hoge”> と、Javascriptを使う方法はどうですか？だめであれば、ポイントは結構です。
なお、hoverが効かない場合、さらに
onMouseOver=”this.className=’hoge_hover’;” onMouseOut=”this.className=’hoge’;” とつけることで、それっぽい効果が得られます。IEでうまく効かないのはIEのCSS対応が仕様が変なのが原因であり、CSSやJavascriptには罪はありません。
ありがとうございます。
--
皆様のおかげで、たいへんべんきょうになりました。早速CSSの本を買って勉強しています。
1
1
2
1
1
2
2
143
140
DIVの使い方ですが、どうすればいいのでしょうか？