CSS の background 系のプロパティで背景色や背景画像を指定できます。

っていうのは CSS 入門者でも知っていること。

ここで、背景色と背景画像を同時に指定する場合、「background: 背景色 url(背景画像のURI);」ってやってもいいっていうのも、多くの人が知っていること。でも、背景画像は background-image プロパティをオススメする。理由は調べてね。

ここからが本題。

まず、背景画像は背景色より前面に表示されるようになっているって言うことで。

さて問題、「選択されたテキストの背景色はどうなるでしょう?」

IE 等では、大抵「濃い青地に白い文字」になって、濃い青に近い色が背景色に指定されている時は「白地に濃い青の文字」になる。私が愛用する Firefox(Win) では、デフォルトで暗い背景色には「白地に濃い青の文字」で、明るい背景色には「濃い青地に白い文字」になる。

ここでまた問題、「Firefox で見た時、「背景色」が暗い色の場合、選択部分の背景は何色でしょう?」

答えは白。だけど、それで終わりじゃない。

何が言いたかったのかというと、この時「白地の背景画像」が同時に指定されていた場合、どうなるかっていうこと。

選択部分の背景の色は「背景色」によって決まるから、白になるが、背景画像の白と一緒になってしまい、選択部分が分かり難くなってしまう。さらに、テキストが濃い青(選択部分で使われる色と同色)だったら、「ドコを選択しているのか」が全く分からなくなってしまうと言うことが起こる。

こんなことがしてあると、画像なのかと思ってしまうくらいだ。

これをうまく使うっていうのもありと言えばありだけど、普通は背景画像と似た配色にするはず。背景画像が非表示の環境ではテキストが読み取り辛いからである。つまり、アクセシビリティの問題かと。

この事は、ついさっき「シイラプロジェクト」のサイトを Firefox(Win) で見て気づいた。「Web kit」を選択しようとしても全然色が変わらなかったからである。幸い自サイトが黒背景だったので、選択部分が白になる場合がすぐに見付かり、背景画像を消してみると、案の定、暗めのグレーだったというわけ。

上の例は Firefox(win) の場合だが、背景色に白等割と明るい色を使い、背景画像に「#0A246A」なんて色を使うと、ほぼ全てのブラウザで同様のことが起こる。また、navy(#00080) 等を背景色として、白地の背景画像を持ってきても、IE では同様のこと起こるかもしれない。Opera はデフォルトで全部「#0a246a に白い文字」なので、背景色でも背景画像でも「#0a246a」に近い色を使うとアウト。

アクセシビリティに気を使うか、逆に利用するかは状況によると思うが... 普通背景画像の色に合わせるんじゃないかな... 背景色まで指定する場合は。ぁ、背景色の指定がない場合は大抵デフォルトは白なので、背景色がない時も、やっぱりテキストの背景画像に「#0A246A」なんて色を持ってくると選択部分が分からなくなる。

取り敢えず、個人的には選択部分が分からないっていうのは、何か気持ち悪い。