CSSについて教えてください。


widthで、幅100%より 2pxだけ狭くしたいため、下記のように記述したところ、
思い通りの表現になったのですが、
css内の値を数式で記述するのは、一般的なのでしょうか?


#aaa { width: 100%-2px; }



また、エラーが発生する可能性はないでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2011/02/12 16:57:26
  • 終了:2011/02/18 19:46:10

ベストアンサー

id:niwa-mikiho No.3

niwa-mikiho回答回数508ベストアンサー獲得回数382011/02/17 06:41:43

ポイント27pt

その表記方法は CSS にはありません。


希望された表示になったのは偶然であって、正解では無いです。



もし div に対しての指定であれば、


margin-right: 2px;


でどうでしょう?

div は width の値を指定しないときは親のブロックの幅と同じ幅になります。

かと言って width: 100%; してもだめです。


今テストしてたらそうなりました ^-^


http://dum

id:kazoo9

貴重なアドバイスを有難うございます。

あと、お返事が遅くなって申し訳ございません。

他のCSSの関係で条件が異なったのだと思いますが、margin-right: -2px; でうまくいきました!

2011/02/18 19:45:08

その他の回答(2件)

id:taroe No.1

taroe回答回数1099ベストアンサー獲得回数1322011/02/12 17:05:25

ポイント27pt

#aaa { width: 100%-100px; }

などの大きい数字を入れても、ちゃんと反映してますか?

それが答えです。

http://q.hatena.ne.jp/answer

id:kazoo9

反映していませんでした・・・。

いろいろ試してみると、

「-2px」が反映されていた理由が微妙に分かりました。


経緯を説明しますと、

同じdivの中で、width のほかに、border を使っていたため、

borderが外枠表示になってしまい、そのborderの太さの分だけ、幅が広がっていたため、

それを解消できないかと考えていたのですが、

試しに -2px を入れてみたら、「あ、できた」的な感じでした。


ご指摘を受けていろいろ試した結果として、

width の数字に 「+」「-」等で数字をつなげると、

borderの太さの分だけ広がっていた幅がなくなる効果があるみたいです。

理由は分かりませんが、border の外枠表示が、内枠表示に切り替わるのだと思います。


おかげさまで勉強になりました。

有難うございました。

2011/02/12 18:23:02
id:online_p No.2

online_p回答回数1153ベストアンサー獲得回数592011/02/12 17:39:26

ポイント27pt

%かpxに統一した方がよいかと。http://www

id:kazoo9

そのようですね。

有難うございました。

2011/02/12 18:23:04
id:niwa-mikiho No.3

niwa-mikiho回答回数508ベストアンサー獲得回数382011/02/17 06:41:43ここでベストアンサー

ポイント27pt

その表記方法は CSS にはありません。


希望された表示になったのは偶然であって、正解では無いです。



もし div に対しての指定であれば、


margin-right: 2px;


でどうでしょう?

div は width の値を指定しないときは親のブロックの幅と同じ幅になります。

かと言って width: 100%; してもだめです。


今テストしてたらそうなりました ^-^


http://dum

id:kazoo9

貴重なアドバイスを有難うございます。

あと、お返事が遅くなって申し訳ございません。

他のCSSの関係で条件が異なったのだと思いますが、margin-right: -2px; でうまくいきました!

2011/02/18 19:45:08
  • id:kazoo9
    box-sizing : border-box; で、
    width の幅に borderの幅を含めてくれるので解決できます。

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

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

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

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