読み込み中...

初心者でも簡単！HTMLの背景色を変更する方法7選

HTML背景色変更方法イメージ HTML
2024.03.23
この記事は約11分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLの背景色を簡単に変更できるようになります。

初心者の方でもすぐに理解できるよう、徹底的に解説しているので安心してください。

それでは、早速始めていきましょう！

●HTMLで背景色を変更する様々な方法とそのサンプルコード

HTMLとCSSの組み合わせにより、背景色の変更は容易に行えます。こ

の記事では、HTMLで背景色を変更する多様な方法を、実際のサンプルコードと共に紹介します。

これらの方法を理解することで、Webページの見た目を効果的にカスタマイズできます。

○方法1：bodyタグで背景色を設定

最も基本的な方法は、HTMLのbodyタグ内で直接背景色を指定することです。

下記のサンプルコードをご覧ください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景色の変更</title>
</head>
<body style="background-color: lightblue;">
  <h1>背景色が変わりました！</h1>
</body>
</html>

この方法は簡単で迅速に背景色を変更できるため、小規模なページやテスト段階での使用に適しています。

○方法2：CSSを使って背景色を変更

より洗練された方法は、CSSを使用して背景色を設定することです。

これにより、HTMLとスタイルを分離し、より整理されたコードを保つことができます。

この方法のサンプルコードは下記の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景色の変更</title>
<style>
  body {
    background-color: lightblue;
  }
</style>
</head>
<body>
  <h1>背景色が変わりました！</h1>
</body>
</html>

CSSを用いると、全体のデザインを一元管理しやすくなり、より複雑なデザインも実現可能です。

○方法3：背景色をグラデーションにする

背景を一色ではなく、グラデーションで表現することも可能です。

CSSのlinear-gradientを利用することで、背景に色の移り変わりを付けることができます。

参考となるサンプルコードは下記の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景色の変更</title>
<style>
  body {
    background-image: linear-gradient(to right, red, yellow);
  }
</style>
</head>
<body>
  <h1>背景色がグラデーションになりました！</h1>
</body>
</html>

グラデーションは視覚的な魅力を高め、現代的なウェブデザインには欠かせない要素の一つです。

ご指摘ありがとうございます。コードの後の説明を加えて、もう一度書き直します。

○方法4：CSSファイルを外部リンクで読み込む

Webページの背景色を効率的に管理したい場合、外部のCSSファイルをリンクする方法があります。

このアプローチでは、HTML文書からスタイルシートを分離し、Webページのデザインを柔軟に調整できます。

