あそびラボ 池袋・要町のウェブ制作会社

WEB講座

  1. HOME
  2. へっぽこ講座
  3. WEB講座
  4. リセットcssについてリセットcssについて

リセットcssについて

リセットcssについて

ブラウザによって、設定していないデザインになってしまうものがあるんですけど・・・
何か原因ってあるんでしょうか?
それは、各ブラウザごとに固有のcssを持っているからじゃ。
各ブラウザのデフォルト設定のcssをリセットしてしまえば、ブラウザごとに表示がおかしくなるのは防げるんじゃ。

リセットcssとは

リセットcssとは、ブラウザごとの表示の違いをリセットしてくれるファイルです。
ブラウザには、ChromeやFirefox、Edge、Safariなど様々な種類があり、各ブラウザごとに固有のcssを持っています。

しかし、ブラウザの違いを意識せずにサイトを作ると、意図しない表示になってしまいます。

そういった違いを打ち消してくれるのがリセットcssです。

具体例

下記の具体例を、わかりやすく説明させて頂きます!

・リセットCSSなしの場合
・リセットCSSありの場合

※わかりやすいように見出しには背景色をつけています。実行環境はGoogle Chrome。

比較をしてみると、リセットcssなしの画像はブラウザの上下左右に隙間が空いています。
また、見出しには上下余白がありフォントも大きく太くなっています。

これは、各ブラウザ固有のcssのmarginやpadding、font-size等によるものです。
こういった、本来意図していない表示を防ぐためにリセットcssを使います。

リセットcssの種類

リセットcssには、いくつか種類があります。

■すべてリセットするタイプ
marginpaddingなどを0にします。
font-sizeも全て統一されます。

余計なスタイリングが付かないので管理がしやすい反面、自分でスタイルを当てないといけないので手間がかかります。

destyle.css、HTML5 Doctor Reset CSSなど

■デフォルトのスタイルが当てられているタイプ
marginpaddingなどを0にしますが、font-sizeなどはある程度スタイルが整えられています。

A Modern CSS Reset、CSS Remedy、normalize.cssなど

使い方

ネットで検索して、好みのリセットcssをダウンロードします。
(「リセットcss」で検索してみると、いろいろあるよ!)

headにスタイルを読み込みます。
複数cssがある場合、一番最初に読み込みましょう。

例:
<head>

<title>へっぽこWeb講座</title>
<link type=”text/css” media=”all” href=”destyle.css” rel=”stylesheet”>
↑リセットcss
<link type=”text/css” media=”all” href=”style.css” rel=”stylesheet”>
↑独自のcss
</head>

これでブラウザ固有のcssをリセットしてくれたので、独自のcssで楽にスタイリングできます。

リセットcssは公開されているものをそのまま読み込むのも問題ありませんが、慣れてきたら使いやすいようにカスタマイズしていくと、作業をさらに効率的に行う事ができます。

色々なリセットcssがありますが、好みのものを選び(内容を見て要るもの要らないものを削っていくのもおすすめです。

なるほど!
予めリセットしておけば、ブラウザによって
意図しないデザインになるのを防げるんですね。
さっそく設定します。
サイトを作る初期段階でリセットcssを設定しておくと、
その後の作業が楽になるので、出来るだけ早めの設定が
オススメじゃ。

池袋エリアでの
ホームページ制作のご相談はこちら
WEB講座一覧