こんばんは。U235です。
WEBCOACHのWEBデザインについての学習の一環で、WordPressのオリジナルテーマ開発を行っています。
参考書としているのは以下の書籍です。
今回はCHAPTER8まで終わりました。
CHAPTER7はメニューの追加、CHAPTER8は固定ページの作成という話でした。
参考書のなぞりは特に疑問なく進んだのですが、終わった後にサイトを眺めていたら疑問が。という話をしたいと思います。
ホームと固定ページでタイトル（h1タグ）の位置が違う
メニューを追加して、固定ページを追加して、ホームと固定ページの行き来が簡単になったわけです。
そこでポチポチページを見比べていたら、なんとタイトル（h1タグ）の位置が違う。きもちわるっ。
デベロッパーツールで確認したところ、marginの値が違っていました。
なんで？？？？と思い、今度はデベロッパーツールのStylesを見比べてみました。
カスタムCSSではフォントサイズしか指定していなかったのに、謎のCSSが二つもある。
フォントサイズはカスタムCSSが優先されたから取り消し線が引かれているっぽいけど……。
なぞなぞなぞ。ということで調べました。
user agent stylesheetとは
そもそもこれは何ぞやと。設定した覚えがない。
巷ではUAスタイルシートとも呼ばれているそう。
agentとは直訳すると「代理人」のこと。
user agentとはユーザー（ネット利用者）の代理人、つまりブラウザのことらしい。
つまり、「ブラウザのスタイルシート」です。
えっ、そんなのあったの？とも思いましたが、考えてみると納得。
なんでh1タグやpタグを使うと改行<br>を挟まなくても改行されるのかといえば、それはブロック要素だからです。
上のh1タグのUAスタイルシートを見てみると、display: block;が入っています。
ブラウザで勝手にh1タグをブロック要素に指定してくれていたから、h1タグはブロック要素なんですね。
同様に、フォントもサイズが2em、太字、マージンは上下に0.67em（26.1568px＝39.04×0.67）と指定しているということ。
ブラウザでこのタグはこういう見た目で、っていう指定があるから、自分のCSSで改めて設定しなくても、h1などの見出しタグは見出しっぽく大きい文字で表示されるし、pタグも一つの段落のまとまりとして表示される（マージンが指定されてるからね）。
お～納得納得。UAスタイルシート、ありがとう。
:-webkit-any(article, aside, nav, section) とは
UAスタイルシートでh1タグに自動でマージンがついていることはわかった。
じゃあ固定ページの方についている:-webkit-any(article, aside, nav, section)は何よ？という話。
こいつがマージンを0.83em（32.4032px＝39.04×0.83）に更新しちゃっている。
これは、「WebKitベースのブラウザ（ChromeやSafari）でデフォルトで追加設定されるCSS」だそうです。
WebKitっていうのはHTMLレンダリングエンジン。
HTMLレンダリングエンジンっていうのはHTMLやCSSなどを読み取って見た目を整形させて表示させるプログラムのこと。
ブラウザによって微妙に見た目が変わるのは、HTMLレンダリングエンジンが異なるから。かな。
私が使っているブラウザはChromeで、WebKitベースのブラウザなので、勝手に追加設定されちゃってるってことでした。
なんでデフォルトスタイルが変わるのか
articleやsectionなどの要素内にあるh1は、通常のdiv内にあるh1と異なって、「セクションごとの見出し」として扱われるからだそう。
なのでブラウザはこれらを読みやすくするために、デフォルトで異なるマージンやフォントサイズを適用しているんだとか。
そういえばホームではmainタグ、divタグ、divタグの子要素としてh1タグがありました。
対して固定ページでは、articleタグ、divタグの子要素としてh1タグがありました。
何に対するh1タグなのか、が違うので、デフォルトでマージンが変わっていたんです。
結局どうしたか
意味はわかったけど、高さが異なるのはどうしても気持ちが悪かったので、カスタムCSSでマージンを指定して上書きしました。
h1 {
font-size: var(--f1);
margin: 0.67em 0;
}デフォルトの0.67emに統一しました。
これを入れたことで、固定ページのh1タグにおける上下マージンも、0.67emに統一され、ずれはなくなりました。
リセットCSSの重要性
そういえば、WEBCOACHのHTML・CSS中級編で使った以下の書籍で、「リセットCSS」というのを学習したのを思い出しました。
（いまamazonで見たら第2版が出ていた。そっちで勉強したかったな～。）
デフォルトのCSSはブラウザごとに違うので、ブラウザを変えると微妙に見た目が変わってしまう。
なのでリセットCSSを使って、ブラウザが独自で適用させているCSSを打ち消し、違うブラウザでも同じ見た目になるようにしましょう、という内容でした。
今回の参考書では、リセットCSSを読み込むフェーズは今のところありません。
最初からリセットCSSを使っていればこの問題は解決だったんだと思います。その分カスタムCSSで設定しないといけない部分が多くなりそうですが……。
最後に
残すはCHAPTER9、40ページほど。
明日のコーチングまでに終わらせたかったのですが、難しそう。
連休はお祭りに行ったり結婚式に行ったり、リア充してしまったので進まず。
ブログでのアウトプットに時間がかかりすぎるせいもあり。
でもアウトプットをしたおかげでリセットCSSの存在を思い出したので良かったです。
コーチング、成果がなくて「ここまで進みました～」しか言えないんだけど、大丈夫かな……。
ではまた～！
コメント