リセットCSSについて | SkillhubAI（スキルハブエーアイ）

リセットCSSについて

吉田先生（通常）
吉田先生

ブラウザによる見え方の違いをなくすために使う、リセットCSS類について学びましょう。

 

リセットcssの種類

リセットcssは、ブラウザがデフォルトで持っているcssを打ち消し、ブラウザによる見え方の差をなくすためのcssです。

総称としては「ブラウザによる見え方の差をなくす」ためのスタイルシート全般を指しますが、より細かく見るとリセットCSS・ノーマライズCSS・サニタイズCSSという３種類に分かれます。

ちなみに、リセットCSS類は自作する必要はありません。
どのタイプもインターネットでCSSが公開・配布されています。
コードの内容についてもすべてを理解する必要はありません。大体の特徴がわかり、配布されているCSSを読み込めればOKです。

下記のタグの見え方がどう変わるのか見ながら、それぞれのCSSの特徴を確認してみましょう。

  <div class="test1"></div>

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <a href="https://skillhub.jp/">リンク</a>
  <p>段落</p>
  <b>太字</b>
  <i>Italic</i>
  <em>強調</em>
  <ul>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
  </ul>
  <ol>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
  </ol>

デフォルト表示（Google Chrome）

file

A:リセットCSS

リセットCSSは、ブラウザに搭載されているデフォルトのCSSをリセット（無効化）するためのCSSです。どの程度無効化するかは、cssによって多少違いがあります。

【代表的なリセットcss】

  • destyle.css
  • HTML5 Doctor CSS Reset
  • Eric Meyer’s “Reset CSS” 2.0

下記はリセットCSSの中でも、強力なリセット効果があるdestyle.cssを読み込ませた場合の表示です。
太字と斜体が残っているくらいで、ほぼデフォルトスタイルは消えていますね。
file

最初から全部CSSを設定したい、セクションごとに全部見出しが違うデザインが来た…などの場合に役立ちます。

B:ノーマライズCSS

ノーマライズCSSはブラウザデフォルトのCSSの違いを統一して、見た目を整えるCSSのことです。
ノーマライズCSSの場合は“統一された実用的なデフォルトスタイルの設定”を目的としているため、hタグのサイズがpタグと同じになったりはしません。

cssゼロ状態から設定するほどではない、という場合に適しているでしょう。

【代表的なノーマライズCSS】 Normalize.css　https://github.com/necolas/normalize.css/blob/master/normalize.css

下図はNormalize.cssを適用した場合の表示です。 ブラウザのデフォルトスタイルに近いですが、ブラウザ左と上の隙間がなくなっていたりと若干の差異もありますね。

file

C:サニタイズCSS

サニタイズCSSはノーマライズCSSに近く、より扱いやすいように予めスタイル指定が追加されているものです。ノーマライズCSSの拡張版とも言えるかもしれません。

サニタイズCSSではレスポンシブデザインで便利な「box-sizing: border-box;」などが予め設定されています。CSSの共通化・ベースセッティングの両方ができることもあり、最近はこちらのタイプが多く使われています。

【代表的なサニタイズCSS】

  • Reboot.css
  • sanitize.css
  • ress.css
  • CSS Remedy

ちなみにReboot.cssはBootstrapで使われているリセットCSS。Bootstrapを利用している場合には自動的に適用されています。

下図はsanitize.cssを使用した場合の表示です。

file

実習

前回作成したtest.htmlに、チェック用のタグを入れ、sanitize.cssを読み込んだ場合の表示の違いを確認してみましょう。

【チェック用タグ（コピペしてください）】

  <div class="test1"></div>

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <a href="https://skillhub.jp/">リンク</a>
  <p>段落</p>
  <b>太字</b>
  <i>Italic</i>
  <em>強調</em>
  <ul>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
  </ul>
  <ol>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
  </ol>

【手順】

  1. 上記タグをコピー
  2. ブラウザで表示確認
  3. sanitize.cssを探して、text.htmlで読み込む（CDN,DLどちらでも可）
  4. ブラウザでsanitize.cssが効いていることを確認

まとめ

リセットCSS類には種類があり、目的も少し違います。
どれが優れているというものではありませんので、どのCSSを使うかは自分がどうしたいか・何が使いやすいかという部分が大きく影響します。

コーディング要点で指定がある場合は、もちろんそれに従いましょう。
ない場合は、目的に応じて選ぶと良いでしょう。

【例】

  • リセットCSSで全てリセットして、自分でデフォルトを設定する
  • レスポンシブコーディングなので、サニタイズCSSを使ってみる
前のレッスン 次のレッスン
レッスン一覧へ