0%

Programmingプログラミングナレッジ

Posted:2018.12.15

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

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ですが、デザインを作成する上でとても重要な役割を果たしています。いろんな種類があるので、目的や用途を見極めてマッチしたものを採用するようにしましょう。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】