「user agent stylesheet」ってのは、検証画面でお目にかかれるやつです。
これです↓
1度は見たことがあるかもしれません。
ブラウザで決められているcss指定です。
※ブラウザ…Google ChromeやSafariのこと。
そして、リセットcssでこれを打ち消すってのも知ってると思います。
ただ、ここが今いちピンとこないですよね。
話としては知ってるけど、ホントに打ち消してるのか？ってところが。
というわけで、このへんをハッキリさせてみます。
あ、あと初期値との関係もチョロっと織り交ぜていきます。
※初期値…widthなどのプロパティにはじめから設定されている値
【参考記事】初期値の使い所を理解する
user agent stylesheet
今回はGoogle Chromeの「user agent stylesheet」を見ていきます。
というわけで、さっそくはじめましょう。
と、その前にagentってのは「代理人」って意味です。
ただし、「user agent」までで1つの意味みたいで、ネット利用者が使っているOS・ブラウザとのこと。
【参考外部サイト】
ユーザーエージェント とは 意味/解説/説明 【User Agent, UA】｜Web担当者Forum
なので、「user agent stylesheet」は、ネット利用者が使っているブラウザのcssスタイルシートってことになりますね。
脱線したので、話をもとに戻しまししょう。
まず、htmlファイルにソースコードだけ書きます。
cssは指定しません。
リセットcssも適用させません。
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
</body><body>しかないですね。
この状態で検証画面を開くと下図になります。
右下に注目してください。
<body>のcss指定があります。
拡大しますね。
はい。
「user agent stylesheet」がありました。
margin: 8pxと指定されてますね。
つまり、Google Chromeでは<body>にマージンを指定してることになります。
続いて、<h1>を書き込んでみましょう。
<body>
<h1>ほぼほぼ</h1>
</body>これも右下に注目です。
拡大↓
margin-block-startはmargin-topみたいなものです。
同じくmargin-block-endはmargin-bottomになります。
margin-blockが気になっても流しましょう〜
font-sizeも2emと指定されていますね。
あとfont-weightも。
もう1つだけどうぞ。
今度は<p>です。
<body>
<h1>ほぼほぼ</h1>
<p>ほぼほぼ2</p>
</body>三たび、右下をご覧ください。
拡大します。
ここでもmargin-topとmargin-bottomが指定されてますね。
これ以外にも<div>やら<a>やらでも、何かしらの指定がされているわけです。
ちなみに、<body>も<h1>も<p>ともに、display: blockとなってました。
というのも、displayの初期値はinlineなので、blockに書き換えてるんですね。
ちなみに、僕もずっと<body>などは初期値がblockと勘違いしてました。
【css】ブロック要素とインライン要素の違い｜できることできないこと
リセットcssとの関係
ここから、リセットcssとの関係を見ていきましょう。
リセットcssはブラウザに指定されているcssを打ち消すためにあります。
例えば、「HTML5 Doctor」というリセットcssの中に以下の指定があります。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}やたら長いんで、ピンクのアンダーラインだけ注目してください。
<body>と<h1>と<p>には、margin: 0と指定されています。
上で見てきた「user agent stylesheet」には、マージンの指定がありましたよね。
<body>も<h1>も<p>も。
それを、margin: 0で上書きしてます。
はい、これでリセットcssがGoogle Chromeのcss指定を上書きしているのが証明されました。
ですが例えば、リセットcssの中には<h1>のfont-weightを打ち消す指定はありません。
ですので、すべてが上書きされてるわけではないんですね。
そして、みなさんがコードを書いている<h1>の文字。
これがはじめから太字なのは、「user agent stylesheet」で指定しているからなんです。
初期値との関係
さいごは初期値と「user agent stylesheet」との関係です。
初期値は、プロパティにはじめから与えられている値です。
先ほどのmarginを例に出すと、その初期値は0です。
つまり、<body>のマージンが未指定でも、0が値として与えられているので余白はないというわけです。
一応、上書きの順番としては、
cssの初期値
↓
user agent stylesheet
↓
リセットcss
↓
みなさんが書いているcss指定
となります。
というわけで、初期値は「user agent stylesheet」より前の話です。
で、マージンの初期値が分かったところで、思い出していただきたいのが「user agent stylesheet」。
<body>にmargin: 8pxとなっていました。
そして、これをリセットcssで上書きしたと説明しました。
そしてそして。
やっと、今みなさんが書いているcssで上書きするという流れです。
もう1度、どうぞ。
cssの初期値
↓
user agent stylesheet
↓
リセットcss
↓
みなさんが書いているcss指定
コードで書くと、↓みたいなイメージでしょうか。
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<!--cssの初期値-->
<!--user agent stylesheet-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
</body>これで分かってもらえましたか？
あまりうまく説明できた気がしませんが…
まとめ
むずかしめの内容でしたね。
まあ、「user agent stylesheet」がリセットcssで打ち消されているのを実感してもらえればOKです。