きまぐれAWA's Life

アクセスカウンタ

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

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

ブログ気持玉 0 / トラックバック 0 / コメント 2

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


【追記 09/12/27】
スタイルシートのエラーチェックのやり方についての記事を書きました。
でそちらも併せてご覧下さい(ぺこ)

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(活用編)スタイルシートのエラーチェックのやり方




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


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(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

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(活用編) スタイルシートのエラーチェックをしてみよう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる