ONZE/BLOGオンズ開発ブログ

今日は「リセット用のスタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート［OZ Reset CSS］を紹介していきます。

「スタイルシート・リセット」とは？

各ブラウザにはデフォルトのCSSが設定されていますが、このスタイルはブラウザによって大きく異なるため、注意深くコーディングをしていかないと後々に各ブラウザ毎の表示の違いに悩むことになり、作業が滞る原因になります。

「各ブラウザ毎の表示の違い」は無視できない重要な問題です。
HTMLとCSSにてウェブサイトのデザインを構築していくとき、この相違点を考慮せずに作業ができることが理想です。
そこで、その後のコーディング作業が捗るように「各ブラウザのデフォルトのスタイルをあらかじめリセットしておこう」というのが「スタイルシート・リセット」の基本的な考え方です。

普及している代表的なリセット用のCSS

既に広く認知され普及している有名なリセット用のCSSとして、「Reset CSS」や「normalilze.css」あたりが挙げられます。
また最近では「normalilze.css」の開発者たちが新たに制作した「sanitize.css」も注目されていますね。

• Reset CSS
• normalilze.css
• sanitize.css

これらのリセット用のスタイルシートは確かに優れていて、これまで実際に弊社の制作現場でも頻繁に利用してきた経緯があります。
しかし、さらに使いやすいようにと改良と研究を重ねた結果、結局はオリジナルのリセット用CSSをゼロから開発することになりました。

OZ Reset CSS

……というワケで。
弊社オンズが実際に制作現場で使用しているリセット用のスタイルシート、名付けて［OZ Reset CSS］を紹介します。

※2015年11月11日、バージョン「1.1」にアップデートしました。

/*
OZ RESET CSS
Author: ONZE
Author URI: https://on-ze.com
Version: 1.1
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

* {
border:0;
margin:0;
outline:0;
padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
font:inherit;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
text-decoration:none;
vertical-align:baseline;
}

html {font-size:62.5%; width:100%; height:100%;}

body {
font-size:10px;
font-size:1.0rem;
line-height:1;
position:relative;
text-align:center;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
width:100%;
height:100%;
}

article, aside, dialog, figure, footer, header, main, menu, nav, section {display:block;}
audio, canvas, video {display:inline-block;}

br,
hr {display:block;}

ol,
ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}

input,
select {vertical-align:middle;}

table {border-collapse:collapse; border-spacing:0; empty-cells:show;}

まず目に付く最初のポイントはユニバーサルセレクタを利用している点かと思います。

「ユニバーサルセレクタ（全称セレクタ）」とは、CSS上では * で記述され、サイト内の全要素に対して同じスタイルを適用できる便利なセレクタになります。

この「ユニバーサルセレクタ」ですが、最近までは「レンダリング速度が遅くなる」というデメリットが懸念されて「時代遅れ」的な感覚で扱われてきました。
しかし実際に検証した結果、サイトの読み込み速度等、パフォーマンスにはほとんど影響がないことが判明しています。
また最新の「sanitize.css」でも利用されており、むしろ今では「ユニバーサルセレクタを使わないほうが時代遅れ」と言えます。

関連する特筆すべき点として、［OZ Reset CSS］ではユニバーサルセレクタで box-sizing:border-box; を指定しており、「横幅・マージン・パディング」の指定の際にありがちなエラーに対しての予防策を講じています。

body要素には text-size-adjust:100%; を指定していることがポイントで、特に携帯端末での閲覧時に懸念される文字サイズの拡大・縮小を設定しています。

またHTML5で導入された新しいタグについては display:block; または display:inline-block; で「ブロック要素」として処理しています。

「OZ Reset CSS」の使い方

具体的な使い方としては、スタイルシートの先頭にこのコードを記述して、その後に各要素を上書きしてスタイリングしていくことになります。

リセット用のスタイルシートは、先に挙げた「Reset CSS」「normalize.css」「sanitize.css」の他にも、優れたCSSがいくつも存在します。
ここで紹介した「OZ RESET CSS」は絶対の自信を持ってオススメできるものですが、必ずしもこれが最善の解決策とは限りません。

コーディングする製作者の「クセ」もあります。

プログラムのコードは、時代と流行の変化や、各デバイス・各ブラウザの仕様変更に伴い、常に改善を余儀なくされていくものです。

最初のうちは単にコピペして利用するだけで充分かと思いますが、これらをベースにして自分だけのベストなリセット用のスタイルシートの設定方法を模索してみてはいかがでしょうか。

ライセンスについて

［OZ RESET CSS］の著作権（ライセンス）については暫定的に「GPL」としています。
著作権は放棄しませんが、どなたでもご自由にコピペしてお使いください。

感想や「ココはこうしたほうがいいのでは？」というような改善点があればお気軽に指摘していただけると嬉しいです。
でわでわ！