十八日目！（ＣＳＳリセットスタイル）

ＣＳＳつづきです。

●リセットスタイル
ブラウザにはあらかじめＣＳＳが用意してあり、自動的にＸＨＴＭＬに適用してある程度読みやすい状態で表示する。たとえば、各要素にマージンやパディングを設定して間隔や余白をもうけたり、フォントの大きさや太さ、色、線など修飾を施してくれている。このようなブラウザがはじめから備えているスタイルを「デフォルトスタイル」という。
しかし、ＣＳＳで見た目を詳細に指定するとき、デフォルトスタイルが邪魔になることがある。全てのブラウザで、ページ全体（body要素）の内側の余白、見出し、（h1-h6）の大きさ、段落（p要素）と段落(p要素）の間隔などを同じにしたいと思ったとき、デフォルトスタイルが影響して思うようにいかないことがある。
このような問題を避けるために、デフォルトスタイルを初期化するためのＣＳＳファイルを用意しておく方法がよく利用される。このスタイルを「リセットスタイル」という。ファイル名には「reset.css」や「default.css」などがよく使われる。このＣＳＳファイルを最初に読み込んでおくことで、ブラウザ間での表示統一がラクになる。

さまざまなサイトやブログでリセットスタイルが提案されている。たとえばThe Yahoo! User Interface Library（YUI）に「YUI Reset CSS」や「YUI Base CSS」がある。

まず、「YUI Reset CSS」を適用して、要素のマージンやパディングを取り去ったり、フォントサイズを100％にしたりブラウザのデフォルトスタイルのうち主要な部分をリセットしたあと、「YUI Base CSS」を適用して、各要素の基本的なスタイルを再定義する、というかたちで利用。
ソースコードをコピー＆ペーストで自分のＣＳＳに取り込みカスタマイズして使うのが現実的。
他にもいろんな人のリセットスタイルが公開されているので、参考にしながら、自分なりのリセットスタイルや制作チームで定番のリセットスタイルを作っておくと便利。

●どこまでリセットするのか
デフォルトスタイルをどこまでリセットするのかについて、特に決まった方法はないが、以前はユニバーサルセレクタ（*）を用いてすべての要素のマージンやパディングをカットしたり、フォントやテキストのスタイルさえ詳細にリセットする方法もよく利用されていたが、スタイルの再定義が面倒でソースコードが大量になりがちなことや、一部のブラウザでフォームパーツに崩れやつぶれが発生すること、残しておいてもよいスタイルまでリセットされてしまうなどのデメリットがあるため、最近では必要な要素だけリセットしたり、利用頻度の高いブロックレベル要素中心にリセットすることが多くなった。指定するスタイルも、マージンとパディングのカット、プラスアルファで数個、ということが多いよう。

リセットスタイルを記述したファイルは、どのようなWebサイトをつくるときにも使いまわせるが、「できるだけ完全にブラウザごとの見た目を統一したい」という要望の元で強いリセットをかけたり、「デフォルトスタイルを活かし、見た目の統一よりも制作スピードや各デバイスで情報がとれることを優先したい」という場合はリセットなしで進めることもある。

●指定しておくと便利なリセットスタイル
ブラウザのスクロールバー表示の違いを解決
スクロールの必要がない短いページについて、スクロールバーを表示するかどうかはブラウザによって異なるが、おおくのブラウザが表示するのに対し、FireFox3は表示しないため、ページ遷移の際にスクロールバーの幅の分だけコンテンツが左右にずれてしまい、違和感を覚えることがある。この問題を解決するため、次のように指定し常にスクロールバーが表示されるようにする。

html {
  overflow: scroll;
  overflow: -moz-scrollbars-vertical;
  overflow-x: scroll;
}


表（テーブル）のボーダー表示の違いを解決
表のボーダーの表示方法は、各セルのボーダーを個別に引く方法(separate）と重ねて引く方法（collapse）のふたつがあり、border-collapseプロパティで指定できる。また別々に引く場合にどのくらい離すのかをborder-spacingプロパティで指定できるがブラウザによってこれらの設定が異なる場合があるので、次のように指定して統一する。

table {
  border-collapse: collapse;
  border-spacing: 0;
}


画像のリンクボーダーの非表示
画像にリンクを設定した場合、ブラウザ上で自動的にボーダーが引かれる。次のように指定して、画像リンクのボーダーが表示されないようにし、リンクボーダーが必要な画像は、あとから個別にボーダーを設定する。

img {
  border: 0;
}




今日はここまで。