スタイルシートのエラーが42個！？
スタイルシートの文法チェックをしたらこれだけのエラーが。。。
ホームページを作るからにはどのブラウザで見ても意図したとおりに表示されるのを望みます。 IE、Opera、Firefoxなどで確認することは大事なんですね。 一般的にはIEが一番使われていると思うのですがIEってスタイルシート（css）の表示の仕方が曖昧なんですよー。 適当というか・・・。ちゃんと厳密に扱ってくれないんですね。 ですから適当にタグのこと意識しなくてもIEではちゃんと表示してくれるんです。
だけどそんな風に適当に作ったホームページはIEで見ればなんともないんですが 厳密にスタイルーシートを表示するFirefoxで見るとレイアウトが崩れることがあります。
ひどいものだと本当にひどいんですよ。 文字が文字の上に重なったり、テーブルが横に大きくはみだしたりなど。 ホームページを作ったことがない人が見るとパソコンが壊れたのか！？バグ！？ など思って不安に陥るんですよ。 ウイルスかっ！？とまで思う人までいるのです（笑
、、、笑いごとではないですね。結構重大な問題なんです。 これを回避するためにはなるべく多くのブラウザで見ないとわからないんです。 IEだけで確認しているとこういう目にあう可能性が高いんですよ。
ですからサイト運営者はせめてIE以外にFirefoxで確認してみましょう。 そんなのめんどくさいよー、IEで見てる人だけさえ見てくれれば（しっかり表示されてくれれば）いい！ そう思う人はそれでもいいです。 あえてそういう対象にしぼってIE利用者だけに利用してもらう。 数から言えばIE利用者が多いのでこの考えでもいいのですが、 自分のサイトを見てウイルスに感染してるんじゃないか？と思われるのはあまり嬉しくないですよね。 私はそう思います。自分のサイトがウイルスに感染してるなんて思われたらショックですよー。
まぁこんなこといって私もそれほど対策してるわけじゃないんです。 まだサイト開設して間もないし、他にコンテンツも増やしていかないといけないし・・・。 とりあえず現状はIE、Opera、Firefoxの3つのブラウザで表示の確認をしています。 どれも最新の状態のもので確認してるので、最新のブラウザを利用している人には ちゃんと表示されると思います。
ただ古いブラウザはなんとも言えないです。確認できませんからね。 あとMacもわかりません。ちゃんと表示されているのかしら・・・。 今はまだ不十分のサイトですが、いつかはIE5.0やMacのブラウザにも しっかりと対応できるように専用の外部スタイルシートを作りたいなぁと考えています。 まだアクセスも少ないのでそれほど意識しなくてもいいかもしれませんが アクセスが増えることを期待しているので対策は必要です。
さて本題に入りましょう。 前置きが長くなってしまいました（汗
サイトのレイアウトや表示に大きく役立っているスタイルシートなんですが ブラウザによって表示が曖昧だというのは上でも述べました。 私は最初IEでサイトの表示を確認していました。IEと言うよりDonutQと言ったほうが正しいですね。 まぁIEもDonutQも同じようなものなのでIEとしておきます。
IEで見ると表示は何も問題ありませんでした。よし！やったぞ！ 他のブラウザではどうかな？ちゃんと表示されるかな？と思い、 まずはOperaでチェック。大丈夫、ちゃんと表示されてる・・・。 ここでもちょっと一喜一憂。
で、次はFirefoxで確認してみました。 そしたら意図した表示がされてないじゃないですか！ ここでショックを覚える私・・・。
当サイトの場合ウイルスが感染しているようなバグっているような感じではなかったのですが 見出しのh1やh2にスタイルシートが適用されていなかったんですね。 どうしてだろう、Firefoxは見出しタグにスタイルシートが適用されないのか！？ なんて自分の都合のいいように考えていたんですが、h3はしっかり表示されているんですね。 と言うことは見出しタグにもスタイルシートは適用される、 つまり他の何かが原因で表示されなくなっている、ということがちょっと時間がたってから気づきました(*ﾉ∀`)
それから何が原因なのかと思いスタイルシートの文法チェックをしました。 特別変な記述もしていなかったと思っていたので大丈夫だと思っていたんですが Firefoxが私の言うことを聞いてくれないので、ここは文法チェックだろうと思い、してみた訳です。 そうするとエラーが42個も出ました！
ぇーーーーーーーーーーーーーーー！？
ある意味快挙です、すばらしい数字を残してくれましたヽ(*´▽`)/ あっても10個位かなと思っていたんですが、見事に期待を裏切ってくれました（笑 。 これこそがスタイルシートがちゃんと表示してくれない理由なんだなとやっと理解しました。
理由がわかったからにはやることは1つ！ エラーを0にすることです。そうすればしっかり表示されるはず！ で、エラーの原因を調べるためにいろいろと調べていたんですがなかなか知りたい情報が出てきません。 記述の仕方に問題があるのか？記述する順番でもあるのかと思って適当にcssを入れ替えていると エラーが40個になりました。 やっぱり記述の順番が問題なのかと仮説を立て、いろいろと試行錯誤していたのですが、 エラーが1つも減りません。どうやらこの仮説は間違っていたようでした。 よく自分のいいように仮説を立てて失敗しています・・・。
エラーを解析してから5時間がたってもエラーは2つしか減っていません。 この調子でいくと2つエラーをなくすのに5時間、残り40個のエラーがあるから 単純計算であと100時間必要になります。果てしない数字です・・・。 正直この時、Firefoxに対応したサイトを作るのをあきらめました（笑 。 こんなに時間がかかるとなると別にいいや、って思ってしまいました。
それから1週間が経過し、やっぱりエラー減らさないとなぁと思い、また試行錯誤の始まりです。 教えてgooなどを見てクッキーやキャシュを削除してから表示してみるといいと書いてあったので、 その通りにやってみても上手くいきません。 正直嫌気がさしてきました。
この時も5時間ぐらい調べていたのですが、ある情報に目がとまりました。 スタイルシートの記述の時に全角のスペースをいれるのはいけないと。 そんなことは知ってるよ！でも、もう調べつくしたし・・・。 その時はez-htmlというエディタを使っていたのですが、これだと全角でスペースをいれたのか タブを使っていれたのかわかりません。 そこでクレセントイブというエディタを使ってみました。 すると、あれ？と思うようなところが出てきました。 もしかして全角スペースで打ってる？その部分を消してタブで空白を入れてみると・・・。 あーーーこれかぁ。これが原因だったのかと。
実はメモ帳などで打っていると気づかないのですが 全角スペースとタブを使って空白を入れた時は厳密に言うと違うと言うことがわかりました。 それがわかったので全角スペースで空白にしているところを修正していきました。 そして文法チェックをすると・・・・
おめでとうございます！ エラーはありません。
と表示されました。 その瞬間肩の荷が下りた感じでした。よかったです、100時間も時間を使う必要がなくなってほっとしました。 ちなみに下の画像はcssのエラーがないことを証明する画像のようです。 一応貼っておきます。
