いまからフルスクラッチでWebサイトをつくるなら是非導入したい4つの基本CSSモジュール

CSSフレームワーク全盛の中でフルスクラッチでWebサイト、Webサービスを作らなければいけないことって結構あったりするものですが、そんな時に知っておくと便利なCSSモジュールをご紹介します。

CSSリセット

CSSでデザインするときに邪魔になるブラウザ毎の独自定義や解釈の違いをリセットして、ゼロの状態に戻すのがCSSリセットの役割。

定義はいろいろありますが、いま一番メジャーなCSSリセット定義が「Eric Meyer Reset CSS 2.0」です。

Eric Meyer Reset CSS 2.0

Normalize

CSSリセットですべてをクリアしてしまうのではなく、良いところを活かして悪いところを補正するというスタンスで広まっているのが「normalize.css」です。

NormalizeとCSSリセットってなにが違うのよ?という辺りが詳しく知りたい方はこちらのサイトが参考になるかと思います。

Normalize

ClearFix

Floatの回り込み解除で利用されるClearFix。
CSSフレームワークをつかうのが主流になってきているので最近はあまり話題になりませんね。
いい加減 IE6/7 の記述は不要かもしれません。

 メディアクエリーテンプレート

レスポンシブデザインに対応するなら必携のデバイス別メディアクエリー。
特定のデバイスで表示を変えたいときは、対応したメディアクエリーの中でスタイル定義をするだけでOKです。


 

CSSフレームワークでは冗長過ぎるときも、こういうシンプルなモジュールならドンドンつかっていけるので本当に助かりますね。

HTML5/CSS3が実用的になって作り手の作業が増えた分は、こういうシンプルなモジュールを積極的につかって楽をしたいものです。

フルスクラッチでWebサイト構築をする機会があれば是非つかってみてください。