☝️

リセットcssによるブラウザ特有のCSSの打ち消し

2021/07/09に公開

リセット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
    リセットCSS適用前(chrome)

  • firefox
    リセットCSS適用前(firefox)

例が悪いのかchromeとfirefoxの違い自体はよくわからなかったですが、それぞれh1とh2の間にスペースがあるなどのブラウザ特有のCSSが適用されています。

適用後

  • chrome
    リセットCSS適用後(chrome)

  • firefox
    リセットCSS適用後(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>

参考

リセットCSS

リセットCSS(ソース)

GitHubで編集を提案

Discussion

ログインするとコメントできます