CodeZine(コードジン)

特集ページ一覧

ブラウザのデフォルトスタイルをリセットする

クロスブラウザなレイアウトデザインテクニック 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/10/03 14:00

目次

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 Reset CSS:ソースコードは画面下から参照
YUI Reset CSS:ソースコードは画面下から参照
ダウンロードする場合

 ダウンロードしたファイルを解凍すると、「yui」というフォルダができます。その中の「yui>build>reset」に「reset.css」と「reset-min.css」というファイルが入っています。内容は同じですが、reset-min.cssの方がファイルサイズが小さくなるよう改行なしで記述されています。

 後は、使用したいHTMLのヘッダー部からリセットCSSを参照するだけです。

XHTMLのソース
<link rel="stylesheet" type="text/css" href="reset-min.css"     />

 また、直接Yahoo!APIサーバに置かれているYUI Reset CSSファイルを参照したい場合には次のように記述します。

XHTMLのソース
<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は、スタイルを作り込む前の下ごしらえとして活用されるテクニックです。「あれ? なぜこんなところに余白が!?」といった状態に陥ることを回避し、クロスブラウザな表示を目指す上で、作業効率をアップさせるための有効な手段となるでしょう。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5