YUI Reset CSSを利用してみよう
リセットCSSを作ってみたいけど、まだ何をどう指定すればいいのかわからない！という方もいらっしゃるかもしれません。そんな方に参考にして頂きたいのが、「YUI Reset CSS」です。「YUI Reset CSS」は、米ヤフーが無償で提供しているJavaScriptとCSSのライブラリ「Yahoo User Interface Library」に含まれてリリースされているもので、誰でも利用することができます。非常によく作り込まれたリセットCSSで、実際に利用してみると、その便利さを実感できるのではないかと思います。
YUI Reset CSSの利用方法
YUI Reset CSSは、直接ソースコードを参照することができるので、コピー＆ペーストしてリセットCSSを作成するか、あるいはリセットCSSをダウンロードしたうえで、自サイトのサーバに置いて利用するのが良いでしょう。他に、自サイトのサーバに置くのではなく、米Yahoo!のAPIサーバに置かれているYUI Reset CSSファイルを読み込むようにすることも認められていますが、この場合、日本と米国との間を通信することになってしまいますし、ページを表示する際に必要なHTTPリクエストの数も増えてしまうため、ここはやはり、自サイトのサーバに設置して利用するのが無難でしょう。
ソースコードは、「YUI Reset CSS」から参照、またはダウンロードすることができます。
ダウンロードしたファイルを解凍すると、「yui」というフォルダができます。その中の「yui＞build＞reset」に「reset.css」と「reset-min.css」というファイルが入っています。内容は同じですが、reset-min.cssの方がファイルサイズが小さくなるよう改行なしで記述されています。
後は、使用したいHTMLのヘッダー部からリセットCSSを参照するだけです。
<link rel="stylesheet" type="text/css" href="reset-min.css" />
また、直接Yahoo!APIサーバに置かれているYUI Reset CSSファイルを参照したい場合には次のように記述します。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />
このYUI Reset CSSは、あらゆるデフォルトスタイルをリセットすることができるようになっていますが、表示速度の観点から、サイトで使用しないものや、リセットしたくないものなど、不要な部分は削除しておくと良いでしょう。YUI Reset CSSを丸投げで導入するのではなく、これをベースに、自分なりのリセットCSSにカスタマイズしていきましょう。既存のリセットCSSを参考にする場合には、どのような処理を行っているのか、その内容を一つずつ把握することが重要となります。
まとめ
どの要素にどのようなデフォルトスタイルが適用されているかを、あらゆるブラウザで確認し、一つずつ修正を加えるというのは、とても手間がかかります。今回紹介したリセットCSSは、スタイルを作り込む前の下ごしらえとして活用されるテクニックです。「あれ？ なぜこんなところに余白が！？」といった状態に陥ることを回避し、クロスブラウザな表示を目指す上で、作業効率をアップさせるための有効な手段となるでしょう。
