リセットCSSでブラウザー間の独自の設定を打ち消しておこう

何の準備もなくホームページをコーディングしてしまうと、ブラウザーによって見え方が全く異なってしまいます。これはホームページを作るときの基本中の基本ですが、人によって使用しているリセットCSSは異なります。ときどき、自作している人もみかけますが最初から設定すると大変なので、配布されているリセットCSSを活用するのもよいかと思います。

まずは、どんなリセットCSSがあるのか見てみましょう。

この記事は「2020年12月19日」に書かれた記事です

  1. リセットCSSとは
  2. Normalize.css
  3. Ress
  4. HTML5 Doctor Reset CSS
  5. Reboot.css

1.リセットCSSとは

リセットCSSはブラウザが個々に設定をしているスタイルを打ち消すためのCSSです。
基準となるCSSが全ブラウザ共通であればよいのですが、

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Safari
  • Internet Explorer など

ブラウザーによって固有の設定をしています。

こないでこの固有の設定をリセットしておかないと、ブラウザによって異なる表示(見た目)となってしまいます。つまり、Google Chromeでは意図したデザインになっているけど、Internet Explorerで閲覧したら驚くほど崩れていた! ということになります。

2.Normalize.css

Normalize.css
http://necolas.github.io/normalize.css/

Normalize.cssはまっさらな状態までスタイルを打ち消さないリセットCSSです。
厳密にはブラウザ間の設定をリセットした上で、シンプルなスタイルが適用されようになっています。個人的には制作を始めた頃から「Normalize.css」を利用していることもあり、今も使用しています。

3.Ress

Ress
https://github.com/filipelinhares/ress

  • normalize.cssをアップデートしたCSSです。
  • すべての要素がbox-sizing: border-box; として設定されます。
  • Ressでは、marginとpaddingの設定をすべて「0」に設定しています。

そのほかにも下記の仕様があります。

  • font-familyにmonospaceを指定
  • background-repeat: no-repeat;
  • before要素やafter要素にtext-decorationやvertical-alignを継承
  • button要素に cursor: pointer; を適用
  • 各ブラウザのボタンの標準スタイルを無効
  • hover時のoutlineを無効
  • input要素のborder-radiusを無効
  • テキストエリアで risize: vertical; を指定

4.HTML5 Doctor Reset CSS

HTML5 Doctor Reset CSS
http://html5doctor.com/html-5-reset-stylesheet/

  • リセットCSSの先駆者である「Eric Mayer氏」が作ったCSS「Eric Meyer’s “Reset CSS” 2.0」をHTML5に対応させたリセットCSS
  • 各ブラウザの設定をすべてリセットしているため、自分で1からCSSを設定する場合に適している
まっさらにしたい!というときは良いですが、あまりにもまっさらだと指定を忘れたときに通常の文字と変わらないため、設定していないタグなどを見つけにくいことはあるかもしれません。

5.Reboot.css

    • Reboot.cssは、Bootstrapのフレームワーク用CSSとして使用されています。
  • 基本的にBootstrapとセットで使用されることが多いです。

上記のほかにもリセットCSSあります。

なんか合わないな

と思ったら別のものを試してみるのもよいのではないでしょうか。

自分が設定しやすいようにオリジナルのリセットCSSをつくることもできますが、個人的にはあるものは使うというスタンスなので、世に出回っているリセットCSSを使い、そこに基本的に使うスタイルをプラスして使っています。
松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > リセットCSSでブラウザー間の独自の設定を打ち消しておこう

ページトップへ