リセット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開発で、どれを使うのか、はたまた使わないのか。もちろん、自作したものを使うという方法もあると思います。

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

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

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




オススメ記事

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

gulp

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

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

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

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

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

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは