デフォルトのスタイルシートを作成する
「スタイルシートを弄りながら、IEで表示確認しながらページを作成しました」そうして、完成したのでネスケ、Operaの各ブラウザで表示の確認をしてみたけれど…、あれ？ なんだか表示が違う?」
スタイルシートを弄って、サイトをデザインする場合に、必ず一度は遭遇する問題です
まずはこの問題の解決法から
こういうときに、ブラウザごとに表示の違いが発生する原因はおもに３つに分けられます、次によく起こる順番で原因を上げていくと
- ブラウザごとのデフォルトのスタイルシートの違い
- 各ブラウザのバグ
- 各ブラウザの仕様
と言うふうになっています。そのうちおおよそ８割から９割は、ブラウザが持っている、デフォルトのスタイルシートの違いになっています
実際に悩んでみれば分かりますが、毎回毎回、直せる設定の違いに出会うたびに、その場で穴を潰すようにスタイルシートを書き換えてしまうのは面倒くさいですし、対応としても小手先で、決して褒められたモノではありません
こういう、無駄な２度手間を避けるのはどうすればいいのか？ 解決法は簡単です。ブラウザごとのデフォルトの設定をすべて上書きして、自分の基本設定をサイト全体に適応してしまえばよいのです。
主要なブラウザでの設定の違いは、CSS laboratoryのブラウザのデフォルトスタイルの違いなんかに書いてありますのでご参照あれ。一応、コレに従うならこの程度のスタイルシートを書いておけば良いのでしょうが、せっかく作るのですから、今現在、最低限の表示を確保するよりも、後のことを考えて出来るだけ完全なスタイルシートを用意した方が良かったりします
ちなみに、今自分が使っているのはCSS1対応ブラウザ用とCSS2対応ブラウザ用の二つ。いろんなブラウザのバグなんかと格闘しながら、紆余曲折を経て現在の形になっていますので。長ったらしい部分もあるかもしれませんね。と言っても、サイズにして１〜２kbyte程度のファイルにしかなっていませんが
一応、著作権云々のややこしいことを主張する気は全くありませんので、商用含めてご自由に流用下さい
表示確認するにも自分の使えるOS、バージョン、ブラウザなんかは限られていますから、その他のブラウザでの表示の壊れは怖いですし、それ以上に、今後、違うブラウザが登場したときに「嗚呼、また違うブラウザが…、普通に表示崩れおこしているし…」というのは悲しすぎます。転ばぬ先の杖と思って、出来るだけしっかりしたデフォルト設定を書いておきましょう。
ブラウザのバグさえなければ、理論上、ほぼ完全に同じ表示が得られます
まぁ、そもそもの原因は、W3Cがデフォルトのスタイルシートを決めていないことが原因だったりするのですが…。(screenメディアだけでもいいから決めて下さい、お願いします)
使い方
デフォルトのスタイルシートを作成したら、これの使い方は簡単。ページの基本設定を行っているスタイルシートの最初の行に@import文でデフォルトのスタイルを読み込ませましょう
@charset "Shift_JIS";
/* ここで、デフォルトのスタイルシートを読み込みます */
@import url("default.css");
body {
(以下省略)
}
先ほど紹介した自分のデフォルトスタイルシートである、html_default_css1.cssとhtml_default_css2.cssを読み込みます
@charset "Shift_JIS";
/* ここで、デフォルトのスタイルシートを読み込みます */
@import url("html_default_css1.css");
@import "html_default_css2.css";
/* ↑前の行と文法が違うのは、CSS2で新しく決められた書き方だから。
CSS1しか対応していないブラウザは、これで読み込めません */
body {
(以下省略)
}
こうすることで、まずブラウザごとにおこる表示の差を消し去ってしまいます。後々の作業のしやすさが全然違いますので
