YUIのリセットスタイルを使う

 CSSの先頭に、*(ユニバーサルセレクタ)などを使って、各要素のmarginやpaddingを0にしたり、簡易なリセットを掛ける場合が多いと思います。しかし、ユニバーサルセレクタを使うと、不必要なところまでリセットが掛かってしまい不便な場面もあります。ここでは、リセットスタイルとして実際のWeb制作の現場でもよく使われている、YUI(Yahoo! User Interface Library)のCSSをご紹介します。

 まずは、リセットスタイルを使用しないで書いたHTMLを見てみましょう。こちらから。

1.reset.css

基本的なリセットスタイルが記述されています。(-minは圧縮版です。読み込み速度を重視する場合に使用します。)
http://yui.yahooapis.com/combo?2.9.0/build/reset/reset-min.css
http://yui.yahooapis.com/combo?2.9.0/build/reset/reset.css

このreset.cssのみ適用したサンプルのHTMLを作ってみました。こちらから。

2.base.css

各要素の標準的なスタイルを再定義しています。
http://yui.yahooapis.com/combo?2.9.0/build/base/base-min.css
http://yui.yahooapis.com/combo?2.9.0/build/base/base.css

今度は、reset.cssとbase.cssを適用して、標準的なスタイルを定義したHTMLを見てみましょう。こちらから。

このHTMLをFireFoxとInternet Explorerの両方で見てみましょう。ブラウザによって、基準となるフォントの大きさが異なることが分かると思います。次にご説明するfonts.cssで、その差を吸収することができます。

3.fonts.css

フォントサイズをsmall、medium、large等、相対指定した場合にブラウザ間で大きさが異なる問題を解消してくれるCSSです。
http://yui.yahooapis.com/combo?2.9.0/build/fonts/fonts-min.css
http://yui.yahooapis.com/combo?2.9.0/build/fonts/fonts.css

reset.css、base.css、fonts.cssの順番に、3つのCSSファイルを全部適用した場合のサンプルのHTMLがこちらです。

このHTMLも、FireFoxとInternetExplorerの両方から見てみましょう。フォントの大きさに関しては双方とも同じに設定されていることが分かると思います。CSSでフォントサイズをピクセル指定する場合は気にしなくても構いませんが、small・large・medium・100%・115%・85%などの指定をする場合には、fonts.cssが無いとブラウザによってフォントサイズが異なってしまいますので注意しましょう。

これらは、下記のURLより入手できます。

http://developer.yahoo.com/yui/articles/hosting/

 画面の指示に従って、Reset CSS PackageやBase CSS PackageやFonts CSS Packageを選択すると、画面の下のほうのウインドウに該当するCSSへのパスが表示されます。(赤色網掛けの部分)このままソースコードをご自分のHTMLのヘッダにコピーペーストしてもいいのですが、何らかの理由でリンクが切れてしまう可能性も考えられますので、CSSの内容をダウンロードして使用するのが望ましいでしょう。URLをコピーペーストしてブラウザで開くとCSSが表示されますので、全てを選択してテキストエディタ等に貼り付けて保存しましょう。非圧縮版のCSSファイルが欲しい場合は、「-min」を消去してからブラウザでURLを開けば表示されます。

PageTop