【HTML・CSS】デフォルトスタイルの初期化について

プログラミング系列サムネイル画像1

Internet ExplorerやChrome等、各ブラウザにはデフォルトスタイルと呼ばれるブラウザ独自のスタイルシートが定義されています。

このデフォルトスタイルにより、我々が何もCSSを定義していない場合でも、ブラウザ独自のスタイルシートが適用され装飾が行われます。

例としては、marginやpaddingの幅が勝手に設定されていたり、見出しタグの文字は太くなる等です。

以下は、CSSを定義していない状態で、Chromeで表示した場合の画像です。

Chromeで表示した場合（リセットスタイル無）

HTMLは以下の通りです。

<h1><img src="https://designsozai.com/wp-content/uploads/2018/11/1541013445-8e01411559587d6d0dc94b5580e5f784-600x400.jpg" width="20%" height="20%"></h1>
	<h2>category</h2>
	<ul>
		<li>HOME</li>
		<li>COMPANY</li>
		<li>GALLERY</li>
		<li>CONTACT</li>
	</ul>

CSSは何も定義していませんが、h2の文字の太さやマージンが設定されています。
h2のボックススタイルを確認すると、以下のように上下のマージンが予め設定されていることが分かります。

h2のデフォルトボックススタイル

デフォルトスタイルによって、ブラウザ毎にスタイルが適用されることが分かりました。

しかし、一つ問題があります。

全てのブラウザでデフォルトスタイルが共通ではないということです。

EdgeとChromeのh2について確認すると、width幅がそれぞれ異なることが分かります。

ChromeとEdgeのボックス画像

リセットスタイルの定義

先程のように、ブラウザ毎で表示や数値が異なる場合を避けるために、「リセットスタイル」を利用します。

リセット用のCSSファイルを先に読み込み、その後にこちらで諸々の設定を行うことで、異なるブラウザであっても表示の設定が行いやすくなるという理屈です。

リセットスタイルの例

現在はブロックレベル（html,body等）でリセットを行う方法が主流となっています。

先程の例のHTMLでは、H1,H2,ul,liが要素として存在していました。
これらの要素について、以下の記述を行いリセットします。

h1,h2,ul,li{
	margin:0;
	padding:0;
	font-style:normal;
	font-size:100%;
	font-weight:normal;
}

結果は以下の通りです。

リセットスタイルを適用

終わりに

リセットスタイルはあらかじめ作成しておくとその後のレイアウト作業がスムーズに進みます。
ネット上にも沢山例がありますので、是非確認してみてはいかがでしょうか。

画像：こちらのサイト様より

IT, HTML・CSSHTML, CSS

Posted by 行未