• ベストアンサー

CSS検証サービスで警告が出ます

CSS検証サービスhttp://jigsaw.w3.org/css-validator/は validで通ったんですが、フッターの背景色とコンテンツの 文字色が黒で重複があると警告が出ています。 コンテンツの背景はパステル調なので問題はありません。 このような警告は無視してもいいかなと思って、 2ヶ月ぐらい放置してるんですが、何か落ち着きません。 私一人で悩んでいても仕方がないかなと思ったので どういう風に対応したら良いのか考え方を教えて下さい。

  • CSS
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

>現状は色無しでも理解が可能です。 いえ、画像なしです。 >>画像が読み込めない(画像の読み込みを停止している)状態だと文字が見えない可能性がある。  検索エンジンのアルゴリズムは想像しかできませんが、 隠しテキストと隠しリンク - ウェブマスター ツール ヘルプ ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=66353 )  できれば、きちんと修正したほうが良いとおもいます。 .footer { background-color : black }/* 詳細度0010--継承するプロパティ */ 内に、 p.sample1/* 詳細度 0011 */, td/* 詳細度 0001 */{color:black} だと、明らかに隠し文字・・

uzume_z
質問者

お礼

どうもご回答有り難うございます。 やっぱり不正判定を受ける可能性があったのですか・・・ 詳細度ってこういうので地味に重要なのですね。 もう一度配色を見直すのも面倒だし、 フッターの色を変えることにします。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

きちんと見てみましょう。 body { background : url("sakura.jpg") repeat } /* 詳細度 0,0,0,1 */ .footer { background-color : black }/* 詳細度 0,0,1,0 */ p.sample1とかtdとかで{color:black}/* 詳細度 0,0,1,1 */ となます。  確かに、これを見ると問題があります。背景画像にしている画像のファイル名を消すなどして画像が読み込めない(画像の読み込みを停止している)状態だと文字が見えない可能性がある。 body{color:block;background:url("sakura.jpg") rgb(255,220,220,220);}/* 画像がなくても良いように */ body>div.footer{background-color:black;color:white;} とか。 カスケーディングの仕組みをきちんと理解しておくこと。 ★6.4 カスケード処理(The cascade) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )  ※詳細度の計算は、現行のCSS2.1では少し変わっていますが、それが問題になることは少ないでしょう。   →6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) 【引用】____________ここから 注。 色は文書に大量の補助情報を与え、文書を読み易くしてくれる。 ただし、色の組み合わせによっては、色盲のユーザが問題を抱える場合もあることを考慮せよ。 背景画像や背景色を指定する場合は、それに合わせて前景色を調節すること。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#color-units )]より ★A.5. 色なしで見たときにテキストやグラフィックスが受領可能、理解可能であることを確かめましょう ( http://www.doraneko.org/wai/contents10/19980918/Overview.html#A5 )

uzume_z
質問者

お礼

先生、どうもご回答有り難うございます。 このお答えを何回読み直しても・・・?なのです。 現状は色無しでも理解が可能です。 結局メインコンテンツでフッターの背景色と 重なるのはNGなんでしょうか。 私が心配してるのはサーチエンジンに 不正の判定をされるかどうかです。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

CSSのどの部分で、そう判定されたかわからないので回答はできませんが、可能性としては、 ・検証にかけたCSS以外でパステル調に指定してある。 ・背景が画像であり、画像が読み込めないときにに など・・ たとえば、 body div.footer{background:rgb(220,220,255) url();} と詳細度を上げてみる。

uzume_z
質問者

お礼

ご回答有り難うございます。説明のため端折ります。 body { background : url("sakura.jpg") repeat } .footer { background-color : black } 対してメインコンテンツの中で p.sample1とかtdとかで{color:black}とかすると 重複していますとエラーが出ます。

