CSSについてお聞きします。

質問

私は、ブラウザごとにデフォルトで余白など入ってくるため、スタイルシートに＊（アスタリスク）で
*{
margin:0;
padding:0;
border0;
}

と指定しています。
こうすることでページ全体に入る無駄な余白などを一旦０にしてからpaddingなどをかけていくようにしているのですが、ひとつ問題が出てしまいます。

それは、全体にCSSの効果が入るため、input type="button"　などでボタンを配置した時に、デザインがグラフィックのかかってない格好悪いボタンになってしまいます。

全体にCSSをかけてもボタンのデザインが崩れない方法がないのか知っている方がいれば教えて頂けないでしょうか？

どうぞよろしくお願い致します。

回答No.2

DrFell · ベストアンサー

全体にかけるのを止めてはいかがですか？

最近は全称セレクタによるリセットは、新たに使われることが少なくなってきたように思います。dainithiさんも困っておられるように、リセットしなくてもいいところまで、リセットしてしまう他、表示がわずかですが遅くなる、崩れてしまうなどの問題が生じるため、避ける人が多くなってきました。

で、どうしているかといえば、必要な箇所だけを指定することが多いです。dainithiさんのリセットでいくと、

【例】
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form,fieldset, textarea, p, blockquote, th, td{
margin: 0;
padding: 0;
border0;
}

リセット　ｃｓｓをもっと複雑に記述する場合も多いです。「リセット　ｃｓｓ」で検索すれば、いろいろと出てくると思いますので、参考になさってはいかがでしょうか？

お礼

なるほど。
必要な箇所を一個一個細かく指定するというのが最近の主流なんですね。

確かにこれなら記入しなければいけないセレクタの数は増えますが、余計な所にCSSがかからないので確実ですね。

記入が面倒くさいならメモ帳にでもメモしてコピペをすればいいですもんね。
方法まで教えて頂きありがとうございました。

回答No.3

ORUKA1951

*全称セレクタ(詳細度は0です)で、すべてのタイプ(HTMLの要素)に対してmarginとpaddingを0にするのは、オーサリングツールのテンプレートで、かってよく使われていた方法が広まったのだと思われます。
　テンプレートをそのまま利用するならともかく、自分でスタイルシートを記述するときは弊害が多すぎます。
・すべての要素に対して、登場するたびすべて指定しなおさなければなりません。
　たとえば、リスト
・そのためスタイルシートが肥大化します。
　基本的には
html,body{margin:0;padding:0;}
　とだけしておくのが無難です。

＞全体にCSSをかけてもボタンのデザインが崩れない方法がないのか知っている方がいれば教えて頂けないでしょうか？
　先に説明したように、新しいタイプ(要素)が登場するたびに、設定しなおしてください。
　それしかありません。

　*{}でリセットするのは止めましょう。

お礼

なるほど。
やはり、避ける方法はなかったんですね。全セレクタのリセットのルーツも教えて頂きありがとうございました。

回答No.1

torayoshi

再現出来ません。
「格好悪いボタン」がどんなボタンなのかこちらでは見えません。
例えばWindowsXP以降でクラシックテーマにした時のようなボタンのデザインになるという事でしょうか？

ボタンの視覚デザイン（GUI）はWindowsなら.msstyles（視覚スタイルファイル）が受け持つ部品であり、
CSSで制御出来るしろものではありませんからCSSとの関連性はありません。