2013/02/04

CSS のリセットとノーマライズという2つのアプローチとライブラリ


書籍「すべての人に知っておいてほしい HTML5 & CSS3 の基本原則」を読んでなるほどと思ったのが、CSS のリセットとノーマライズという2つのアプローチです。

CSS の「リセット」は、要素の margin や padding を0にしたりすることでブラウザのデフォルトスタイルをリセットして、自分で各要素の設定を行うアプローチです。

それに対して、CSS の「ノーマライズ」はリセットするのではなく、ブラウザ間の表示差異を吸収することでブラウザのデフォルトスタイルをいかしながら CSS の再定義もなくすというアプローチです。

CSS のリセットで有名なライブラリは Yahoo! User Interface Library の「CSS Reset」だそうです(BSD ライセンス)。以下のように CSS を読み込むだけで簡単に CSS のリセットができます。なお、書籍の URL は古いバージョンになっているためご注意ください。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">

CSS のノーマライズで有名なライブラリは「normalize.css」だそうです(MIT ライセンス)。なお、 normalize.css はバージョン2系列は IE7以下のレガシーブラウザをサポートしないそうなので、IE7以下を使用する場合はバージョン1系列を使用する必要があります。

また、たまたま見つけたのですが、CSS のノーマライズライブラリとして Yahoo! User Library の「CSS Base」も使えそうです(BSD ライセンス)。「CSS Reset」と同じように以下のように CSS を読み込むだけで簡単にノーマライズを行えます。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssbase/cssbase-min.css">

CSS のりセットは時々ブログエントリーを見かけますが、ノーマライズは見かけたことがなかったので新しい発見でした。


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。

    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから