WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

Webサイトでしばしば見かける「normalize.css」。
今回は基本に帰りつつ、normalize.cssについてご紹介します。

「normalize.css」とは？

ブラウザ間の表示の差を無くし、自分の意図するスタイルを実現しやすくするために用いられるCSSファイルのことです。

使用する理由

世の中で使用されているブラウザには様々なものがあります。
Chrome、Firefox、safari、Internet Explorer、etc…。
そして、それらのブラウザにはそれぞれデフォルトでCSSが適用されており、その内容も各ブラウザで異なります。
そうなると各ブラウザの表示崩れが発生し、思うようにCSSを適用できず時間を費やしてしまうことになるので、そのような手間を減らすためにも「normalize.css」を使用する場合が多いです。

使い方

使い方はとても簡単で、「head」内に読み込ませるだけです。
提供元はいくつかあるのですが、今回は以下を使用します。
normalize.css

1.「normalize.css」のダウンロード

「Download」をクリックします。
英語で色々と書かれていますが特に気にしなくてもOKです。

2.ソースコードを外部ファイル化する。

表示されるソースコードをコピーします。
そして「normalize.css」など分かりやすい名前をつけてCSSファイルを作成し、ペーストしましょう。

3.後は読み込むだけ！

読み込む場所は、head内に読み込みましょう。
その他にCSSファイルを読み込む予定がある場合は、一番最初に「normalize.css」を読み込むようにしましょう。

その他

「normalize.css」以外にも同系統なものもありますので、あわせてご紹介します。

「Reset CSS」

系統の元祖ともいえるのが、この「Reset CSS」です。
ブラウザのデフォルトCSSのうち有用なものは残す「normalize.css」に比べ、「reset.css」は一度全てをフラット（リセット）にするように書かれています。

「Reset CSS」

「Reboot.css」

こちらは「Bootstrap」で使用されているものです。
「normalize.css」と似ている部分はありますが、「box-sizing: border-box;」が全ての要素に適用されていたり、より自然に書けることや「Bootstrap」への信頼性もあることから使用される方も多いようです。

「Reboot.css」

最後に

コーディングを行う際は、ブラウザとどう付き合うかも重要となります。
知らなかった・・・という方はとりあえず使ってみることをオススメします。
そして、慣れてきたら自分のコーディングスタイルに適したカスタマイズができるとより便利となりますので、ぜひお試しください。