ブラウザ間での表示のズレを解消するリセットCSS
2016年9月21日
ブラウザによる表示のズレに困ったことはありませんか？
そんな時、リセットCSSを使えば、ブラウザ間での差異を解消することができます。
リセットCSSでよく使われるreset.cssやnormalize.css、そしてsanitize.cssを使い分けて、Webサイト制作に活かしましょう。
リセット用CSSとは
Google Chrome、Internet Explorer、FireFoxやSafariなど、世界中で様々な種類のブラウザが使用されています。
それぞれのブラウザで、HTMLのタグごとにデフォルトのスタイル（余白やフォントの大きさといった見た目）を独自に定義しています。
このデフォルトスタイルのままWebサイトを制作すると、文字サイズや余白の大きさが違ってしまうなど、各ブラウザによってデザインの表示が変わってしまうことがあります。
このようなブラウザごとの表示差異を解消するために、一度デフォルトスタイルをリセットしてからCSSを書き始めるためのスタイルシートが、リセットCSSです。 リセットCSSを利用することで、ブラウザ間の表示の違いを最小限に抑えることができ、各要素の必要な部分だけをスタイルすることができます。
これまでよく利用されていたリセット方法
全称セレクタによるリセット
全称セレクタ（ユニバーサルセレクタ）を用いて、あらゆる要素を一括でリセットする方法で、広く使用されているやり方です。 コードも短くて済みますが、デフォルトスタイルのいい面まですべてリセットするので、すべて自分でスタイルを設定しなおさなければなりません。 そのため、ブラウザのレンダリング速度に影響する可能性があります。
1.「Yahoo!(YUI3)Reset CSS」を使う
Yahoo! User Interface Libraryのreset.cssを使った方法です。 ライセンス表記を消さなければ、改変や複製、再配布や商用利用も可能です。 CSSファイルをダウンロードしてWebサイトのサーバーにアップする方法のほか、HTMLファイルの内にコードを記述して、直接リンクで読み込むこともできるため、日本では特に人気のあるリセット用CSSです。
2.「normalize.css」を使う
normalize.cssは、それまでのリセット用CSSと違って、ブラウザの有用なデフォルトスタイルはそのまま維持し、スタイルの正常化やバグの修正、ユーザビリティの改善などを行うことを目的としたCSSです。HTML5やIE6にも対応しています。
3.「sanitize.css」を使う
normalize.css" target="_blank">sanitize.cssは、先述した「normalize.css」の共同開発者の一人であるJonathan Neal氏による新しいプロジェクトで、最近の実装スタイルに合った手法となっています。また、スマートフォンなどのモバイル端末にも対応しています。
sanitize.cssは、normalize.cssと同様に、各ブラウザの有用なデフォルトスタイルはそのまま維持するという考え方で設計されています。
対応ブラウザ
sanitize.cssは、下記のブラウザに対応しています。
パソコン
- GoogleChrome 39-40+
- Internet Explorer 10-11+
- Firefox 34-35+
- Safari 7-8+
モバイル端末
- iOS 7-8+
- Android 4.3-4.4+
- Windows Phone 8.1+
4.オリジナルのリセットCSSを使う
人にはそれぞれ、コーディングしやすいスタイルセットがあるはずです。 コーディングに慣れてきた方は、オリジナルのリセットCSSを作っておいて、試行錯誤を繰り返しながら使い勝手の良い自分専用のリセットCSSを作ってみましょう。
まとめ
一口にリセットCSSといっても、様々な方法があります。従来からある全称セレクタを使ったリセット方法から、次第にブラウザのデフォルトスタイルの良い面を活用するために、ライブラリの活用も増えてきました。
既存のライブラリをカスタマイズすることで、より使い勝手の良いリセットCSSを作ることもできます。CSSの知識があれば簡単に取り組める「リセットCSS」、ぜひ様々なブラウザやモバイル端末にも対応するsanitize.cssを利用して、あなたも自分オリジナルの素敵なWebサイトをデザインしてみませんか。
本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。
