各ブラウザーのデフォルトスタイルを揃えるリセットCSSテーブルレイアウトを卒業しようこのページに掲載されている内容は、2010年に作成されたものです。各ブラウザーのデフォルトスタイルを揃えるリセットCSS前回はフォントサイズを揃える方法でしたが、今回はさまざまな要素のデフォルトスタイルを揃えたいと思います。スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。前回も書いたとおり、ブラウザーは最初からデフォルトスタイルを持っています。さまざまな要素のmargin,paddingなどなどが微妙に違うため、これらを一度すべてリセットをかけて統一し、CSSのコーディングをする人がスタイルを書き直す、というのがリセットCSSの考え方です。いろいろなリセットCSSリセットCSSの書き方にはいくつかのバリエーションがあります。全称セレクタでリセットする全称セレクタ(ユニバーサルセレクタ)を使って、あらゆる要素を一括で設定する方法です。Gothic",sans-serif;}例えばこんな感じです。コードも短くて楽といえば楽ですが、個人的にはあまりオススメではありません。この方法は「ページ内のあらゆる要素をリセット」するので、逆をいえば「ページ内のあらゆる要素をスタイル」しなくてはいけなくなります。璧にズレのないページは作れるかもしれませんが、デフォルトスタイルのままでもいいような部分までスタイルしなくてはいけなくなります。スタイルを適用するため、レンダリング速度の低下も懸念されます。限定した要素のみリセットする全称セレクタであらゆる要素をリセットしてしまうのがまずいのであれば、自分で決めた要素だけリセットすればいいということで、要素を1つ1つ指定する方法です。Gothic",sans-serif;}例えばこんな感じです。リセットしたい要素は追加、したくない要素は削除というようにして、自分でカスタマイズできます。0;}このようにimg要素を追加してもいいですね。いったものをまとめてreset.cssとかdefault.cssのような形で用意しておくと、汎用性があって便利ではないかと思います。Libraryでは、フォントのリセットだけではなく、デフォルトスタイルのリセットCSSも公開されています。考え方は先述の限定した要素のリセットと同じですが、非常に細かな部分まで設定されています。使い方は前回同様に、下記のようにリンクするだけです。href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">これをそのままリンクで使ってもいいでしょうし、コードを参考に自分用に最適化したリセットCSSを作ってもいいですね!では次回もお楽しみに。)XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。Twitter大切にします個人情報m-Schoolは、お客さまのプライバシーを守ります。3分コーディング各ブラウザーのデフォルトスタイルを揃えるリセットCSS。