人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: disca
●カテゴリ:コンピュータ 生活
✍キーワード::hover background CSS GIF URL
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● たも
●16ポイント

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


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

気持ち悪いですが。

◎質問者からの返答

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

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


2 ● ohguma
●16ポイント

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>

◎質問者からの返答

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


3 ● epigonen
●16ポイント

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を用いる方法が気になりますので、引き続き回答を求めます。

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

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


4 ● randk
●16ポイント

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>

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

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

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

◎質問者からの返答

ありがとうございます。


5 ● ito-yu
●16ポイント

http://www.tohoho-web.com/js/onevent.htm#onClick

イベントハンドラ

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

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

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

◎質問者からの返答

ありがとうございます。

--

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