デフォルトスタイルのポイントリセット

以前デフォルトスタイルのinheritリセットを紹介しましたが、これは一気に全てのスタイルをリセットする方法でした。

今回は、スタイルを設定する要素のみリセットする方法を紹介します。

名付けてポイントリセット!

CSSソースには属性セレクタ[attribute]を使っており、非常にシンプルです。

#main *[id],
#main *[id] *,
#main *[class],
#main *[class] *{
  backgound: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

例では、#main(メインコンテンツ)内にある、idとclassが設定された要素の背景、境界線、マージン、パディングをリセットしています。

デザインをCSSで設定するとき、HTMLファイル内の要素のidとclassでセレクタを書きますよね。

つまり、idとclassが設定された要素さえデフォルトスタイルのリセットができればいいんでない?っていう考え方です。

属性セレクタをより詳細な[attribute="value"]といったカタチにしたり、リセットする内容を変更すれば、結構応用できると思います。

問題点は、属性セレクタに対応していないIEの存在ですが、幸いIE7.jsなどの優れたスクリプトによって属性セレクタが使えるようになります。

デフォルトスタイルで困っている方はお試しあれ!