HTMLのCSSとdiv class内の styleの関係

お世話になります。

現在、HTMLのデザインをしているのですが、今一つ腑に落ちない、理解に違和感がある部分があり、相談させて頂きます。

現在、CSSでは
.PCbutton{
position: absolute;
top: 256px;
left: 460px;
width: 90px;
color: #000000;
font-size: 28px;
text-align: center;
font-family: "ＭＳ Pゴシック";
background-color: transparent;
}
と設定したのですが、div classで、

と、記述しています。
デザインはCSSでやるべし、ということを聞いた記憶があったので、div styleをの部分を削除したり、CSSに持っていったりするとボタンのサイズが小さくなります。
そもそもで考えれば、styleの部分をCSSに持っていってボタンが小さくなるのはフォントサイズがCSSの記述より小さいので納得できるのですが、その小さいdiv styleを削除しても
ボタンが小さくなるのが理解できません。
どういうことなのでしょうか？
製作はMS Expression web4 で、ブラウザはWindows7Pro-32 IE11です。

行動規範の内容に同意します

回答3件

ベストアンサー

質問を読んで「なぜ継承をしないのだろう」と疑問に思ったので調べてみたところ、こういう理由のようです。

ただし、ブラウザの動作にしばしば矛盾があります。デフォルトで、**一部のブラウザは親から font-family や font-size を継承しません。**代わりに多くのブラウザでは、システムのデフォルトの体裁を使用します。フォームの体裁を他のコンテンツと一致させるには、以下のルールをスタイルシートに追加するとよいでしょう:

HTML フォームへのスタイル設定 - Web developer guide | MDN

なんと、CSS3仕様とかではなくて、ブラウザの実装の問題らしいです。

ということで、リセットCSSなどにこれを入れておくのがいいようですよ。

CSS
1button, input, select, textarea {
2  font-family : inherit;
3  font-size   : 100%;
4}

　

大変勉強になるご質問でした。ありがとうございました。

投稿2016/02/10 07:44

編集2016/02/10 07:45

Lhankor_Mhy

総合スコア36057

.PCbutton {} を、 .PCbutton input {} にしてみてはどうでしょうか。
今の記述ですと、div.PCbuttonにはCSSが効いていますが、inputにはstyle="font-size:21px"しか効いていないので、ボタンの幅や高さなどの指定はブラウザ依存になってしまっているかと思います。

投稿2016/02/10 07:13