CSSをクロスブラウザで作成するデフォルト設定 （YUI Reset CSS）

CSSでレイアウト作成を行っていると、フォントサイズ、マージンなどブラウザによって異なるデフォルト値となる部分も多く、見え方が違ってくることがある。CSSデザインを行なっていく上で参考にしたいのがYUI Reset CSS。JavaScriptライブラリであるYUI Library に含まれてリリースされている。

YUI Reset CSSを自分のサイトに導入する際、直接 Yahoo!-API サーバのファイルを参照させることもできる、自分でカスタマイズなど行う場合はソースコードを参照できるので、C&Pすれば良い。サンプルはとっても地味なので、実際にレイアウトする際に使うと便利さが分かるかと思う。

ソースコードは画面下から

その他にも、YUI Fonts CSSも用意されている。こちらはフォント関連のCSS設定を行うスタイルシートだが、フォントサイズや使用するフォント指定などがあらかじめ指定されている。

スタイルシートを多用してページデザインを行う上でこうしたクロスブラウザ対応のテクニックを取り入れていくことで、微妙なブラウザ表示の違いを簡単に補うことができる。