きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(活用編)スタイルシートのエラーチェックのやり方

<<   作成日時 : 2009/12/27 02:35   >>

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

スタイルシートのエラーチェックのやり方を具体的に書いてみたいと思います(ん)





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

W3C CSS 検証サービス



こちらのサイトでのエラーチェックですが、

  1) URLを指定 (サイトのアドレスを入力する)
  2) アップロード (PCに保存してあるスタイルシートをアップロードする)
  3) 直接入力 (スタイルシート本文を書き込む)


・・・と3通りの検証方法が選択できます。



今回は3番目の「直接入力」で話を進めていきますね(にこ)





「直接入力」のタブをクリックすると以下のようなページに移動します。


画像



テキストエリアに検証したいスタイルシート本文をコピペして
【検証する】ボタンをクリックすると検証スタートです。

※ オプションについてはデフォルトのままで問題ないと思います。






このようなページが表示されたらOKです(にこ)b


画像


※下の方の「警告」部分もクリアするのが望ましいですが、今回は触れません。









でも、スタイルシートに問題があると・・・


画像




エラーの詳細が列挙されますΣ(@ぎょ)




エラーが出たらページで示されたエラー箇所を確認して修正をしていきましょう!




■ エラーの確認の仕方

画像



左から「行番号」「ID名、クラス名などのスタイル指定場所」「エラー詳細」となっています。

ページにしたがって、エラー箇所を上から順番に修正していきます。

※ 上から修正を進めていくと、表示されている行番号とエラー箇所がずれてしまうコトがあります。
※ 行番号はあくまで目安にしてください。
※ また、ひとつの記述ミスが下のほうまでエラーを引きずるケースもあります。
※ 修正する過程で、細かくエラーチェックし直すのがいいかもしれないですね。




■ エラーで示される語句について

ややこしい書き方がされているので、「どうしてエラーなの?」というコトも出てきそうです(気まずい)
じ〜っとスタイルシートとにらめっこして、何が間違っているのか見極める必要があります。



■ よく目にするけれど「何コレ?」〜なエラー警告

文法解析エラーが発生しました
Lexical error at line ***, column 1. Encountered: (※ 「***」は行番号)



上の警告文の場合、ミスがはっきりと記述されていない(出来ない?)コトが多く、
何が原因なのかわかりにくいかもしれません。
この場合、数行にわたってミスと判断されるコトもあるので、行番号を目安にして
前後の文字列をじっくり観察してください。
※どうしても見つからない時はそのあたりの文字列を削除してしまうのもひとつの方法です。


例えば以下のようなケースでこの警告文がでるコトがあります。

【例】
・ 全角文字や全角スペースが使用されている
・{ }内に収まっていない文字列がある
・ 意図せず『}』が余分に残っているケース

※ ほんの一例です。
※ こちらのエラーについては気がついたら追記していきたいと思います。











説明不足な部分もありますが、こんな感じでスタイルシートのエラーチェックをしてみてください。

でもエラーがあるのはわかったけど、一体どこをなおしていいやら〜(あれ)???
・・・ってコトも出てくるかもしれませんね(気まずい)

もし、どうしても見つからない場合はお気軽にコメントください(にこ)
一緒に頑張りましょう(にこ)ノ





それでは、今回はこのくらいで(にこ)

|ω・)ノシ See you♪

|彡 サッ





【 関連記事 】

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




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


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(1件)

タイトル (本文) ブログ名/日時
【 CSS編集 】 ウェブリブログ ・ カスタマイズ 
  ...続きを見る
〜 さら さら さらり 〜
2014/10/19 00:18

トラックバック用URL help


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

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
こんなのがあるんだ!!

わたしは、このままごっそりコピペしてくださいって説明が好きww
新宿舞姫
2009/12/27 05:11
舞姫さん、いらっしゃいませ(ん)

ミスしたトコロを見つけるのってけっこう大変なので(*´・ω)(ω・`*)ネェー
ココはいつも利用させていただいています(にや)
CSS編集したあとはチェックしてみるとよいですよ〜♪

>ごっそりコピペ
それ、説明ちゃうしw(>ε<)ぶっ
mairis
2009/12/27 09:10
おおお  早速試してみました(わぁ)

エラーが一個見つかったらしいです(えー)
#banner Lexical error at line 59, column 5. Encountered: "?" (63), after : "" /

なんだか分かんないけどこれから探してみます(おんね)
れき
2009/12/28 02:48
れきさん、いらっしゃいませ(にこ)

CSS編集のあとはチェックしてみてくださいね(ん)
エラー修正も出来たようでよかったです(拍手)
mairis
2009/12/28 10:09

コメントする help

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

* ぱにゃステ *

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

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