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

📋 対応バージョン

HTML HTML5

CSS CSS3

Edge 79+ ⓘ

IE 11 ⓘ

完全対応一部機能制限 ⓘ

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

はじめに

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

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

HTMLで背景色を変更するには、主に下記の3つの方法があります。基本的な手法から順番に見ていきましょう。

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

インラインスタイルとは、HTMLタグ内に直接スタイルを記述する方法です。最も手軽で、すぐに背景色を変更できる利点があります。下記の例では、背景色を赤に設定しています。

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

この方法は簡単ですが、HTMLとCSSが混在するため、大きなサイトでは管理が難しくなることがあります。

○styleタグを使った方法

styleタグを使う方法では、HTMLのheadタグ内にCSSを記述します。インラインスタイルよりも整理された書き方ができるでしょう。下記の例では、背景色を青に設定しています。

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

この方法なら、HTMLとCSSが分離されるため、コードの可読性が向上します。

○外部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を共有でき、サイト全体の管理が効率的になります。

●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>

このようなクラスベースの方法を使えば、ページ内の異なる部分に異なる背景色を適用できるでしょう。