この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。
Webデザインの背景色は、ページ全体の雰囲気を左右する重要な要素です。また、文字の可読性にも影響を与えます。
そこで今回は、背景色を選ぶ際のポイントと変更方法をお伝えします！
ビジネス向けのサイトでは青やグレーなどの落ち着いた色にしたり、若い女性向けのサイトではパステルカラーや明るい色調を選ぶなど、訪問者の年齢、目的などを考慮して最適な色を選びましょう。
白い背景に薄い灰色の文字や、黒い背景に暗い色の文字は、何と書いてあるか読みづらくなります。
Webサイトからの離脱率が上がってしまわないよう、淡い背景色には濃い色の文字、暗い背景色には明るい色の文字を使うなど、視認性を高める色を選びましょう。
設定は簡単です。背景色を設定したい箇所に、CSSでbackground-colorで色を指定するだけです。
background-color：背景の色を指定；<body>
<h1>背景色が青になっています！</h1>
</body>/*背景色を青に設定 */
body {
background-color: lightblue;
}
/ テキストのスタイル /
h1 {
color: white;/*テキストの色 */
text-align: center;/*テキストの真ん中寄せ */
}上記のように、CSSで簡単に背景色を変更することができます！
Webサイトのデザインは、色1つで大きく変わることがあります。背景色を工夫し、より魅力的なサイトを作成しましょう。
株式会社オートプロジェクトでは、Webサイトの簡単な調整・修正から大幅なリニューアルまで幅広いニーズに対応しております。まずはお気軽にご相談ください。
