こんにちは！ヒロックラボでフロントエンジニアをしているN・Sです。

最近、とある案件で背景色が白のデザインのWebサイトを担当しました。そのため、特に深く考えず、bodyタグにbackground-colorを設定せずにいました。基本的に、ブラウザのデフォルト設定では背景色が白になるので、問題ないだろうと思っていたのです。

背景が黒くなっている問題

しかし、サイトのリリース後、一部のユーザーから「背景が黒く表示されている」とのフィードバックがありました。最初は何かの間違いだろうと疑いましたが、実際に確認してみると、ある特定の端末（古いアンドロイド）で背景が黒く表示され、透過画像のようになっていることが判明しました。

解決策はシンプル

解決策はシンプルでした。bodyタグに明示的にbackground-color: #fff;を設定するだけで、すべての端末で背景が白に統一され、問題が解消しました。

body {
  background-color: #fff;
}

そのため、背景が白のデザインカンプであっても、必ずbodyタグにbackground-color: #fff;を設定することを強くお勧めします。これにより、どの端末でも意図したデザインを確実に表示させることができます。

学びと反省

今回の経験を通じて、次のことを学びました。

１．デフォルトに頼らない：ブラウザやデバイスによるデフォルトの違いを過信せず、意図したデザインを確実に実現するために明示的なスタイル設定を行う。

２．テストの重要性：リリース前に様々なデバイスやブラウザでテストを行い、予期しない挙動がないか確認する。

今回の経験を通じて、Web制作における重要なポイントを再認識しました。同じような問題に直面している方や、これからWebサイトを作る方にとって、少しでも参考になれば幸いです。