CSS（活用編）スタイルシートのエラーチェックをしてみよう♪ きまぐれAWA's Life/ウェブリブログ

CSS（活用編）スタイルシートのエラーチェックをしてみよう♪

<< 作成日時： 2008/06/10 19:40 >>

トラックバック 0 / コメント 2

がんばってCSS編集を行ってもエラーがあっては思うような効果が得られません。
ブログに適用する前には記述に間違いが無いかエラーチェックをしておきましょう。

スタイルシートのエラーチェックをする♪

スタイルシートのエラーチェックはこちらのサービスを利用させていただいてます。

W3C CSS 検証サービス

スタイルシートにエラーが無ければこのような評価が貰えます。

おめでとうございます！エラーはありません。　

おめでとうございます！
この文書は正当な CSS レベル 2.1 として検証できました!

そしてこんなバナーが頂けます。

ブラウザによっては認識できないことも…

スタイルシートに問題が無い場合でも使用する環境やブラウザによっては、
思ったような効果が得られないことがあります。

うちが確認しているのは『 Internet Explorer 6 （以下IE）』と『 FireFox 』になりますが、
このふたつのブラウザでも違いがあったりします。

『スクロールバー』を例に挙げてみます。
CSS編集を行うことでスクロールバーの色を変えることが出来ます。
色を変えるには以下の文字列を追加します。

html{
scrollbar-base-color: #DFEBF6;
scrollbar-face-color: #DFEBF6;
scrollbar-track-color: #ECF3F9;
scrollbar-arrow-color: #1B7DE0;
scrollbar-3dlight-color: #1874CF;
scrollbar-highlight-color: #ECF3F9;
scrollbar-shadow-color: #ECF3F9;
scrollbar-darkshadow-color: #1874CF;
}

IE ではこのようにスクロールバーの色が変わります。
ただし、これはIE（5.5以降）でのみ表示されるようになっているので、
FireFoxなど他のブラウザでは設定は反映されません。

デザイン指定を行う場合にはそのデザインの効果と
対応するブラウザの確認が必要になってきます。

ところで、FireFox にはエラーコンソールというものがあります。
それを利用してエラーチェックをしてみるのもいいですね。

[ ツール＞エラーコンソール ]

[ エラーコンソール ]

エラーコンソールを見ると次のような警告文が書かれています

警告: 不明なプロパティ 'scrollbar-base-color' が使用されています。
このスタイル宣言は無視されました。

不明なプロパティ、つまり FireFox では対応してませんよってことですね。

CSS編集でのデザインの効果は全てのブラウザで確認するのが理想ですが、
そこまでは出来ませんので代表的なものはしたほうがいいでしょうか。
まぁ、うちがしているのはこの二つだけなんですが…（あせ））

【おまけ】　ホームページのエラーチェックをする♪

CSS編集のエラーチェックはW3C CSS 検証サービスでおこないましたが、
ホームページのエラーチェックは違うサービスを利用して行えます。

HTML文書の文法チェック

Another HTML-lint gateway

ホームページのエラーチェックのほかにスタイルシートのチェックも出来るので、
こちらのチェック結果も参考にするといいかもしれません。

スタイルシートのエラーを無くしてブログのカスタマイズを楽しみましょう（ん）

それでは、今回はこのくらいで（にこ）

|ω・)ﾉｼ See you♪

|彡ｻｯ

CSS編集や小技でブログをコーディネート♪
デザイン変更のための記事をいろいろまとめたページです。

ブログをいじっちゃおぅ♪　～ブログのレシピ～

<< 前記事（2008/06/10）

トップへ

後記事（2008/06/11）>>

月別リンク

トラックバック（0件）

タイトル（本文）	ブログ名／日時

コメント（2件）

内容	ニックネーム／日時
(ゝ(ェ)･)ﾉ.｡o○コ.｡o○ン.｡o○バ.｡o○ン.｡o○ワ.｡o○ ＞CSS 　(・0・。) ほほーっ・・チェックするサイトがあったのですね・・・φ(･ω･(･ω･)φﾒﾓﾒﾓ♪ 情報(人´ω｀)．ア☆．リ。ガ．:ト＞IE6 　FireFoxに出会ってからは、IE6は殆ど使っていません（ん）　ましてやIE7は・・・・・・(・・*)ノ ⌒◇ポイッ　なぜかと言えば・・・W3CやCSS2.1への対応度が良くないからです（まじ）	松下禅尼 URL 2008/06/11 22:56
松下さん、いらっしゃい（にこ）＞エラーチェックええ、こんなサイトがあったりするんですねぇ（ん）うちもたまたま見つけて利用させてもらってます。何も解らずCSS編集を始めてやってたんですが、こちらでチェックしたらエラーがド～ンと出ましたよ(^m^) それからはエラーチェックをするようにしてます。クラブのHPを作る時は『Another HTML-lint gateway』さんにとてもお世話になりました（気まずい）まぁ、スゴイ評価いただきましたし（ひょえ））＞ブラウザ普段は『Sleibnir』を使ってるんですが、『FireFox』と使い分けたりしてます。 IE7は一度インストールしたんですが、どうも使い勝手が悪くて…（あせ）あと、なんか表示が狂ったりする時があったんで IE6に戻しちゃいましたが（＞ε＜）ゞ＞対応度この辺りを改善して貰えるといいんですがねぇ…（気まずい）	mairis 2008/06/12 00:33

内容

ニックネーム／日時

　(*ゝ(ェ)･)ﾉ.｡o○コ.｡o○ン.｡o○バ.｡o○ン.｡o○ワ.｡o○
＞CSS
　(・0・。) ほほーっ・・チェックするサイトがあったのですね・・・φ(･ω･*(･ω･*)φﾒﾓﾒﾓ♪
情報(人´ω｀)．ア☆．リ。ガ．:ト*

＞IE6
　FireFoxに出会ってからは、IE6は殆ど使っていません（ん）
　ましてやIE7は・・・・・・(・・*)ノ ⌒◇ポイッ
　なぜかと言えば・・・W3CやCSS2.1への対応度が良くないからです（まじ）

松下禅尼
URL
2008/06/11 22:56

松下さん、いらっしゃい（にこ）

＞エラーチェック
ええ、こんなサイトがあったりするんですねぇ（ん）
うちもたまたま見つけて利用させてもらってます。
何も解らずCSS編集を始めてやってたんですが、
こちらでチェックしたらエラーがド～ンと出ましたよ(*^m^*)
それからはエラーチェックをするようにしてます。

クラブのHPを作る時は『Another HTML-lint gateway』さんに
とてもお世話になりました（気まずい）
まぁ、スゴイ評価いただきましたし（ひょえ））

＞ブラウザ
普段は『Sleibnir』を使ってるんですが、
『FireFox』と使い分けたりしてます。
IE7は一度インストールしたんですが、
どうも使い勝手が悪くて…（あせ）
あと、なんか表示が狂ったりする時があったんで
IE6に戻しちゃいましたが（＞ε＜）ゞ

＞対応度
この辺りを改善して貰えるといいんですがねぇ…（気まずい）

mairis
2008/06/12 00:33

<< 前記事（2008/06/10）

トップへ

後記事（2008/06/11）>>

きまぐれAWA's Life