【HTML】簡単に背景色を変更する方法

このページでは、HTMLを使用してウェブページの背景色を変更する方法について解説します。背景色を変更する方法は様々ありますので、いくつかの方法を紹介し、それぞれのコード例を示します。

HTMLタグで背景色を変更する

最も簡単な方法の一つは、HTMLタグの属性を使用して背景色を変更することです。これは、主にページ全体の背景色を設定するために使われます。

  <body bgcolor="lightblue">
    ここにページのコンテンツが入ります
  </body>

この例では、``タグに`bgcolor`属性を使用して背景色を設定しています。上記のコードを使うことで、背景色が「lightblue（薄い青色）」に変更されます。

背景色を変更するためにCSSを使用することもできます。CSSを使うことで、より細かいデザインを行うことが可能です。背景色を設定するには、`background-color`プロパティを使用します。

  <style>
    body {
      background-color: lightgreen;
    }
  </style>

上記のコードでは、`body`タグに対して背景色「lightgreen」を指定しています。CSSを使うことで、より高度なスタイリングが可能になります。

インラインCSSを使う方法もあります。これは、HTMLタグ内に直接CSSのスタイルを記述する方法です。特定の要素だけに背景色を設定したい場合に便利です。

  <div style="background-color: yellow;">
    この要素の背景色は黄色です。
  </div>

この例では、`

`タグに`style`属性を使って背景色を「yellow」に設定しています。インラインCSSは簡単に設定できますが、大規模なスタイルには向いていません。

RGBカラーコードを使用することで、より詳細に色を指定できます。RGBとは、赤（Red）、緑（Green）、青（Blue）の3つの色の強度を0から255の範囲で指定する方法です。

  <style>
    body {
      background-color: rgb(255, 99, 71);
    }
  </style>

上記のコードでは、背景色が「Tomato」という色になります。`rgb(255, 99, 71)`は、赤色（255）、緑色（99）、青色（71）を組み合わせた色になります。

RGBAカラーコードは、RGBにアルファ値（透明度）を加えたものです。アルファ値は0（完全に透明）から1（完全に不透明）の範囲で指定します。

  <style>
    body {
      background-color: rgba(255, 99, 71, 0.5);
    }
  </style>

この例では、`rgba(255, 99, 71, 0.5)`で背景色の「Tomato」に50％の透明度を設定しています。透明度を調整することで、背景が少し透けるようになります。