CSSの質問です。

--
.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)にする方法を教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/02/04 12:39:50
  • 終了:--

回答(5件)

id:ttamo No.1

たも回答回数175ベストアンサー獲得回数292006/02/04 14:56:42

ポイント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; を入れる」が回答です。


それがいやなら前後にスペースを入れるとか文字を大きくするとか、でしょうか。

気持ち悪いですが。

id:disca

DIVの使い方ですが、どうすればいいのでしょうか? 

とすると、DIV自体全てがリンク対象となるのでしょうか?

2006/02/04 15:16:36
id:ohguma No.2

ohguma回答回数26ベストアンサー獲得回数02006/02/04 15:05:33

ポイント16pt

文字列の後ろに全角スペースをある程度連結します。

スタイルシートで、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>

id:disca

設定したのですが、上手く動作しませんでした。やはり、「文字列の後ろに全角スペース」の方法はよくなさそうです。

2006/02/04 15:20:08
id:epigonen No.3

epigonen回答回数3ベストアンサー獲得回数02006/02/04 15:12:16

ポイント16pt

widthはブロックレベル要素と置換要素にのみ適用されるみたいです。

Aはインライン要素なので、上の .bbb の指定に display:block; を加えて

ブロックレベル要素の扱いにすれば幅指定ができるようになると思います。


http://www.hajimeteno.ne.jp/stylesheet/css1/p-classific.html#dis...

CSS1-プロパティ 5.分類(リスト)

ちなみにdisplayプロパティについてはこちらを。


ただ、ブロックレベル要素にするということはDIVやPのように

文字リンクの後に自動で改行が入るような表示になるので、

通常通り続けて横に文字や他のリンクを起きたいような場合には

後々の指定がちょっと面倒なことになるかもしれません。


(自分の場合は、ブロックレベル要素を寄せるのにfloatなどを使っています)

id:disca

ありがとうございます。display:block で上手く動きました。

あと、最初に答えられた方のDIVを用いる方法が気になりますので、引き続き回答を求めます。

他の方法もありましたらご指摘ください。

よろしくおねがいいたします。

2006/02/04 15:25:00
id:randk No.4

randk回答回数77ベストアンサー獲得回数42006/02/04 15:46:33

ポイント16pt

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>

かと思います(上記は試してないのでうまく動かないかもしれません。概念だけ参考にしてください)

http://www.parkcity.ne.jp/~chaichan/src/cssichi.htm

このサイトは移動しました

id:disca

ありがとうございます。

2006/02/07 12:50:23
id:ito-yu No.5

ito-yu回答回数323ベストアンサー獲得回数142006/02/06 23:10:39

ポイント16pt

<div onClick=”location.href=’url’;” class=”hoge”> と、Javascriptを使う方法はどうですか?だめであれば、ポイントは結構です。

なお、hoverが効かない場合、さらに

onMouseOver=”this.className=’hoge_hover’;” onMouseOut=”this.className=’hoge’;” とつけることで、それっぽい効果が得られます。IEでうまく効かないのはIEのCSS対応が仕様が変なのが原因であり、CSSやJavascriptには罪はありません。

id:disca

ありがとうございます。

--

皆様のおかげで、たいへんべんきょうになりました。早速CSSの本を買って勉強しています。

2006/02/07 12:51:42

コメントはまだありません

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

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

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

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