はじめに

企業サイトや事務所サイトなどを制作していると、ブランドカラーや視認性を意識した配色調整が必要になることがあります。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

今回は、ヘッダーの背景を白色（#ffffff）に、ページ全体の背景を深いグリーン（#3d843d）に変更する方法についてご紹介します。

書こうと思ったきっかけ

事務所サイトを制作していた際、「ロゴをもっと目立たせたい」「ページ全体にブランドイメージを持たせたい」と考えたことがきっかけです。

ヘッダーとボディの配色を調整することで、視認性とデザインの印象が大きく変わることに気づきました。

body {
  background-color: #3d843d;
  color: #333;
}

このコードによって、ページ全体の背景が落ち着いたグリーンになります。

header {
  background-color: #ffffff;
  color: #333;
}

白背景に変更することで、ロゴ画像やナビゲーションメニューがより視認性の高いものになります。

文字色も合わせて #333（濃いグレー）などにするとバランスが良くなります。

以下のようなCSSがある場合は、個別に header と footer に分けてスタイルを指定しましょう。

header, footer {
  background-color: #ffcc80;
  color: #fff;
}

header {
  background-color: #ffffff;
  color: #333;
}

footer {
  background-color: #ffcc80;
  color: #333;
}

配色の変更は、デザインの印象を大きく左右します。

今回のように「白とブランドカラー」の組み合わせは、見やすさと個性の両立ができるため、非常におすすめです。

今後も必要に応じて、フォントやボタンの配色なども調整していくと、より魅力的なサイトになるかと思います！