問題なく読めるのに「隠し文字」？

よくあるシンプルなデザインでも…

以下の表示を見て下さい。 背景色が緑色で文字色は白色になっていますね。文章は問題なく読めると思います。

このデザインを、すべてスタイルシートで記述しているなら何も問題はありません。 しかし、HTMLデザインとスタイルシートデザインを合体させて使っていると、 この記述は、特定の環境では「隠し文字」になってしまうことがあります。

HTMLとスタイルシートの混在デザインだと…

先ほどのデザインを、次のようなHTMLとスタイルシートで実現していると、ちょっと困った問題が起こります。

上記のソースでは、スタイルシートでボックス（＝div要素）の背景色を緑色に指定しています。 しかし、文字色はHTMLのfont要素を使って白色に指定しています。

この場合、スタイルシートが読まれなかったとしたら、どうなるでしょうか？
スタイルシートが読まれなかった場合、背景色は白色のままですね。でも、文字色はHTMLで指定されているため有効ですから、文字色も白色になります。 つまり、背景色と文字色が同色になってしまって、文章は読めなくなってしまいます。

今時、スタイルシートに非対応のブラウザを気にする必要はないでしょう。 ですから、このような記述でも何も問題ないように思えるかも知れません。 しかし、ホームページを運用する上で重要な「検索エンジン」の存在を忘れてはいけません。

検索エンジンはスタイルシートまでは読まない

ホームページへのアクセスは、多くは検索サイトからのものです。 検索エンジンに適切に情報を拾われることで、より多くのアクセスが得られます。
その検索エンジンは、ウェブ上を巡回して情報を収集する際に、ページ中の文章だけを取得していきます。 そのためにはHTMLを読めば十分なので、スタイルシートまでは読みません。

検索エンジンにとって、色情報は意味のないものなので、どうでもいいのではないか？と思われるかも知れません。
確かに、検索エンジンにとって、文章が緑色で表示されていても、茶色で表示されていても関係はありません。 しかし、背景色と文字色が同色で表示されている場合だけは別です。