ResetCSS

CSS Web

【初心者向け】ノーマライズCSSとリセットCSSの違いとは?どちらが良いの?使い分けなど。

Webページをコーディングする時に読み込んでおきたいCSSと言えば?

そう、リセットorノーマライズCSSですよね!

世の中に様々なブラウザが存在する以上はこれらのCSSファイルが無いとレイアウト上のズレが生じますよね。
そんなReset CSSとNormalize CSS、結局どちらを使えばいいの?という方に、かんたんに違いをご紹介します。

年収訴求

そもそもReset CSS、Normalize CSSとは?

いずれも共通する点

いずれもブラウザ間のスタイルの差異を極力抑えてくれるものです。
例えば、以下のHTMLコードを何も考えず表示させるとします。

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>CSSテスト</title>
</head>
<body>
 
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<ul>
    <li>liリスト</li>
</ul>
 
<p>pテキストの上下にも空白があり、その大きさはブラウザによって異なります。</p>
 
</body>
</html>

すると、各ブラウザでは以下のように表示されます。

こうしてみると、最近は大分差が縮まってきたとは言え、ブラウザの間でテキストのフォントや字間・行間やらが微妙に異なっていることが分かりますね。
こうなると、閲覧者の環境によって意図したデザインにならなかったり、レイアウトが崩れてコンテンツが見られないなんてことも起きかねます。

本来、各開発チームのそれぞれの気遣い(?)があって、「このタグならこれくらいスペース空けておけば初心者もレイアウトしやすいだろう」「このフォントが見やすいだろう」という考え方があるために、こうしてブラウザ間でその気遣いが裏目に出てしまっているのです。

この違いを解消する目的を前提としたCSSが、今回説明するReset CSSとNormalize CSSです。

Reset CSSとは?

その名の通り、各ブラウザのデフォルトスタイルをほぼ完全にリセットするCSSのことです。
例えばh1なんかはデフォルトで大きく太いテキストとなっていますが、これもすべて通常のテキストと同等のスタイルにしてしまいます。

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

ここにあるCSSコードをテキストファイルに貼り付けて、CSSとして保存してHTMLに読み込みます。
この状態で先程のHTMLコードを開いてみます。

テキストの大きさや行間が通常のテキストとほぼ同等になりました。
これをすることによって何が良いのかと言うと、

  • 自分の思うようなデザインをブラウザを気にすることなく細かく設定できる
  • すべてのmargin、paddingが0とされ、思うようにレイアウト調整しやすい

といったメリットがあり、逆に

  • 各タグに対し自分で何もかも設定しないと普通のテキスト表示のまま
  • それに伴ってCSSコードの量が増える

といったデメリットも存在します。

じっくり細かくスタイルを設定したいページに向いていると思います。

Normalize CSSとは?

こちらは各タグのデフォルトスタイルを維持しつつ、各ブラウザの表示を統一させるという、なんとも融通の利くCSSとなっています。

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

上記のサイトよりCSSをダウンロードしてHTMLで読み込んだ状態で表示してみます。

一見、何もしていない状態と違いがないように見えますが、このデフォルトスタイルを活かしつつ、ブラウザ間の表示に一貫性を持たせることが可能となっています。
このスタイルのメリットは、

  • リセットするほどでなくともブラウザ間の差異を抑えることができる
  • Reset CSSに比べ設定量が少なくCSSコードの量を抑えられる

そしてデメリットが

  • 結局各タグごとのデザインは必須なので細かいコーディングは必要

といった感じです。
ResetとNormalizeのそれぞれの特性を見ながら、ご自身のスタイルに合わせて選択することができます。

結局どっちが良いの?

どちらが適しているかは、それぞれのコーディングスタイルやWebサイト構築の方針によって違ってくるかと思います。

ブラウザのデフォルトスタイルを活かしたいとなればNormalize CSSを使用すれば作りやすいかと思いますし、逆に全く必要なくすべて自分で定義するというのであればReset CSSが扱いやすいかと思います。

ちなみに私のサイトmaesuke.comはNormalize.cssを使用しています。
ブラウザごとにレイアウトに気を遣う必要がなくなるので便利ですね。

フリーランス CodeCamp

まとめ

ざっとでしたがそれぞれの違いと用途をご紹介しました。
繰り返しになりますが、どちらが正解というのはなく、ご自身のコーディングスタイルに合わせて選択するのが良いでしょう。

本日はここまで。

この記事は役に立ちましたか?

  • この記事を書いた人

Maesuke

2年目Webデザイナー。 IT全般やWeb関係、ガジェット、暗号資産(仮想通貨)などに興味を持ち、気になった情報などを日々つぶやき続ける普通の人。

イチ押し記事!

1

いくつかの副業を試してきましたが、プログラミングのようにガッツリ勉強する必要もなく、さらに数日で数千円、1ヶ月で3〜5万円くらいを稼げるコスパの良い「動画編集」という副業を、今回は紹介しちゃおうかなと ...

-CSS, Web
-,

© 2020 maesuke.comブログ