実行できるCSSドキュメント: CSS 背景色

Q: HTML で背景色を変えるには？

CSS の background-color プロパティを使います。ページ全体なら body { background-color: #f3f4f6; }、1 つの要素なら です。

Q: HTML の bgcolor はまだ使えますか？

使えません。 、 、 の bgcolor 属性は HTML5 で廃止されています。古いページのためにブラウザは今も表示しますが、正しい方法は CSS の background-color です。

Q: 背景色を透明にするには？

background-color: rgb(37 99 235 / 20%); のように、アルファチャンネル付きの色を使います。opacity と違い、中のテキストははっきり見えたままです。

Q: background と background-color の違いは何ですか？

background-color は色だけを指定します。background はすべての背景プロパティ (色、画像、位置、サイズ、繰り返し、固定、origin、clip) のショートハンドなので、background: red; と書くと背景画像も none にリセットされます。

背景色の指定方法

background-color は、padding と border の下の領域も含めて、要素のボックスを色で塗ります。CSS のどんな色でも使えます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

ページの色は body に、カードとお知らせはそれぞれの div に、ハイライトはインライン要素に指定しています。インライン要素の背景は、行ごとにテキストの後ろだけに付きます。

ページ全体の背景色

body に background-color を指定します。<html> 要素に自分の背景がなければ、ブラウザは body の内容が終わった先も含めて、ウィンドウ全体に body の背景を描きます:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

昔の HTML では <body bgcolor="black"> と書きました。bgcolor 属性はすべての要素で廃止されているので、代わりに CSS を使いましょう。古いページのためにブラウザが今も対応しているので、動いているように見えることがあります。

透明な背景

すべての要素は background-color: transparent から始まるので、後ろの親が見えます。ボックスに色を付けつつ透けさせたいときは、アルファチャンネル付きの色を使います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 でも縞模様は透けて見えますが、テキストも薄くなります。背景だけ透けさせてテキストははっきり見せたいなら、アルファ付きの色を使いましょう。色のすべての書き方は色のページにあります。

色が塗られる範囲

初期状態では、背景は border の外側の端まで届きます (そのため破線や半透明の border の隙間から背景が見えます)。background-clip でこれを変えられます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

1 つ目のボックスでは、破線の間からオレンジ色が見えます。2 つ目では border の内側の端で止まり、3 つ目では内容の領域だけに色が付きます。margin は決して塗られず、常に透明です。

テーブルの行を縞模様にする

1 行おきに背景を付けると、幅の広いテーブルが目で追いやすくなります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color と background ショートハンド

background はすべての背景プロパティを一度に指定します。書かなかった部分は初期値に戻るので、ここでつまずく人が多くいます:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

色だけを指定したいときは background-color を使います。色と画像など、背景全体を 1 か所で指定するときは background を使います。background-image を参照してください。

アクセシビリティ: 文字色と組み合わせる

背景色は、文字色と組み合わせて初めて読みやすさが決まります。どちらかを指定したら、もう一方も確認しましょう。WCAG は本文に 4.5:1 以上のコントラスト比を求めています。テキストは継承した暗い色のままなので、暗い背景には明るい文字色を明示的に指定する必要があります。

よくある間違い

bgcolor を使う。 廃止されています。background-color を使いましょう。
透ける背景に opacity を使う。 内容も薄くなります。アルファ付きの色を使いましょう。
background-image の後に background ショートハンドを書く。 画像がリセットされます。代わりに background-color と書きましょう。
margin に色が付くと思う。 margin は背景の外側です。色の付いた余白には padding を使いましょう。
暗い背景に初期値のままの文字色。 明るい color も指定しましょう。

よくある質問

HTML で背景色を変えるには？

CSS の background-color プロパティを使います。ページ全体なら body { background-color: #f3f4f6; }、1 つの要素なら <div style="background-color: #fef3c7;"> です。

HTML の bgcolor はまだ使えますか？

使えません。<body>、<table>、<td> の bgcolor 属性は HTML5 で廃止されています。古いページのためにブラウザは今も表示しますが、正しい方法は CSS の background-color です。

背景色を透明にするには？

background-color: rgb(37 99 235 / 20%); のように、アルファチャンネル付きの色を使います。opacity と違い、中のテキストははっきり見えたままです。

background と background-color の違いは何ですか？

background-color は色だけを指定します。background はすべての背景プロパティ (色、画像、位置、サイズ、繰り返し、固定、origin、clip) のショートハンドなので、background: red; と書くと背景画像も none にリセットされます。

body の背景色がウィンドウ全体に広がるのはなぜですか？

<html> 要素に自分の背景がないと、ブラウザは body の背景をキャンバス全体に、body のボックスの外まで描きます。2 つを別の色にしたいなら、html に背景を指定しましょう。

CSS 背景色の指定: ページ全体、要素、透明な背景