背景色を変更したいけど、どこにコードを書くの？
見出しや文字の一部の背景色を変えたい
HTMLだけでできるのか、それともCSSが必要なのか分からない
このようなことで悩んでいませんか。
背景色の指定はWeb制作の基本であり、背景色を変更できるだけでページの印象を大きく変えられます。
そこで本記事では、HTMLとCSSを使って背景色を指定する基本的な方法から、色の指定バリエーション、コピペで使えるサンプルコードまで、初心者にも分かりやすく丁寧に解説します。
背景色の指定で分からないことがある方は、ぜひ参考にしてみてください。
HTMLだけで背景色を変更する
CSSを使用せずに、HTMLだけで背景色を変更する以下2つの方法を紹介します。
- style属性を使う方法
- styleタグを使う方法
それぞれ順番に見ていきましょう。
HTMLだけで背景色を変更するのは手軽な方法ですが、本格的なWebサイトを作るときは、役割分担と管理のしやすさからCSSを別ファイルに分けましょう。
style属性を使う方法
style属性を使う方法は、背景色を指定したいHTMLタグに直接style属性を書き込む方法です。
以下の例を見てみましょう。
コピー<h2>この見出しにだけ直接スタイルを指定</h2>
特定の要素一つだけにスタイルを適用したい場合に便利です。
複数のスタイルを適用したいときは、半角スペースを空けて指定しましょう。
しかし、同じデザインを複数の場所に指定すると、すべてのタグに同じ記述をする必要があります。修正作業に時間がかかったり保守性が低下するため、多用は避けましょう。
styleタグを使う方法
styleタグは、同じデザインをページ内の複数箇所で使いたいときに、<head>タグの中に<style>タグを設置してCSSをまとめて書く方法です。
以下の例を見てみましょう。
コピー<head>
<meta charset="UTF-8" />
<title>サンプルコード</title>
<style>
p {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p>この段落の背景は灰色になります。</p>
<p>こちらの段落の背景も、同じく灰色になります。</p>
</body>
<style>タグの中にp { … }と書くことで、HTMLファイル内のすべての<p>タグに同じスタイルを一括で適用できます。
修正するときも一ヶ所を直すだけで済むため、管理が楽になります。
【目的別】HTMLとCSSで背景色を指定する方法
目的別に背景色を指定する方法をサンプルコード付きで紹介します。
- 背景色をページ全体に指定する
- 背景色を分割して適用する
- 文字に背景色をつける
- 背景色をグラデーションにする
- 背景色の範囲を指定する
気になるところからチェックしてみてください。
背景色をページ全体に指定する
Webページ全体の背景色を変えるには、bodyタグに背景色を指定しましょう。
コピー<body>
bodyタグにstyle属性を追加し、background-colorプロパティで色を指定します。ページの内容量に関わらず、表示される画面全体が指定した色になります。
背景色を分割して適用する
Webページをいくつかのセクションに分け、それぞれに異なる背景色を指定したい場合は、linear-gradient（線形グラデーション）で実装しましょう。
以下のように左右に分割したい場合は、次のように記述します。
コピー<body class="bg-split-vertical">
コピー.bg-split-vertical {
background: linear-gradient(
90deg, /* 左から右へ /
#e6f7ff 0% 50%, / 左側（0%〜50%）は水色 /
#fff0f5 50% 100% / 右側（50%〜100%）はピンク */
);
}
linear-gradientを使えば、追加の要素を増やさずに一つの背景で複数の色の表現が可能です。
linear-gradient(90deg, …) は左から右に向かって色を切り替える指定で、180degにすると、上下に分割した背景が作れます。
文字に背景色をつける
文章の一部分だけを蛍光マーカーのように目立たせたい場合は、spanタグを使用します。
文字にハイライトを入れる例を見てみましょう。
コピー<p> 文章の <span>この部分だけ</span> 強調させます。 </p>
spanタグは、文章の意味を変えずに一部分だけをグループ化するタグです。強調したい部分をspanで囲み、背景色を指定することで、簡単にマーカー風のハイライトが作れます。
文章全体に背景色をつけたいときは、pタグにbackground-colorを指定しましょう。
背景色をグラデーションにする
背景を単色ではなく、おしゃれなグラデーションにすることもできます。
背景をグラデーションにするには、CSSのlinear-gradient（線形グラデーション）を使用します。角度や方向を指定して、複数の色を滑らかにつなげられるのが特徴です。
以下の図のように、上から下にかけて青からピンクへと背景がグラデーションするコード例を見てみましょう。
コピーbody {
margin: 0;
min-height: 100vh;
background: linear-gradient(
180deg, /* 上から下に向かう */
#1a73e8 0%, /* 開始色（青） */
#ff80ab 100% /* 終了色（ピンク） */
);
}
例では linear-gradient(180deg, …) を使って、背景を上から下へ青（0%）からピンク（100%）に滑らかに変化させています。
linear-gradientは実際には背景画像として扱われますが、CSSでは省略プロパティであるbackgroundを使うと、簡単に指定できます。
▶「CSSで背景をグラデーションでおしゃれに！作り方の基本とコツを紹介」を読む
▶「CSSグラデーションまとめ｜基本から応用6パターンを初心者向けに解説 」を読む
背景色の範囲を指定する
背景色の範囲を指定するときは、background-clipプロパティを使用します。background-clipプロパティは、背景色や背景画像を「どこまで広げるか」を決めるためのものです。
指定できる値は以下の通りです。
| 値 | 内容 |
| border-box（初期値） | 背景は枠線の下まで広がる。 |
| padding-box | 背景はpaddingまでに限定される。 |
| content-box | 背景は中の文字・内容のある範囲だけに限定される。 |
例を見て確認してみましょう。
普段はborder-boxで十分ですが、装飾性を高めたいときや、見出し・カードデザインの細かい調整をしたいときにpadding-boxやcontent-boxを使いましょう。
CSSで色を指定する代表的な3つの方法
CSSで色を指定するには、いくつかの書き方があります。ここでは代表的な以下の3つの方法を紹介します。
- カラーネーム
- 16進数のカラーコード
- 光の三原色「RGB」
それぞれ順番に見ていきましょう。
カラーネーム
カラーネームは、redやblue、tomatoのようにあらかじめ名前が定義されている指定方法です。コードを見ただけで、何色を指定したのかすぐに分かるメリットがあります。
書き方の例を見てみましょう。
コピーcolor: red;
background-color: tomato;
くすみカラーのような微妙な色の差は指定できなかったり、想定よりも暗くなってしまったりと色を自在に指定できないことがデメリットです。
ワイヤーフレームや学習用サンプルで色を素早く当てたいときなど、使いどころをおさえておくとよいでしょう。
16進数のカラーコード
Webデザインの世界で最も標準的に使われるのが、16進数のカラーコードです。#記号のあとに、光の三原色（赤・緑・青）の強さを16進数で表現します。
FigmaやPhotoshopなどのデザインツールから実装するときは、16進数のカラーコードをコピーして使用します。
書き方の例を見てみましょう。
コピーp {
color: #6495ed;
background-color: #fff; /* 短縮形 */
}
16進数のカラーコードはよく使用される色指定の方法ですが、コーディングの際に16進数のカラーコードを見ても、それがどんな色なのか直感的に分かりません。
色を分かりやすくするために、拡張機能を使用してカラーコードを色付けしたり、変数で管理すると便利です。
光の三原色「RGB／RGBA」
RGBは、rgb()という関数を使って赤・緑・青の強さをそれぞれ0から255までの数値で指定する方法です。RGBAは、RGBにAlpha（透明度）を加えたもので、色の透明度も指定できます。
書き方の例を見てみましょう。
コピーp {
color: rgb(255, 0, 0);
}
p.highlight {
background: rgba(0, 0, 255, 0.7);
}
rgba(0, 0, 255, 0.7)の最後の0.7は透明度を表しています。
RGB／RGBAはWebデザインやグラフィックデザイン、プログラミングなどの分野で広く使用されています。
まとめ：HTMLで背景色を使いこなそう
背景色の変更は、CSSのbackground-colorプロパティを使います。
ページ全体に背景色を指定するならbodyタグ、分割するならlinear-gradient、文字のハイライトにはspanタグを使用しましょう。
背景色の指定ができるようになると、文字を読みやすくしたり、情報を整理したりできるほか、ブランドカラーで統一感を出すことも可能です。
HTMLだけでも背景色の指定はできますが、CSSでファイルを分けて管理すると保守性が高まります。
Web制作のスキルを磨いて自分をスキルアップさせたいなら、オンラインスクールのデイトラWeb制作コースがおすすめです。独学ではなかなか情報収集できない現場で役立つ知識を体系的に学べ、現役コーダーにいつでも質問できる環境が整っています。
Web制作を仕事にするならデイトラWeb制作コースがおすすめ
デイトラ情報局は、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつきで品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的に分かります。
分からないことは、実務を経験しているメンター陣がDiscordによる公式サポートの質問部屋で丁寧に指導してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！