Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2018.12.15

用途・特性別のリセット系CSSまとめ

Tags: ,

HTMLで登場する要素にはデフォルトのスタイルを持っています。またブラウザ間でも微妙に違いもあったりします。そのため、デザインを作り込んだり、見た目を整える場合には一度デフォルトのスタイルを調整する必要があります。そんな時にデフォルトスタイルをリセットする目的で使用されるのがリセット系のCSSになります。

 

リセット系CSSにはいろんな種類があるのでイマイチどれを使っていいかわからない方も多いかと思います。今回はリセット系CSSについて用途や特性別にまとめていきたいと思います。

 

リセット系CSSの分類

リセット系CSSは大きく分けると次の2つのタイプに分かれます。

1. 要素のデフォルトスタイルを全て消す
2. 要素のデフォルトスタイルを残しながらブラウザ間の差異をなくす

 

用途や目的別に使い分けられるのですが、デフォルトスタイルを全て消すものは、見た目が同じになるので、まっさらな状態からデザインを整えていく時に便利です。デフォルトスタイルを残すものは、強制的にスタイルを消すことがないのでフレームワークのような汎用性のあるものに採用されるケースが多いです。

 

よく知られているリセット系CSS

リセット系CSSにはいろんな種類がありますが、主に使われているのは下記のものが多いようです。また、リセット系CSSの歴史は古く、HTMLの仕様変更に合わせてどんどん進化しています。

 

【Eric Meyer’s CSS reset】

https://meyerweb.com/eric/tools/css/reset/

用途・特性別のリセット系CSSまとめ

古くからある有名なリセット系CSSで以前はよく使われていましたが、HTML5の登場以降はあまり使われることが少なくなってきたようです。

 

【YUI Reset CSS】

https://yuilibrary.com/yui/docs/cssreset/

用途・特性別のリセット系CSSまとめ

Yahooが作成しているリセット系CSSで、過去には 「Eric Meyer’s CSS reset」と並んでよく使われていました。

 

【HTML5 Doctor CSS Reset】

http://html5doctor.com/html-5-reset-stylesheet/

用途・特性別のリセット系CSSまとめ

HTML5への対応を目的に登場したリセット系CSSで、新しいタグにも対応しているためHTML5ベースの制作に使いやすい内容となっています。

 

【Normalize.css】

https://necolas.github.io/normalize.css/

用途・特性別のリセット系CSSまとめ

デフォルトのスタイルを残しながら見た目を揃えていくことを目的するタイプのパイオニア的なCSSです。完全にリセットされないためフレームワークなどでよく用いられます。

 

最近のウェブ制作に使えるリセット系CSS

HTMLやCSSが時代とともにアップデートされ、それに伴いリセット系CSSも新しいものが登場しています。ここでは近年のウェブ制作に合わせた使いやすいリセット系CSSをあげています。

 

【ress.css】

https://github.com/filipelinhares/ress

用途・特性別のリセット系CSSまとめ

スタイルをリセットするタイプのCSSで、HTMLやCSSの新しい仕様に最適化された内容になっており、まっさらな状態からデザインを整えることが可能です。

 

【reboot.css】

https://getbootstrap.com/docs/4.1/content/reboot/

用途・特性別のリセット系CSSまとめ

「Normalize.css」と同じくデフォルトのスタイルを残すタイプになります。HTML5の新しい仕様に対応しており、Bootstrapの新しいバージョンにも採用されています。

 

目立たないリセット系CSSですが、デザインを作成する上でとても重要な役割を果たしています。いろんな種類があるので、目的や用途を見極めてマッチしたものを採用するようにしましょう。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?