【大切】リセットCSSの使い方

読者の疑問
これからHTML, CSSを使ってサイトを作ろうと思っているけれど、ブラウザによってCSSの初期値が違うらしい。

まずはその初期値をリセットする必要があるって聞いたけどどうすればいいの？

本記事を読んでわかること

リセットCSSが必要な理由はデザインをじゃましないため

なぜリセットCSSが必要かというと、例えばChrom、Safari、IEなど世の中には様々なブラウザがありますが、

そのブラウザによってそれぞれデフォルトで適応されているCSSがあり、

デザイナーがCSSを書く上で、そのデフォルトのCSSがじゃまをして表現したい表示をなかなかうまくできないことがあるためです。

このように表示したいけれどデフォルトのCSSのこの部分と競合して全然うまくいかない！！みたいな感じです。

そこでまずデフォルトのCSSをリセットし、まっさらな状態にすることによってこれから実装するCSSのじゃまをしないようにします。

その上で初めてスムーズにCSSでデザイン表現できるようになるわけです。

リセットCSSを使う必要があることはわかった。

しかしどのリセットCSSを使えばいいの？

ちょっとググってみたけれど、リセットCSSはたくさんあるみたい、、
と迷う方は多いと思います。

そこで私がおすすめするリセットCSSは HTML5 Doctor CSS Reset です。

その理由はこのリセットCSSはHTML5に対応しているためです。
HTMLは現在バージョン5がリリースしており、基本的にこれからはHTML5を使用していくことになります。

そのためHTML5に対応していることは重要になってきます。

例えばリセットCSSの代表格として昔から有名なものに Eric Meyer’s Reset CSS 2.0 がありますが、

これは一部のタグがHTML5に対応していないことがネックであり、そのため今回のおすすめから除外しました。

あとは特に際立った特徴もなく、とりあえずHTML5 Doctor CSS Resetを使っておけば問題ないでしょう。

ではどのようにリセットCSSを反映させるかというと、、(私は最初反映の仕方が全然わかりませんでした。笑)

例えば下のようなHTMLがあるとします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>sample.html</title>
</head>
<body>

ここでhrefにstyle.cssを読みこませんていますよね。

そしてこのstyle.cssに適応させたいCSSを記入することによってHTMLにCSSを反映できるわけです。

実際に、CSSは HTML5 Doctor CSS Reset のCSSをクリップボードにコピーし、このstyle.cssにペーストし、ファイルに保存してみましょう。

すぐさまHTMLに反映されていることが確認できるかと思います。

リセットCSSの使い方の説明は以上で終わりです。

簡単ですよね^^