Webサイトを作るときに背景色を指定していますか?
基本的に、背景色を指定しない場合は白(#FFFFFF)の状態で表示されます。

なので、忘れがちというより、背景色を「白」に指定するってあまりやらないことも多い気がします。

でも、盲点だったというか甘かった!と思い知らされたんです!まさかのGoogle先生に…!

Google検索アプリで思い知らされたできごと

iPhoneのアプリに「Google」検索があります。青いやつです。
これで私が作ったデモページを開いてみました。

img140826_01

背景が灰色になってる・・・!?

上の画像は、Google検索とSafariで全く同じデモページを開いています。
背景に指定した覚えもない、「薄い灰色が敷かれてしまっている」ではないですか。

原因は背景色(background-color)

この灰色は、デモページのbodyに背景色(background-color)を指定していないため、実質デモページの背景は透明状態

なので、Google検索自体の背景色がそのまま透けて見えてしまっています。

デモページのbodyに背景色(#FFFFFF)を指定してあげると、無事に背景が白になりました。

背景が白でも指定しよう!

今回はGoogle検索アプリを使わないと出てこない現象でしたが、

最近はスマホアプリの中でWebサイトが表示されることも増えたので、例え背景が白でもbackground-colorは指定しておいた方が無難かもですね。

鈴木:自分用のメモというか、ハッとさせられたできごとだったので書いてみました。今後私も背景色は白でも必ず指定するようにしようと思います〜!

Pocket

※ この記事は2年以上前に書いたものです。すでに情報が古くなっている可能性もありますのでご留意ください。