/* style.css */
body {
  background-color: lightblue;
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景色の変更</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>背景色が変わりました！</h1>
</body>
</html>

この方法では、style.css という外部CSSファイルを作成し、HTMLドキュメントの <head> タグ内でリンクしています。

これにより、背景色などのスタイル設定をHTMLファイルから切り離し、スタイルの再利用やメンテナンスが容易になります。

○方法5：背景画像を設定する

HTMLで背景色の代わりに画像を使用することも可能です。

背景画像はウェブページのビジュアルアピールを高め、ユーザーの興味を引きます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景画像の設定</title>
<style>
  body {
    background-image: url("your-image-url");
  }
</style>
</head>
<body>
  <h1>背景画像が設定されました！</h1>
</body>
</html>

このコードでは、CSSの background-image プロパティを用いて、bodyタグの背景に画像を設定しています。

この方法を用いると、テキストやその他のコンテンツに影響を与えることなく、ページの背景を美しく装飾できます。

○方法6：要素ごとに背景色を変更する

ページの特定のセクションや要素だけの背景色を変更することもできます。

これは、特定のコンテンツに注目を集めたり、視覚的な区別をつけるのに有効です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>要素ごとの背景色変更</title>
<style>
  div {
    background-color: lightblue;
  }
</style>
</head>
<body>
  <div>
    <h1>この要素の背景色が変わりました！</h1>
  </div>
</body>
</html>

この例では、div 要素に対して特定の背景色を設定しています。

このようにCSSを使って特定のHTML要素にスタイルを適用することで、ページの読みやすさを向上させたり、デザインに変化を付けることができます。

○方法7：JavaScriptで動的に背景色を変更する

JavaScriptを用いると、ユーザーのアクションに応じて背景色を動的に変更することが可能です。

これは、インタラクティブなウェブエクスペリエンスを提供するのに役立ちます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動的背景色変更</title>
<script>
  function changeBackgroundColor() {
    document.body.style.backgroundColor = "lightblue";
  }
</script>
</head>
<body>
  <h1>ボタンをクリックして背景色を変更しましょう！</h1>
  <button onclick="changeBackgroundColor()">背景色を変更</button>
</body>
</html>

このコードでは、ボタンクリック時に changeBackgroundColor 関数が呼び出され、背景色が変更されます。

JavaScriptを使うことで、ページのロード時ではなく、ユーザーのインタラクションに基づいてウェブページの見た目を変更することができます。

●注意点と対処法

背景色の変更に関して、いくつかの注意点があります。

それぞれの対処法も合わせて説明していきます。

○注意点1：色の指定方法には様々な形式がある

色を指定する際、カラーコードやRGB形式、HSL形式など様々な方法があります。

それぞれの方法について知っておくことで、より柔軟に背景色を設定できます。

対処法1: カラーコードで指定する 例: background-color: #ff5733;

対処法2: RGB形式で指定する 例: background-color: rgb(255, 87, 51);

対処法3: HSL形式で指定する 例: background-color: hsl(12, 100%, 60%);

○注意点2：背景色が文字色と被らないようにする

背景色を変更する際、文字色とのコントラストが低くならないように注意しましょう。

文字色と背景色が近い場合、読みにくくなります。

対処法: 文字色も同時に変更する

body {
  background-color: lightblue;
  color: #333;
}

● カスタマイズ方法

HTMLで背景色の変更を行う基本的な方法をマスターしたら、次はさらにカスタマイズを進めてみましょう。

JavaScriptを活用することで、よりダイナミックでユーザーに優しいウェブページを設計できます。

○応用例1：背景色をランダムに変更する

ウェブページを訪れるたびに新しい体験を提供するために、背景色をランダムに変更する方法があります。

JavaScriptのランダム関数を使用して、背景色を動的に生成しましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ランダム背景色変更</title>
<script>
  function getRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  function changeBackgroundColor() {
    document.body.style.backgroundColor = getRandomColor();
  }
</script>
</head>
<body onload="changeBackgroundColor()">
  <h1>背景色がランダムに変わりました！</h1>
</body>
</html>

このコードでは、ページの読み込み時に changeBackgroundColor 関数が呼び出され、背景色がランダムに選ばれます。

これにより、訪問するたびに異なる色の背景を楽しむことができます。

○応用例2：ユーザーが背景色を選択できるようにする

よりユーザーに優しいデザインを考えるなら、彼らに背景色の選択権を与えることができます。

これは、ウェブページに対するエンゲージメントを高める素晴らしい方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー選択背景色変更</title>
<script>
  function changeBackgroundColor(color) {
    document.body.style.backgroundColor = color;
  }
</script>
</head>
<body>
  <h1>好きな背景色を選んでください！</h1>
  <button onclick="changeBackgroundColor('lightblue')">水色</button>
  <button onclick="changeBackgroundColor('lightgreen')">緑</button>
  <button onclick="changeBackgroundColor('lightsalmon')">サーモンピンク</button>
  <button onclick="changeBackgroundColor('white')">白</button>
</body>
</html>

このサンプルでは、異なる色のボタンが設置されており、ユーザーはこれらのボタンをクリックすることで、好みの背景色に変更できます。

このようなインタラクティブな要素は、ユーザーの関与を促し、サイトの使いやすさを向上させます。

まとめ

この記事を読めば、HTMLで背景色を変更する方法やカスタマイズ方法、注意点などが理解でき、自分のウェブページにも活用できるようになります。

読者が楽しめるように、たくさんの例やサンプルコードを紹介しました。

ぜひ実践して、素敵なウェブページを作成してください。