はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

Google ChromeやFirefoxのデフォルトスタイルシート(CSS)、H1は2emのはずなのにそうなっていない。なぜ?

f:id:yonta24:20160227135626j:plain

今、ソシムの「HTML5&CSS3レッスンブック」という本でまっさらな状態から少しずつHTML5サイトを作るという勉強中です。スタイルシートの仕組みが一つ一つわかって面白いのです。

デフォルトスタイルシートって?

P.43で、デフォルトスタイルシートというものが出てきます。

これは、例えばスタイルシートがない状態で<h1>と書けばブラウザが勝手に文字の太さや大きさ、マージン間隔をセットしてくれるというものです。

各ブラウザで値が決まっていて、作者がスタイルシートを用意しなくてもある程度文章が見やすく表示されるという機能です。

<h1>が2emじゃないのはなぜ?

「レッスンブック」はもちろんのこと、デフォルトスタイルシートについて書いてあるサイトにしても、みんな<h1>のデフォルトスタイルシートでフォントサイズが「2em(普通の文字の2倍の大きさ)」だって説明されているのです。

つまり、普通のフォントサイズが16pxのとき、デフォルトスタイルシートではh1は、32pxになるはず。

ところが私の環境では、<h1>は1.5emにしかならない。

なんで?って本をめくるたび疑問で、いつも頭の端で「あれはなんでだろうな…」っていう思いが消えませんでした。

f:id:yonta24:20160227135035j:plain

(32pxになるはずのh1が24pxに…)

なぜかデフォルトスタイルシートを上書きするブラウザたち

それが、Chromeの「検証」機能でわかったんです。(というか確認できました)

最初は、"デフォルトスタイル「2em」"だったのですが、消されて「1.5em」に書き換わっていました。

hail2u.net

こちらのサイトによると何やら理由は解らないけれど調節されているとのこと。対象は<h1>だけ…みたいな事も書かれています。

”要素の検証”で見ると確かにデフォルトスタイルシートに棒線が引かれ無効化されています。

f:id:yonta24:20160227134319p:plain

なぜ、2emじゃないのか今の私にはわかりませんが、ちょっとすっきりしました。「User agent stylesheet」ってなんでしょうかね。

f:id:yonta24:20160227194757p:plain

ちなみに<h2>は、デフォルトスタイルシートのまま「1.5em」になっています。

<h1>と<h2>をなぜ同じ文字サイズにするのでしょう……。

ちょっともやもやします。(なにか私がどこか知らないうちに設定してるのかなぁ?)

(追記)Firefoxでも同じで、H1とH2同じ大きさで表示されています。

f:id:yonta24:20160228130759p:plain

<article>を外すと<h1>がデフォルト2emに?

(2016年2月28日追記)

今日改めて確認したのですが、<article>タグを消すとちゃんと<h1>が2emになりました。(上で紹介したサイトのタイトルにも「サブセクションにあるh1要素…」と書かれていたのに気づきませんでした)

<article>だけでなく、<section>や<nav>などサブセクションと言われるタグで囲むと内部にある<h1>は1.5emに調整されます。

書籍レッスンブックの説明でもh1が2emになるという説明は、<article>を入れる前の説明になっていました。

依然としてなぜ<article>で囲むと<h1>が2em⇒1.5emに変更になるのかは不明です。(ただこのご時世、サイトをデフォルトスタイルシートのままで見るという人は皆無に等しいのでデフォルトがどんな大きさに調節されていても構わないのですが、ちょっと気になったので…)

超オススメ「HTML5&CSS3レッスンブック」

メモ帳を使ってコツコツ打ち込みながら、意外におしゃれで中身を変更したらそのまま使えそうなサイトが完成します。

手を動かしながらもっとも基礎的な原理原則部分を深掘りすると面白いのです。

また、この本は後に続くエビスコム定番レッスンブックシリーズのスタートにあたるので初心者の私にはもってこいのテキストになっています。