（最終更新日：2023年6月）
✔以下のような方々に特に役立つ記事です
「HTMLで背景色をどう変えることができるのか？」
「HTMLで背景色を設定する方法を詳しく知りたい」
「HTMLで背景色を変更する具体的な例を見てみたい」
✔この記事で学べること
- HTMLでの背景色の設定の基本
- 背景色の設定方法とその応用について
- HTMLで背景色を変更する具体例
本記事では、HTMLで背景色を設定する基本的な方法から、様々なオプションを駆使した応用例まで、具体的な事例を交えて詳しく解説していきます。
最後までお読みいただけますと幸いです。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
背景色指定の利点
こちらでは、ウェブサイトの背景色指定の利点についてお伝えします。
背景色設定のメリットと使用シーンを詳しく説明します。
- 背景色設定のメリットと使用シーン
- 文字色とのコントラスト
- 無彩色のページを彩る
- 写真や画像を際立たせる
背景色設定のメリットと使用シーン
背景色は、ウェブサイトのデザインにおいて重要な要素です。
なぜならその色調やトーンは、訪問者の印象を大きく左右するから。
主なメリットはこちらです。
- ユーザーの視覚的経験を高められる
- ウェブサイトのブランドイメージを強化できる
- 読みやすさを向上させられる
- ウェブサイトの全体的な使いやすさを改善できる
文字色とのコントラスト
背景色と文字色のコントラストは、ウェブサイトの可読性にとって重要な要素です。
背景色が明るい場合、ダークテキスト（黒や深いグレー）を使用すると良いコントラストが得られ、逆もまた然りです。
適切なコントラストは視覚的なストレスを減らし、ユーザーが長時間サイトを閲覧行うことを可能にします。
以下は、文字色と背景色のコントラストが明確な組み合わせの例です。
| 背景色名 (RGB) | 文字色名 (RGB) |
|---|---|
| 白 (255, 255, 255) | 黒 (0, 0, 0) |
| 黒 (0, 0, 0) | 白 (255, 255, 255) |
| 青 (0, 0, 255) | 白 (255, 255, 255) |
| 緑 (0, 128, 0) | 白 (255, 255, 255) |
| オレンジ (255, 165, 0) | 黒 (0, 0, 0) |
| 茶色 (139, 69, 19) | 白 (255, 255, 255) |
| ピンク (255, 192, 203) | 黒 (0, 0, 0) |
| グレー (128, 128, 128) | 白 (255, 255, 255) |
| イエロー (255, 255, 0) | 黒 (0, 0, 0) |
| 赤 (255, 0, 0) | 白 (255, 255, 255) |
無彩色のページを彩る
背景色は、無彩色のページを活性化します。
明るい色調の背景はページを活気づけ、暗い色調の背景は落ち着いた雰囲気を作り出します。
色の選択は、サイトの目的や目標を反映したものであるべきです。
例えば以下のようなサイトで、さまざまなデザインを見てみるのが良いでしょう。
写真や画像を際立たせる
背景色は、ウェブページに掲載された写真や画像を引き立てる役割も果たします。
画像の主要な色調を反映した背景色は、視覚的な一貫性を保ち、全体的なデザインの調和を促すのです。
例えばこちら。
※参考：https://metaverse-japan.org/special/newwork/
HTMLとCSSで背景色を操作する
この章では、HTMLとCSSを使用してウェブサイトの背景色を操作する方法について詳しく説明します。
HTMLとCSSの基本的な知識があれば、背景色を設定することは非常に簡単です。
以下の要点を深堀りします。
- 単色背景の設定方法
- グラデーション背景の作り方
- CSSを利用した背景色の指定方法
- 背景色指定の有効範囲
単色背景の設定方法
HTMLで背景色を設定するには、body要素に対して、CSSのbackground-colorプロパティを使用して設定できます。
bgcolor属性は、すでに古い方法で、現在では推奨されていないのです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1>背景色の設定例</h1>
<p>この段落は背景色が設定されたbody要素の上に表示されます。</p>
</body>
</html>グラデーション背景の作り方
CSSを使用すると、背景色をグラデーションにすることも可能です。
background-image プロパティに linear-gradient() 関数を使用することで、簡単にグラデーション背景を作成できます。
この関数では、2つ以上の色停止を指定することで滑らかな色の移行を作成します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: linear-gradient(to right, #ff8a00, #e52e71);
}
</style>
</head>
<body>
<h1>グラデーション背景の設定例</h1>
<p>この段落はグラデーション背景が設定されたbody要素の上に表示されます。</p>
</body>
</html>CSSを利用した背景色の指定方法
CSSで背景色を設定する場合、background-colorプロパティを使用しましょう。
このプロパティは、要素の背景全体を塗りつぶすため、ブロック要素だけでなくインライン要素にも適用できます。
背景色指定の有効範囲
CSSの背景色指定は、指定した要素だけでなく、その子要素にも影響を及ぼします。
しかし、子要素自体が背景色を持っている場合、子要素の背景色が優先されます。
背景色を設定する際には、この優先順位を考慮しましょう。
背景色の適用範囲
このセクションでは、背景色の適用範囲について解説します。
背景色を適用する範囲は、ウェブサイトのデザインに大きな影響を及ぼします。
以下の要点を詳しく見ていきましょう。
- ページ全体の背景色指定
- 特定部分の背景色設定
ページ全体の背景色指定
ページ全体に背景色を設定するには、HTMLのタグ内でCSSのbackground-colorプロパティを使用します。
これにより、ページ全体が一定の背景色になります。
ページ全体の背景色は、ウェブサイトの全体的な雰囲気を決定づける重要な要素です。
特定部分の背景色設定
特定の部分だけに背景色を設定する場合も、CSSのbackground-colorプロパティを使用します。
この場合は適用する要素を指定しなければなりません。
例えばナビゲーションバーだけに背景色を設定したい場合、そのナビゲーションバーを囲む要素などにbackground-colorを指定します。
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #007bff;
color: #fff;
}
</style>
</head>
<body>
<div class="navbar">
<h1>ナビゲーションバー</h1>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<h1>背景色を持たないコンテンツ</h1>
<p>このコンテンツはナビゲーションバーとは別の背景色を持っています。</p>
</body>
</html>ページデザインを一段上げる：グラデーション背景色の適用法
ウェブデザインを更に高める手法として、背景色をシンプルな単色から視覚的な深みを生み出すグラデーションへと変える方法を詳しく解説します。
以下の項目を通して、あなたのウェブページを更に魅力的にするための技術を学びましょう。
- CSSを使ったグラデーションの作成
- グラデーションの方向の変更
- 色のトランジションを管理する
- グラデーション背景色のベストプラクティス
CSSを使ったグラデーションの作成
CSSのlinear-gradient関数を使うと、基本的な2色のグラデーションから、より複雑なマルチカラーグラデーションまで、さまざまな種類のグラデーションを作成できます。
例えば、次のコードは、赤から青へのシンプルな2色のグラデーションを作成します。
body {
background: linear-gradient(to right, red, blue);
}次のコードは、3色（赤、緑、青）を使用したマルチカラーグラデーションを作成します。
body {
background: linear-gradient(to right, red, green, blue);
}グラデーションの方向の変更
linear-gradient関数の第一引数は、グラデーションの方向を指定します。
これにより、上下、左右、対角線など、さまざまな方向にグラデーションを適用することができます。
例えば、下から上へのグラデーションは次のように指定します：
body {
background: linear-gradient(to top, red, blue);
}色のトランジションを管理する
linear-gradient関数では、色の遷移点をパーセンテージで指定することも可能です。
これにより、色のトランジションを細かく制御することができます。
例えば以下では、赤から30%の位置で青に変わるグラデーションを作成しています。
body {
background: linear-gradient(to right, red, red 30%, blue 30%, blue);
}グラデーション背景色のベストプラクティス
色の選択は慎重におこないましょう。
一般的には、異なる色調や明度の色を組み合わせると良い結果を得られます。
- 色の選択：鮮やかすぎる色を使いすぎると視覚的に過負荷になる
- グラデーションの方向：水平または垂直のグラデーションが最も自然に見える
- テキストの可読性：テキスト色と背景色のコントラストを適切に保つ
- レスポンシブデザイン：デバイスやブラウザのサイズによってページの表示が変わる
これらのベストプラクティスを活用して、あなたのウェブページのデザインを一層魅力的にしましょう。
視覚的アクセント：文字背景色によるテキスト強調法
テキスト部分の背景色の変更は、情報を強調し、読み手の注意を引くための重要なデザインテクニックです。
このセクションでは、その手法を詳しく解説し、あなたのウェブページのテキスト表現を一層鮮やかにします。
- 単一の文字や単語の背景色変更
- テキストブロックの背景色変更
- 背景色とテキスト色の適切なコントラスト
- レスポンシブデザインと背景色
単一の文字や単語の背景色変更：特定の部分を強調するための背景色の適用方法
特定の文字や単語にだけ背景色を適用することで、その部分を強調し、読み手の注意を引けます。
この方法はCSSのbackground-colorプロパティを使用して、目立たせたい文字や単語を<span>タグで囲むことで実現します。
以下の<span style=”background-color: yellow”>強調したいテキスト</span>が一例です。
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>背景色を持つテキストの強調例</h1>
<p>この段落では、<span class="highlight">強調したいテキスト</span>を背景色で目立たせています。</p>
<p>他のコンテンツと比べて<strong>強調されたテキスト</strong>が目立ちます。</p>
</body>
</html>テキストブロックの背景色変更：段落全体や特定のテキストエリアに背景色を付ける方法
段落全体や特定のテキストエリアに背景色を適用することで、そのエリア全体を視覚的に強調できます。
重要な情報を含むブロックを目立たせる場合や、関連する内容を視覚的にグルーピングする場合に有効です。
HTML要素（例えば、<p>, <div>, <section>など）にCSSのbackground-colorプロパティを適用することで実現します。
<!DOCTYPE html>
<html>
<head>
<style>
.highlight-block {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="highlight-block">
<h1>背景色を持つブロックの強調例</h1>
<p>このブロックは背景色が適用され、視覚的に強調されています。</p>
<p>他のコンテンツとは異なる背景色を持つため、目立ちます。</p>
</div>
<p>他のコンテンツ</p>
</body>
</html>背景色とテキスト色の適切なコントラスト：読みやすさを確保するための色の選び方
背景色とテキスト色のコントラストは、テキストの読みやすさに大きな影響を与えます。
適切なコントラストを持つ色を選ぶことで、すべての訪問者があなたのウェブページの内容を快適に読めるようになります。
色の選択には、WCAG（Web Content Accessibility Guidelines）のコントラスト比ガイドラインを参考にすると良いでしょう。
レスポンシブデザインと背景色：デバイスによる表示変化を考慮した背景色の設定
レスポンシブデザインは、デバイスや画面のサイズに関係なくウェブページが適切に表示されるようにするデザインアプローチです。
モバイルデバイスでは、より明るい背景色が読みや易さに影響する場合があります。
デバイスの画面サイズや解像度によ利、色がどのように見えるかも変わリマス。
さまざまなデバイスで色が正確に表示されるように、色の調整を行うことも重要です。
適切な背景色の適用は、ウェブデザインのスキルを磨く上で欠かせない要素であり、これらのテクニックを身につけることであなたのウェブ開発者としてのキャリアをさらに進めることができるでしょう。
スキル活用：背景色マスタリーでウェブ開発者への道を切り開く
このセクションでは、ウェブ開発者としてのあなたの旅を始めるために、今回学んだ背景色の操作技術の活用について説明します。
背景色の適切な操作はウェブデザインとユーザーエクスペリエンスに大きく貢献し、あなたのウェブページをより魅力的にするための有力な手段です。
- 一貫性のあるブランドイメージのための背景色
- ユーザーエクスペリエンスの強化
- アクセシビリティと背景色
- 背景色の選択とSEO
一貫性のあるブランドイメージのための背景色
ブランドイメージはウェブページのデザインに深く影響を与えます。
特に背景色は、ブランドのパーソナリティやメッセージを反映する手段のひとつです。
たとえば、高級感を出したい場合は深い青や黒を、フレッシュで活動的なイメージを求めるなら鮮やかな色を選ぶと良いでしょう。
また色選びだけでなく、その適用方法も重要。
全てのページで一貫した色使いをすることで、ブランドイメージを一貫させ、訪問者に強い印象を残せるのです。
ユーザーエクスペリエンスの強化
背景色は、ウェブサイトのユーザビリティを向上させる強力なツール。
たとえばナビゲーションメニューの背景色を変えることで、訪問者はサイト内を簡単に移動できます。
また、特定のセクションやボタンの背景色を変えることで、それらの要素がより目立ち、ユーザーが求める情報やアクションを速やかに見つけることが可能になるでしょう。
アクセシビリティと背景色
背景色は、ウェブサイトのアクセシビリティにも大きな影響を与えます。
例えば視覚障害を持つユーザーや色覚異常のユーザーにとっても情報を理解しやすいように、適切なコントラストを持つ色を選ぶことが重要です。
WCAG(WEB Content Accessibility Guidelines)のガイドラインに従い、背景色とテキスト色のコントラスト比を保つことが推奨されています。
背景色の選択とSEO
背景色自体はSEOに直接的な影響を与えませんが、間接的には影響を持つ可能性があります。
例えば背景色の選択がユーザーエクスペリエンスに影響を与える場合、それは結果的にSEOに影響を与えることになります。
ユーザーがサイトを容易にナビゲートでき、情報を迅速に見つけられるサイトは、ユーザーが長く滞在し、他のページへも遷移する可能性が高まります。
これらの行動は全て検索エンジンによって評価され、サイトの検索順位に影響を及ぼす可能性があるでしょう。
背景色を含む全体的なサイトデザインは、最終的にはSEOに寄与する重要な要素となり得るのです。
まとめ
当記事では、背景色の利点を最大限に活用し、そしてそれを操る方法を学びました。
これらのテクニックを使うことで、あなたのウェブページは、ビジュアルの面でも機能の面でも一段と優れたものになります。
また、これらのスキルはWeb開発者としての道を歩む上で必要不可欠。
背景色の操作は単純なようでいて奥が深く、その使い方一つでウェブページの印象が大きく変わるのです。