1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. リセットCSS は何を使う? 2018年ランキング5選紹介。

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。
祝ってください。

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。
しかし、何を使っていいのかと感じている人もいると思います。

今回はこの リセットCSS について、この記事にまとめました。

リセットCSS とは?

リセットCSS は、ブラウザごとの表示の違いをリセットしてくれる CSS です。
これを使うことによって、ブラウザごとの違いを意識せずにコーディングができ、楽になります。

リセットCSS の種類 & 人気ランキング

まず、 リセットCSS にはどのようなものがあるか、ダウンロード数人気ランキングも兼ねてみていきましょう。
以下が現在(2018/1/1)人気な リセットCSS です。といっても、数年前から変わってないっぽいですね。

  1. Eric Meyer’s “Reset CSS” 2.0
  2. HTML5 Doctor CSS Reset
  3. Yahoo! (YUI 3) Reset CSS
  4. Universal Selector ‘*’ Reset
  5. Normalize.css

参考:CSS Reset

Eric Meyer’s “Reset CSS” 2.0

リセットCSS でもっとも人気が高いのが、 Eric Meyer’s “Reset CSS” 2.0 です。
Eric Meyer’s “Reset CSS” 2.0
Eric Meyer’s “Reset CSS” 2.0
ただ、2011年1月26日から更新されていないようですので、そこだけ気になる部分ですね。

HTML5 Doctor CSS Reset

HTML5 Doctor CSS Reset は、先ほど紹介した Eric Meyer’s CSS reset を HTML5 で使うために修正したものだそうです。
HTML5 Doctor CSS Reset
HTML5 Doctor CSS Reset

Yahoo! (YUI 3) Reset CSS

Yahoo! (YUI 3) Reset CSS は、 Yahoo! が開発したものです。
Yahoo! (YUI 3) Reset CSS
YUI

Universal Selector ‘*’ Reset

Universal Selector ‘*’ Reset は、ユニバーサルセレクタを使って、全ての要素に margin: 0, padding: 0 を指定する、かなりシンプルなものです。

* {
	margin: 0;
	padding: 0;
}

Normalize.css

Normalize.css は、 リセットCSS とは少し違い、デフォルトのスタイルはあえて残しつつ、ブラウザごとの違いを修正するという考え方で作られているようです。
Normalize.css
Normalize.css

まとめ

今回は 2018年でもっとも多くダウンロードされている リセットCSS を5つ紹介しました。
Web開発で、どれを使うのか、はたまた使わないのか。もちろん、自作したものを使うという方法もあると思います。

自分にあったものを見つけてみてください。

スポンサードリンク

関連コンテンツ

オススメ記事

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

普段から猫に遊ばれている@It_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

コメントをどうぞ!

メールアドレスが公開されることはありません。