Normalize.cssの特徴と使い方

normalize.css

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
  • Web制作中の謎の余白を消したい
  • CSSを毎回設定することが面倒くさい
  • Normalize.cssについて知りたい

こんな疑問に答えます。

Web制作の時に、最初からHTMLを整えてくれるCSSがあったら便利ですよね?

実は、Normalize.cssを使えば、超簡単にCSSの初期設定を終わらせることができます。

私自身もWeb制作をするときは、必ずNormalize.cssを利用するようにしています。

本記事では、Normalize.cssの使い方やカスタマイズについてもご紹介します。

記事を読み終える頃には、CSSを手軽に設定できるようになっていますよ。

Normalize.cssとはなんなのか

まずは、Normalize.cssとは何をするCSSなのかをご紹介します。

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

https://necolas.github.io/normalize.css/

つまり、ブラウザ毎に存在する細かな設定の違いを無くし、全て標準化してくれるCSSということです。

現在、ブラウザにはChromeやFirefox、Edgeなどいろいろな種類があります。

そして、それぞれのブラウザ毎に独自規格が採用されているため、同じソースコードでも挙動が異なる場合があります。

そこで、Normalize.cssを利用することで、ブラウザごとの規格の違いを無くすことができます。

一つのソースコードで、全てのブラウザに同じ挙動を実現できるようになります。

Normalize.cssの必要性

Normalize.cssをWeb制作に導入するメリットは2つあります。

  • ブアウザ毎の表示を統一できる
  • CSSの共通部分を調整してくれる

それぞれご紹介します。

ブラウザごとの表示を統一できる

Normalize.cssが作られる要因となった大きな理由の一つです。

同じコードで、ブラウザごとに表示形式が異なる事を解消する事ができます。

実は、元来Normalize.css以前はReset.cssというCSSが主流でした。

ですが、Reset.cssは、h1とh2のフォントサイズが共通化されるなど、HTML要素全てを均一化してしまう弱点がありました。

Normalize.cssはReset.cssの弱点を克服し、以下の特徴を持っています。

  • CSS量を最低限に抑え、各ブラウザ標準のCSSを活用する
  • Reset.cssで生じていた各ブラウザ毎のバグを微調整する
  • 検証ツールで確認しても、CSSが乱雑にならない

従って、Reset.css以上に高機能な初期設定用のCSSだと言えます。

CSSの共通部分を調整してくれる

Normalize.cssは、Web制作で絶対に採用されるようなCSSを用意してくれます。

例えば、リストスタイルを無くすCSSって結構採用されるのではないでしょうか?

li {
 list-style: none;
}

他にも、Bodyのマージンを消して、余白を調整したりしませんか?

body {
  margin: 0;
}

上記でご紹介した他にも、hタグのフォントサイズを調整するのではないでしょうか?

このように、Web制作の度に設定しそうなCSSが、Normalize.cssに詰め込まれています。

Normalize.cssでお手軽に初期設定をしましょう。

Normalize.cssの導入方法

それでは、Normalize.cssの導入方法をご紹介していきます。

大まか流れは次のとおりです。

  1. Normalize.css用のファイルを制作する
  2. Normalize.cssのページへ飛ぶ
  3. Normalize.cssをコピペする

詳細をご紹介していきます。

手順1:Normalize.css用のファイルを作る

まずはじめに、Normalize.cssのコードを記述するファイルを用意しましょう。

ファイルの構造は以下の通りです。

続いて、ヘッダー部分でnormalize.cssを指定しましょう。

header部分に、normalize.cssを指定する記述をします。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>

/* ↓↓Normalize.CSSの記述↓↓ */
<link href="asset/css/normalize.css" rel="stylesheet" type="text/css">


<link href="asset/css/css.css" rel="stylesheet" type="text/css">
</head>

下記のとおりに、normalize.cssを指定しました。

<link href="asset/css/normalize.css" rel="stylesheet" type="text/css">

次は、normalize.css内にコードを記述していきます。

手順2:Normalize.cssのページへ飛ぶ

まず、Normalize.cssの公式ページに移動します。

すると、イカの画像のページに飛ぶので、Downloadをクリックします。

normalize.css公式ページ

すると、CSSのコードが書かれているwebページに遷移します。

Normalize.cssのコード

このページのコードをすべてコピーしましょう。

コピーの方法

MAC
command+Aで全体選択➔command+Cでコピー

Windows
Ctrl+Aで全体選択➔Ctrl+Cでコピー

それでは、そのコードをnormalize.css内にペーストしていきます。

手順3:Normalize.cssをコピペする

最後ですが、最初に制作したNormalize.cssのファイルに、コピーした内容をあ貼り付けましょう。

貼り付けの方法

MAC
command+Vで貼り付け

Windows
Ctrl+Vで貼り付け

ファイルに貼り付けた後は、コードを反映させるための保存をしましょう。

以上の3ステップで、Normalize.cssを利用することができるようになります。

Normalize.cssをカスタマイズするには

最後に、Normalize.cssに追加するべきCSSをご紹介します。

body {
 font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}

a { 
  text-decoration: none;
  color: #000;
}

a:hover { 
  transition: .3s;
  opacity: 0.6;
}

img {
  width: 100%;
}

Normalize.cssに加えて、上記のCSSを書き足せば、CSS初期設定はほとんど完了と言って良いでしょう。

Normalize.cssの最下層部に書き足してみてください。

まとめ:Normalize.cssで一括調整しよう

Normalize.cssを使うことで、面倒なCSSの初期設定を省くことができます。

加えて、ブラウザごとの表示もスタンダード化できるため、ブラウザチェックも楽になります。

時間短縮とソースコードの標準化のためにも、Normalize.cssを積極的に採用しましょう。