☝️
リセットcssによるブラウザ特有のCSSの打ち消し
リセットCSSとは
デフォルトでは、特に何も設定していなくてもブラウザごとにスタイルシートが定義されてます。
そのスタイルシートを打ち消すためのスタイルシートをリセットCSSと呼びます。
リセットCSSを読み込むことでブラウザごとの差をなくすことができます。
使い方
リセットCSSを定義してから通常のCSSを定義します。古いものもあるため注意が必要です。
(リセットCSSを後で定義してしまうとリセットCSSで上書きされてしまうため。)
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
例
自分でリセットCSSを定義してもいいのですが、すでに定義されたCSSがあるのでそれを読み込むのが簡単です。colissのところに定義されてあるソースコードをコピペしてくるのが一番楽かなと思います。
リセットCSSを使ってみた
GoogleChromeとfirefoxをそれぞれ使ってリセットCSS適用前後の比較をしてみました。
スペースの間隔がみやすいように背景だけ変更しています。
適用前
-
chrome
-
firefox
例が悪いのかchromeとfirefoxの違い自体はよくわからなかったですが、それぞれh1とh2の間にスペースがあるなどのブラウザ特有のCSSが適用されています。
適用後
-
chrome
-
firefox
リセットすることで、間隔が詰まって表示することができるようになりました。
cf. ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<input type="text" />
<div>div</div>
</body>
</html>
Discussion