normalize.cssを設定してみよう－新米web担のためのホームページの作り方 | 第22回

2018年5月2日2026年4月1日

さて、今回は normalize.css とは何か。　そして、その設定方法について解説したいと思います。ホームページを作成するときには欠かせない知識ですので、見ておきましょう。

normalize.cssとはなにか？

これは、ブラウザ間の表示差異をなくし、作成者の意図通りにスタイリングを行なうためのCSSファイルの一つです。

ご存知の通り、ブラウザはいくつもあり、ユーザー側がどのブラウザであなたのサイトを見てくれるかわかりません。そして、問題となるのが、同じスタイリングを行なっても、各ブラウザによって微妙に実際の見え方が異なるのです。

また、ブラウザには最初から搭載されている表示形式というのもあり、それが邪魔をして作成者の意図と異なる表示をすることがあります。

例えば以下のサイトをよく見てください。作成者が書いてもいないのに、ブラウザと各要素（div）の間に隙間ができていることがわかると思います。

このページの場合、Google Chrome でも Internet Explorer でも余白が生じています。

実はこれは、作成者がCSSで記入したスタイルではなく、ブラウザ側にもともと設定されているスタイルによって表示されている余白なのです。

このように勝手にされてしまうと困りますよね。

そこで、これらのスタイリングを作成者の意図したとおりに表示できるよう「正常化」してくれる便利なCSSファイルが normalize.css なのです。

reset.css との違い

以前は、ブラウザにもともと設定されているものを完全にリセットしてしまう、reset.cssというものが用いられており、現在でも用いているサイトもあります。

しかしながら、ブラウザの初期設定は、すべてが悪いということではなく、細かく作成者が設定しなくても上手に表示できるようにしてくれるという側面もあるのです。

それで、この normalize.css は、ブラウザの初期設定の短所をうまくカバーし、長所はそのまま残すようにうまく設計されています。

normalize.cssの設定方法

normalize.css の提供元はいくつもあり、それぞれ微妙に異なっています。

関心のある方は自分の使い勝手の良い normalize.css を見つけてみるのも良いとおもいますが、今回は以下のサービスを活用してみます。

手順１：Normalize.cssのサイトにアクセスし、ダウンロードする

Normalize.css

手順２：名前を付けてCSSを保存する

ダウンロードすると以下のような記述が表示されると思います。

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document

========================================================================== */ /**
　* 1. Correct the line height in all browsers.
　* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {

　line-height: 1.15;
/* 1 */
　-webkit-text-size-adjust: 100%;
/* 2 */
}

/* Sections
========================================================================== */
/**
　* Remove the margin in all browsers.
*/

body {
　margin: 0;
}

/**
　* Correct the font size and margin on `h1` elements within `section` and
　* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
　　font-size: 2em;
　　margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**
　* 1. Add the correct box sizing in Firefox.
　* 2. Show the overflow in Edge and IE.
*/

hr {
　　box-sizing: content-box;
/* 1 */
　　height: 0;
/* 1 */
　　overflow: visible;
/* 2 */
}

/**　　以下続く

コードすべてをコピーし、テキストエディタの新しいファイルに貼り付け、名前を付けて保存します。（上のものは Normalize.css の一部です。保存する場合はCSSのコードすべてをコピーして保存してください）

保存先は、すでに作成しているであろう「 css 」フォルダの中に入れておくとよいでしょう。

手順３：HTML側から呼び出す

ファイルを呼び出すときはいつものように、HTMLの<head>部分に以下のように記入するだけです。

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

手順４：動作確認

これでブラウザでHTMLファイルを表示させてみましょう。

以下のように、これまであった余計な余白が消えていれば問題なく設定ができています。

補足：サンプルコード

念のためサンプルのコードを記しておきます。

HTML

<!DOCTYPE html>
<html lang="jp">
　<head>
　　<meta charset="utf-8">
　　<meta http-equiv="X-UA-Compatible" content="IE=Edge">
　　<meta name="viewport" content="width=device-width,initial-scale=1">
　　<meta name="description" content="このページでは初心者でもホームページを作成できるようになるためのお役に立つ情報を提供しています。自分だけのおしゃれなホームページを作ってみませんか。">
　　<title>はじめてのホームページ | トップページ</title>
　　<link rel="stylesheet" href="css/normalize.css">
　　<link rel="shortcut icon" href="画像のURL.png">
　　<link rel="stylesheet" href="css/style.css">
　　<meta name="format-detection" content="email=no,telephone=no,address=no">

　</head>
<body>

　<header>
　　<div class="top-image-area">
　　　<div class="logo-container">
　　　　<img src="img/logo2.svg" alt="">
　　</div>
　</div>
</header>

<div class="main">
　<div class="main-contents">

　　<h1>トップページ</h1>

　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<polygon points="0,0 50,50 100,0"/>
　　　</svg>
　</div>

<div class="spaser"></div>

　<div class="slanting">
　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　<path d="M0,0 Q50,50 100,0"></path>
　　</svg>
　</div>
　<div class="spaser"></div>
　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<polygon points="0,0 100,100 0,100"/>
　　　</svg>
　　</div>
　<div class="spaser"></div>

　<div class="slanting">
　　　<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
　　　<polygon points="0,100 100,0 100,100"/>
　　　</svg>
　</div>

<div class="spaser"></div>

　<div class="contents">
　　　<h2></h2>
　　</div>

</div>
　<div class="right-navi">
　　　右側のカラム
　</div>

</div>
　<div class="left-navi">
　　　左側のカラム
　</div>

　<div class="footer">
　　　ここにはフッターメニューが入ります
　</div>

</body>
</html>

ファイル構成

※ 今回の Normalize.css はCSSフォルダの中に保管しています。

CSS

body{
　　background-color: lightyellow;
}
header {
　　height: 300px;
　　position: relative;
}
h1,h2 {
　　margin: 0;
　　padding: 1em 0;
　　text-align: center;
　　color: #ddd;
}
.spaser{
　　height: 100px;
}
.top-image-area{
　　width: 100%;
　　height: 100%;
　　background-image: url("../img/topimage.jpg");
　　background-position: 50% 20%;
　　background-size: cover;
}
.logo-container{
　　width: 70px;
　　height: 70px;
　　margin-left: 10px;
}
.logo-container img{
　　height: 100%;
　　width: 100%;
}

.slanting {
　　position: relative;
　　height: 200px;
　　background: #ddd;
}
svg {
　　position: absolute;
　　bottom: 0;
　　width: 100%;
　　height: 200px;
　　fill: #5f5f5f;
}
.contents {

}

.footer{
　　height: 200px;
　　background: black;
　　color: #fff;
　　clear: both;
}
.main-contents, .left-navi, .right-navi {
　　height: 100%;
}
.main-contents {
　　float: left;
　　width: 80%;
}
.left-navi {
　　background-color: blue;
　　color: #fff;
　　width: 20%;
　　float: right;
　　height: 400px;
}
.right-navi {
　　background-color: blueviolet;
　　color: #fff;
　　float: right;
　　width: 20%;
　　height: 400px;
}
.main{
　　width: 80%;
　　float: right;
}

@media screen and (max-width: 600px){
　　.main, .left-navi,.main-contents, .right-navi{
　　width: 100%;
}
}