【2019年版】リセットCSSのガイドライン|基礎から使い方を徹底解説2019.10.04SHAREツイートシェアはてブLINEPocket「リセットCSSが何か知りたい」、「リセットCSSはたくさんあるけど、どれを選べばよいわからない」という方にぜひ読んで頂きたい記事です。この記事では、7つのリセットCSSを反映したHTMLファイルの実行結果を比較検証します。(リセットCSSのコードはコピペで使えるので、ぜひ参考にしてください。)記事の結論部分には、書くリセットCSSの特徴とオススメ度をまとめた表も載せているので、結論だけ気になる方はそちらを参照してみて下さい。結論:ひと目でわかる表でオススメを紹介リセットCSSの基礎知識まずはじめに、「リセットCSSとは何か?」を解説します。リセットCSSとは?なぜ必要なのか?リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。Explorerなど様々な種類のものがあります。各ブラウザは固有のCSSを持っています。(デフォルトのCSSと呼びます。)このデフォルトのCSSの影響で、Webページをデザインするために自分で書いたCSSが本来意図しない表示になることがあります。ブラウザがデフォルトでCSSを持っているとは一体どういう事でしょうか?具体例を用いて説明します。下の2枚の画像は同じHTML&CSSのコードをリセットCSSなしの場合とリセットCSSありの場合のブラウザ上でので表示される結果を示しています。)上の2枚の画像を比較すると、リセットCSSを用いていな方の画像では、ブラウザの左上に少すき間が空いています。デザインの余白を調整する際には、CSSのmarginやpaddingなどのプロパティを自分で設定します。chrome)がデフォルトで持っているCSSのmarginやpaddingのせいで、本来自分が意図していた配置にならないということが起きてしまう事があります。このような事態を防ぐためにリセットCSSを使用します。リセットCSSの使い方リセットCSSという特別な名前が付いてはいますが、CSSであることには変わりません。普通のCSS(WebページなどをデザインするCSS)と同じように、リセットCSSが書いてあるCSSファイルをHTMLファイルに読み込みこんで使用します。リセットCSSはイチから自分で書く必要はなく、有名なものはネットで拾ってきたものをコピペで使うことができます。(コードの内容を深く理解する必要はありません。)これから、現在2019年でもよく使われているリセットCSSを紹介していきます。コードが長いものもありますが、コピペで使うことができ、内容を深く知る必要もないので安心して読んでください。コピペで使える!代表的なリセットCSSを紹介これから、よく使われている代表的なリセットCSSを7つほど紹介します。本記事で取り扱うのは以下の7つです。ResetNormalize.cssresssanitize.css実行結果と箇条書きでまとめてある特徴をみて好みのものをコピペして使用してみて下さい。リセットCSSを反映していないHTMLまずはリセットCSSを用いていないHTMLファイルを実行して、ブラウザ上での表示を確認してみましょう。こちらが本記事で比較元となるHTMLです。type="checkbox">チェックボックス</label></div></form></body></html>ブラウザ上での表示画面リセットCSSを全く用いていないHTMLは、ブラウザ上でこのように表示されます。リセットCSSなしの特徴リセットCSSの説明で紹介したように、ブラウザの周りに余白が空いている見出しなどの全ての要素の上下に余白があるこれから、こちらのHTMLに各リセットCSSを適応して、ブラウザ上での表示を比較していきます。全ての余白が消える(ブラウザの周辺、見出しなどの要素の上下など全て)見出しや太字などの設定が消え、文字のサイズもリセットされ全て同じになるテキストボックスや送信ボタンなどの<input>要素はブラウザ固有のものになるといった点がこのリセットCSSの特徴です。余白や文字サイズの設定が全てリセットされるので、いちいちリセットCSSを意識する必要がないので、慣れると非常に便利に感じます。まっさらな状態から、全て自分でデザインを調整したい方にオススメです。2.0は、一部のタグがHTML5に対応していないことがあります。Resetを使用する事をオススメします。2.0の欠点である一部のタグがHTML5に対応していないという欠点を克服したリセットCSSです。すべてをリセットするので、ブラウザのCSSを気にする必要がなく、慣れてくると非常に使いやすいです。余白(paddingやmarginなど)も全て自分で記述します。まっさらな状態から、全て自分でデザインを調整したい方にオススメです。CSSも前から人気のCSSですが、使用はあまりオススメしません。2.0と同じように一部のHTML5タグが対応していないことがあるからです。このリセットCSSは過去5年間更新がありません。コーディングスタイルが変わった時に対応できなくなってしまう恐れがあります。特別な理由がない限り(慣れているなど)、他のリセットCSSを使ったほうがいいです。Resetを使用することもオススメしません。その理由は、Webページの読み込み速度が遅くなるからです。使用しないようなHTMLも含めて全てリセットにかけるので、ブラウザの読み込み速度を落とします。<ul>や<ol>などのリストや<table>(表)などが持つ余白はあらかじめ良い感じに調整されているのにも関わらずリセットしてしまうのも、このリセットCSSの良くないところです。none;}コード全体はこちらをクリックブラウザ上での表示画面Normalize.cssの特徴ブラウザ周りの余白はリセットされる見出しや文字の上下の余白はリセットされず、文字のサイズと太さもリセットされない有用なデフォルトのCSSはリセットしない(リストの余白など)Normalize.cssの特徴は、デザインに支障がでないデフォルトのCSSをリセットせずに保持することです。全てを自分でデザインしなくても、デフォルトの状態でそれなりに整ったデザインをすることが可能なので非常に使い勝手が良いです。none;}コード全体はこちらをクリックブラウザ上での表示画面ress.cssの特徴ブラウザ周り、各要素の上下の余白がすべてリセットされる・見出しなどの文字のサイズと太さはリセットされない<input>のテキストボックスやボタンも全てリセットされるress.cssはnormalize.cssをさらに使いやすくするためにアップデートされたCSSです。normalize.cssとの大きな変更点は、すべての要素のpaddingとmarginをリセットすること、<input>要素の標準スタイルを打ち消すことなどです。(ほかにも色々とnormalize.cssを使いやすく改良する設定がなされています。absolute;}コード全体はこちらをクリックブラウザ上での表示画面sanitize.cssの特徴ブラウザ周りの余白はリセットし、見出しなどの要素の上下の余白はリセットしない文字のサイズと太さはリセットしていない見た目はnormalize.cssと似ている(こちらのほうが少し余白の幅が広い)sanitize.cssはnormalize.cssの共同開発者が開発したこともあり、normalize.cssの思想を受け継いでいます。normalize.cssと同じように有用なデフォルトのCSSをそのまま保持し、バグを修正し、ユーザビリティを高められています。他にも、スマホなどのモバイルに対応していることもsanitize.cssの特徴の一つです。結論:ひと目でわかる表でオススメを紹介これまでに紹介してきた、7つのリセットCSSの大まかな特徴を下の表にまとめました。2.0・余白や文字の設定を全てリセットするので、イチから自分でデザインできる。★★★たくさんあって、何をつかったらいいかわからないという方は上の表のオススメ度を参考にしてください。(星が多いほどオススメ度が高いです。Resetとsanitize.cssの2つです。デフォルトのブラウザの有用なCSSを保持しているので、全て自分でデザインしなくても済むので便利。この表でおすすめどが低いものを使ってはいけないというわけではないので、自分の好みにあったリセットCSSを使って快適に開発をしましょう。慣れてきたら自分好みのリセットCSSを書いてみるのも良いかもしれません。WEBCAMPを運営しています。人生が変わるほど「グッとくる」成長体験を、プログラミング学習を通してお届けしています。【元自衛官】の人生を変えた半年!エンジニアへの道のり。WEBCAMPで安心してエンジニア転職を目指そう「スキルがないし...」「失敗したくないし...」カウンセラーがあなたのキャリアを真剣に考え、ご相談に乗ります。