おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

今更ながらに「CSSリセット」について調べてみた。

f:id:lord_cashew:20140201082125p:plain

2014年から改めてWebデザイン等を勉強し直している今日この頃、CSSを勉強していく中で「CSSリセット(リセットCSS?)」について詳しく知りたくなったので、ググったりしつつ調べてみました。

 

「CSSリセット」とは

Webブラウザ(Chrome、Firefox、IEなど) は、それぞれCSSのタグ毎にデフォルト値を独自に持っているので、例えば何もせずデフォルトのままでHTMLファイルを表示するとブラウザ毎に文字サイズが変わってしまいます。

このブラウザ間のCSSの差異を解決する方法として「CSSのデフォルトの値を全てリセットして真っ新な状態で一からCSSを書くことでブラウザ間の差異をなくす」という方法が使われています。これが「CSSリセット」です。

 

有名なCSSリセット「YUI3」

YUI3は「Yahoo! User Interface Library」が提供している、日本では一番有名な「CSSリセット」と言っても過言ではないかもしれません。

f:id:lord_cashew:20140201084840p:plain

CSS Reset - YUI Library
開発:Yahoo! Inc.
ライセンス:BSD License(無償利用可能、無保証明記と著作権表記で改変・複製・再頒布も可能)

 

「YUI3」の使用方法

公式サイトからCSSファイルをダウンロードして、Webサイトのファイルと同様に自分でサーバーにアップロードして使用することができます。

HTMLファイルの<head>内に以下のコードを記述して直接リンクで読み込むことも可能です。

 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">

 

その他のCSSリセット

Eric Mayerさん作のリセットCSSが「Eric Meyer’s “Reset CSS” 2.0」です。そのまま使用するのではなく、サイト毎に編集&調整することが推奨されています。 

f:id:lord_cashew:20140201092007p:plain

CSS Tools: Reset CSS

 

Richard Clarkさんが、Eric MayerさんのリセットCSSベースにしてHTML5向けに調整したリセットCSSが「HTML5 Reset Stylesheet」です。

f:id:lord_cashew:20140201092755p:plain

HTML5 Reset Stylesheet | HTML5 Doctor

 

「CSS Reset」というサイト 

「CSS Reset(http://www.cssreset.com/)」は一般的なCSSリセットのスタイルシートとドキュメントをまとめているポータルサイトです。このサイトのトップページにはCSSリセットのランキング(CSS Resetでの)が公開されています。 

f:id:lord_cashew:20140201093224p:plain

CSS Reset | 2013's most common CSS Resets to copy/paste, with documentation / tutorials

 

個人的な感想

今までは深く考えずに「YUI3」のリンクコードを<head>に記述して使うことが多かったのですが、HTML5が主流になってきた今日この頃、「HTML5 Reset Stylesheet」を使うことも検討してみたいと思います。

 

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】