関連するQ&A

  • CSS検証について

    http://jigsaw.w3.org/css-validator/ このページ内のテキストエリアに直接入力して CSSの検証を行いました。 エラーは出ないのですが、 「おめでとうございます!この文章は正当なCSSとして認証されました」という表示がでません。何故でしょうか? 現在、Webサーバーにアップしてから確認をしたら 認証メッセージが出るのでしょうか?

    • ベストアンサー
    • HTML
  • BiND for WebLiFE2で作成したHPのCSS検証について

    BiND for WebLiFE2で作成したホームページを を「W3C CSS 検証サービス」サイトで検証すると、 どうしてもエラーが5つ発生してしまいます。 BiND for WebLiFE2で作成したホームページの エラーを全て消すことは可能でしょうか? 他の方がBiND for WebLiFE2で作られたサイトも、 同様にエラーが5つ発生しているようです。 皆様、ご教授をお願い致します。 「W3C CSS 検証サービス」 ⇒http://jigsaw.w3.org/css-validator/ 「BiND for WebLiFE2で作成したサイト」 ⇒「http://yagyu-chubei.com/」

  • CSSについて

    試しに外部CSSをhttp://jigsaw.w3.org/css-validator/#validate_by_uploadにてチェックしたところ。 「このプロファイルには、固有の @charset 構文があります。@charset のあとには1つのスペース、引用符つきのエンコーディングの名前、セミコロンを並べます。 」 とのエラーが出ました。 @charset "UTF-8"; ↑どこがダメなのでしょうか? 指摘願います。

    • ベストアンサー
    • HTML
  • content typeのエラー

    サイトをつくりました。スタイルシートを使用していて、WC3で検証(http://jigsaw.w3.org/css-validator/)したら org.w3c.www.http.HttpInvalidValueException: Invalid content type.と、でます。content typeが違うという事はわかるのですが、どう直してよいのかわかりません。 是非、分かる方教えていただけると大変たすかります。手がかりになるサイト でも結構です。お願いします。

  • CSS Validatorでfilterをエラーにさせないためには

    サイトのスタイルシートでfilterを指定しています。 これをW3CのCSS Validator(http://jigsaw.w3.org/css-validator/)でチェックすると、filterの部分がエラーとなってしまいます。 filterの指定は   filter: DropShadow(color=gray,offX=1,offY=1); としており、エラーは   Parse Error - color=gray,offX=1,offY=1) と表示されます。 これをエラーが出ないように指定するには、どのようにしたらよいのでしょうか。

    • 締切済み
    • CSS
  • CSSで(3)段組のページを作りたいのですが

    上から3段のページを作りたいと思っています。 ヘッダー ↓ コンテンツ ↓ フッター という形にしたいのです。 ヘッダーとフッターの背景色は同じにして、フレームを使ったように見せたかったのですが、画面いっぱいまで広がってくれず困っています。 フレームを使ったら簡単にできるのですが、CSSでは不可能なのでしょうか? 基本的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • cssvalidatorの結果が意味不明

    cssvaidatoerで自分のcssをチェックしてみたのですが結果が分けわかりません。 ↓チェック結果 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fuser.media.nagoya-u.ac.jp%2Fpeople%2Fd020044b%2Findex.css&warning=1&profile=css2&usermedium=all 特に、「行番号0」というのが?です。 何なんでしょう?

    • ベストアンサー
    • HTML
  • 【CSS】不具合の原因がわかりません。

    すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます(縦に3つ並びます)。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 (企業によるガイドラインなので詳しくは書けません。すいません・・・。) 「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり(左右ではなく上下でも)、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか? よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }

  • HPのCSSについて

    超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第4歩</title> <style type="text/css"> html {  height:100%; } body {  margin:0px;  height:100%; } #body {  width:700px;  margin:0px auto; } #header {  background:#ccffcc;  height:100px; /* width:100%;*/  width:700px;  position:fixed; } #main {  padding-top:100px;  background:#ffff99; } #footer {  background:#ffcc99;  height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>

  • CSSでの背景画像の設定について

    CSSでの背景画像の設定について質問です。 参照ページ(http://www.balmuda.com/jp/)のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。> 解決策を教えて頂ければ幸いです。よろしくお願い致します。

    • ベストアンサー
    • HTML