ホームページの色を変更する方法

このページについて

このページでは、HTMLホームページの色を変更する方法を初心者向けに解説しています。 CSSの色を変更するだけで、ホームページ全体の印象を簡単に変えることができます。

① ヘッダーの色を変更する

現在のコード

header{
    background:#2c7be5;
}

変更例

② ナビゲーションの色を変更する

nav{
    background:#1f5fbf;
}

例

background:#00695c;

③ ボタンの色を変更する

button{
    background:#2c7be5;
}

変更例

background:#ff9800;

④ ボタンにマウスを乗せた時の色

button:hover{
    background:#1f5fbf;
}

変更例

background:#f57c00;

⑤ 見出しの左線

h2{
    border-left:6px solid #2c7be5;
}

変更例

border-left:6px solid #4caf50;

⑥ 背景色を変更する

body{
    background:#f7f7f7;
}

⑦ コンテンツ部分の色

section{
    background:#ffffff;
}

変更例

background:#fafafa;

background:#f3f9ff;

⑧ フッターの色

footer{
    background:#333333;
}

変更例

background:#0d47a1;

カラーコード一覧

おすすめ配色

初心者におすすめ

次の5か所だけ変更すればホームページ全体のイメージが変わります。

• header の background
• nav の background
• button の background
• button:hover の background
• h2 の border-left