HTMLで背景色を簡単に変更！初心者でも分かる使い方と応用例

はじめに
●HTMLでの背景色の基本的な使い方
●HTMLでの背景色の応用例
- ○グラデーションを使った背景色の設定
- ○画像を使った背景
●注意点と対処法
- ブラウザの互換性
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、HTMLで背景色を変更する方法を理解し、独自のウェブページを作成できるようになります。

●HTMLでの背景色の基本的な使い方

HTMLで背景色を変更するには、主に下記の3つの方法があります。

○インラインスタイルを使った方法

インラインスタイルとは、HTMLタグ内に直接スタイルを記述する方法です。

下記の例では、背景色を赤に設定しています。

<body style="background-color: red;">
  <h1>こんにちは！</h1>
</body>

○styleタグを使った方法

styleタグを使う方法では、HTMLのheadタグ内にCSSを記述します。

下記の例では、背景色を青に設定しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>こんにちは！</h1>
</body>
</html>

○外部CSSファイルを使った方法

外部CSSファイルを使う方法では、HTMLファイルとは別のCSSファイルにスタイルを記述し、HTMLファイルで読み込みます。

下記の例では、背景色を緑に設定しています。

style.css (CSSファイル)

body {
  background-color: green;
}

index.html (HTMLファイル)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは！</h1>
</body>
</html>

●HTMLでの背景色の応用例

背景色を設定するだけでなく、グラデーションや画像を使った背景も可能です。

○グラデーションを使った背景色の設定

グラデーションを使って背景色を設定する方法は、下記のようにCSSで記述します。

この例では、左上から右下へ向かって赤から青へのグラデーションを設定しています。

body {
  background-image: linear-gradient(to bottom right, red, blue);
}

○画像を使った背景

画像を背景に設定する方法は、下記のようにCSSで記述します。

この例では、”background.jpg”という画像ファイルを背景に設定しています。

body {
  background-image: url("background.jpg");
}

●注意点と対処法

背景色を設定する際には、下記の注意点があります。

色の指定方法

色を指定する際には、色名（red, blue, greenなど）、16進数（#FF0000, #0000FF, #008000など）、またはRGB（rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 128, 0)など）で指定できます。
文字色とのバランス

背景色と文字色のバランスに注意しましょう。

背景色と文字色が近いと、読みにくくなることがあります。

文字色を変更するには、CSSでcolorプロパティを使います。

body {
  background-color: black;
  color: white;
}

ブラウザの互換性

グラデーションや画像を使った背景は、古いブラウザでは正しく表示されないことがあります。

対策として、背景色をフォールバック（代替）として設定しておくことをお勧めします。

body {
  background-color: red;
  background-image: linear-gradient(to bottom right, red, blue);
}

●カスタマイズ方法

背景色以外にも、さまざまなカスタマイズが可能です。

例えば、下記のようにして、背景色をアニメーションさせることもできます。

@keyframes backgroundAnimation {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

body {
  animation: backgroundAnimation 10s infinite;
}

この例では、背景色が赤から青に変化するアニメーションが10秒間で繰り返し実行されます。

また、背景色に関連したカスタマイズとして、下記のように複数の要素に対して異なる背景色を設定することも可能です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .bg-red {
      background-color: red;
    }
    .bg-green {
      background-color: green;
    }
    .bg-blue {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="bg-red">赤色の背景</div>
  <div class="bg-green">緑色の背景</div>
  <div class="bg-blue">青色の背景</div>
</body>
</html>