HTMLのh2要素の仕様に関して教えて下さい。

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

HTMLのh2要素の仕様についてですが、h2の初期値は1.5emであると思います。
font-sizeを90%にすると文字が小さく表示されます。

得られる結果として、1.5em×90%なので1.35em位になると思っておりました。
分かる方がいらっしゃいましたら教えて下さい。出来れば、根拠となるWEBページがありましたら、併せて教えて頂ければ幸いです。

recet.cssで初期化をすれば関係ないと思いますが、不思議に思いご質問させて頂きました。

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/11/25 12:57

根本的に理解が間違っている。

確かに
Default style sheet for HTML 4( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　にあるように、一般的に視覚系ブラウザの多くは、
h2 { font-size: 1.5em; margin: .75em 0 }
　というスタイルシートを持っています。

em は、[その時点でのフォントサイズ]を参照します。
よって、
h2{font-size:1.5em;}
に、
h2{font-size:90%;}
を指定すると、[その時点でのフォントサイズ]の90%であって、1.5emの90%ではありません。

例えば、
<h2>なんたら<span>かんたら</span></h2>
に対して、
h2 span{font-size:90%;}
とすると、継承されて、1.5em × 0.9 になります。

CSSを扱う上で、最も大事なことは、名前にもあるようにカスケーディングです。
上書きと継承はことなります。

すなわち、ブラウザのもつデフォルトのスタイルシートの詳細度は0000ですから、このようにタイプセレクタ（詳細度0001）で指定されると、上書きされます。--順不同で--
6.4 The cascade( https://www.w3.org/TR/CSS22/cascade.html#cascade )

＞recet.cssで初期化をすれば
　そんなことしてはなりません。
　CSSが煩雑になり、すべて再設定しなければならなくなります。
　可能な限り、デフォルトのスタイルシートは生かします。

　ちなみに、HTML5では、本文は<section></section>でマークアップされます。
（HTML4.01では、構造を示す要素がありませんでしたからidやclassを併用して、構造を示していました。「The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.( https://www.w3.org/TR/html401/struct/global.html … )」から、<div class="section">のように

★section 要素には【必ず】【一つだけ】見出し要素を持たなければならない
★また、文章の階層は<section>の入れ子で示されますから、h1～h6で示す必要なくなりました。
<section>
　<h1>～</h1>
　<section>
　　<h1>～</h1>
　　<section>
　　　<h1>～</h1>
でもよい
4.3 Sections — HTML5( https://www.w3.org/TR/2014/REC-html5-20141028/se … )
　もちろん、後方互換で
<section>
　<h1>～</h1>
　<section>
　　<h2>～</h2>
　　<section>
　　　<h3>～</h3>
がよいでしょう

こちらがわかりやすい
The section element | HTML5 Doctor( http://html5doctor.com/the-section-element/ )

★また、プレゼンテーションの目的で、文書構造上は<h2>二階層目の見出しであっても、h2{fon-size:1.25em;}とか、h2{font-size:0.9em;}とするのは、全く問題がありません。
　文字を大きくしたり小さくする目的で、<b><font><big>を使うのは、否定されています。
　というか、<b><font><big>は、HTML4.01の時代から、非推奨ですし、HTML5では<font><big>は破棄されて存在しない。<b>は、
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.( https://www.w3.org/TR/2014/REC-html5-20141028/te … )
　と、なんの意味もないが、ただ単に他と区別したいときのために、残された。

　他の回答者が根本的に間違われているのは、
・文字の大きさを変えるために--大きくするために--<h1>～<h6>を使うのは誤りということを思い違いされている。それが構造上<h2>であるなら、<h2>でマークアップすべきですし、プレゼンテーションは、見せたくないのでしたら、h2{display:none;}ですらあってもよい。

・昔も今も、ブラウザのデフォルトは　h2{font-size:1.5em;}です。

原典を示せということなので、可能な限り信頼のおけるW3Cの原文を示しました。必要ならgoogleの翻訳でもつかって翻訳してください。
　解説サイトに書かれている内容は、間違いのほうが多いようですので。

この回答へのお礼

ORUKA1951様

早々にご回答頂きましてどうもありがとうございます。

こんなにたくさんの資料を提示して下さりまして、感激致しました。参考URLをしっかりと確認させて頂きます。お世話になりました。回答が大変充実しておりましたので、ベストアンサーに選ばせて頂きます。

お礼日時：2016/11/25 16:51

No.5 回答者： Ogre7077 回答日時： 2016/11/25 13:05

font-size:90% と指定すると、親要素の大きさを基準とした相対指定となります。

https://developer.mozilla.org/ja/docs/Web/CSS/fo …

なのでブラウザのデフォルト値である 1.5em とは関係なく、
親要素が 16px ならば 14.4px と縮小表示されます。

想定した結果を得たいならば、計算した値を指定してください。
h2{font-size:1.35em;} /* 親要素より 35% 拡大 */

親要素の考慮が面倒なら、このような指定もあります
h2{font-size:1.35rem;} /* BODY要素より 35% 拡大 */

この回答へのお礼

Ogre7077様

早々にご回答頂きましてどうもありがとうございます。

URLを参照致します。しっかりと確認させて頂きます。
remという指定について十分に理解していなかったので勉強します。

お礼日時：2016/11/25 16:41

No.3 回答者： t_fumiaki 回答日時： 2016/11/25 12:43

%は何に対する%かと言う事です。

見出しを含めた、文字の標準は1em(16px)なのでそれに対する%です。

なので1em(=16px)×70%= 0.7em(11.2px)になります。

この回答へのお礼

t_fumiaki様

早々にご回答頂きましてどうもありがとうございます。

＞文字の標準は1em(16px)なのでそれに対する%です。
上記の説明で合点がいきました。

お礼日時：2016/11/25 16:36

No.2 回答者： GooUserラック 回答日時： 2016/11/25 10:53

「h○」はヘッダーの○番目なのでブラウザによって解釈が違うのでそのような使い方はダメかと…

http://www.htmq.com/html/h.shtml

この回答へのお礼

GooUserラック様

早々にご回答頂きましてどうもありがとうございます。
参考URLを参照させて頂きます。

お礼日時：2016/11/25 16:34

No.1 回答者： yambejp 回答日時： 2016/11/25 10:21

ブラウザによって解釈がちがいました

むかしのIEであればご指摘のような挙動だったかもしれません。
いまはデフォルト値を1.5emとせずに1に対する比率になるようです

この回答へのお礼

yambejp様

早々にご回答頂きましてどうもありがとうございます。
参考にさせて頂きます。

お礼日時：2016/11/25 16:33