6日でできる 新HTML入門｜CSSによる背景色の指定

背景を変えるだけで、Webページの印象は大きく変わる。色と画像を使い分けて、見やすく魅力的なページデザインを作ろう。

Webページの見た目を整えるとき、文字の色やサイズと同じくらい大切なのが背景のデザインです。背景は、ページ全体の雰囲気を決める大きな要素です。淡い色を使えばやさしい印象になり、濃い色を使えば引き締まった印象になります。また、背景画像を使うことで、季節感やテーマ性を表現することもできます。

CSSでは、背景色を指定するbackground-color、背景画像を指定するbackground-image、画像の繰り返しを調整するbackground-repeat、背景を固定するbackground-attachment、表示位置を決めるbackground-position、背景画像の大きさを調整するbackground-sizeなどを使って、背景を細かくコントロールできます。

背景の指定は、ただ装飾を加えるだけではありません。読みやすさにも大きく関わります。たとえば、白い文字を使うなら背景は濃い色にする、背景画像の上に文字を置くなら半透明の背景色を重ねる、といった工夫が必要です。背景を上手に使えるようになると、ページ全体に統一感が生まれ、見る人に内容が伝わりやすくなります。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

specifying-bg-cssダウンロード
leaf-pattern.pngwave-line.pngnight-sky.pngcorner-map.pngmorning-studio.pngflower-field.png

背景色を指定する基本

CSSで背景色を指定するときは、background-colorを使います。background-colorは、bodyに指定すればページ全体の背景色を変えられます。header、section、p、divなどの要素に指定すれば、その部分だけに背景色を付けることもできます。

背景色は、ページの印象を決める土台になります。たとえば、カフェの紹介ページなら淡いクリーム色やブラウン系、図書館の案内ページなら落ち着いた青や緑、イベント告知ページなら明るいアクセントカラーなど、内容に合わせて色を選ぶと自然なデザインになります。

background-colorの使い方

background-colorは、次のように指定します。

body {
  background-color: #FFF7E6;
}

この指定では、bodyの背景色が淡いクリーム色になります。bodyはWebページ全体を表す要素なので、ページ全体の背景色を変えたいときによく使います。

一方、ヘッダーだけ背景色を変えたい場合は、headerにbackground-colorを指定します。

header {
  background-color: #8D6E63;
}

このように、背景色はページ全体にも、特定の部分にも使えます。

図1：背景色でページの印象を整える

この図から分かること

background-colorは、ページ全体にも一部分にも使える背景色指定の基本プロパティです。bodyに指定するとページ全体の背景が変わり、headerやsectionなどに指定すると、その要素の範囲だけ背景色が付きます。背景色を使い分けることで、ページの内容を区切りやすくなり、見た目にも分かりやすい構成になります。

ページ全体とヘッダーに背景色を付ける

まずは、ページ全体の背景色とヘッダー部分の背景色を指定する例を見ていきましょう。ページ全体にはやわらかい色を使い、ヘッダーには少し濃い色を使うと、ページの先頭部分が自然に目立ちます。

ファイル名： Lesson13-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>和菓子カフェの紹介</title>
  <style>
    body {
      background-color: #FFF7E6;
      margin: 0;
      font-family: sans-serif;
    }

    header {
      background-color: #8D6E63;
      color: white;
      text-align: center;
      padding: 20px;
    }

    main {
      padding: 24px;
    }
  </style>
</head>
<body>
  <header>
    <h1>和菓子カフェ こはる</h1>
  </header>

  <main>
    <p>季節の和菓子と香り高い日本茶を楽しめる、落ち着いた雰囲気のカフェです。</p>
  </main>
</body>
</html>

ブラウザの表示例

このHTMLでは、bodyにbackground-colorを指定して、ページ全体を淡いクリーム色にしています。さらに、headerにはブラウン系の背景色を指定し、文字色を白にしています。

背景色と文字色はセットで考えることが大切です。背景色が濃い場合は白や明るい文字色、背景色が淡い場合は黒や濃いグレーの文字色を使うと読みやすくなります。

色の指定方法を使い分ける

background-colorでは、色名、16進数、rgb、rgbaなどの指定方法が使えます。どれも背景色を指定できますが、使いやすい場面が少しずつ違います。

背景色で使える主な色指定

指定方法例特徴
色名lightblue英単語で色を指定できるため分かりやすい
16進数#FFCDD2Webデザインでよく使われる細かい色指定
rgbrgb(200, 230, 201)赤、緑、青の数値で色を指定する
rgbargba(255, 224, 178, 0.8)色に透明度を加えられる

色名は分かりやすい反面、指定できる色の細かさには限りがあります。16進数やrgbは、デザインに合わせて色を細かく調整したいときに便利です。rgbaは透明度を指定できるため、背景画像の上に文字を置くときや、やわらかい重なりを表現したいときに役立ちます。

ファイル名： Lesson13-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>市民ギャラリーのお知らせ</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #FAFAFA;
    }

    .news {
      background-color: lightblue;
      padding: 12px;
      margin: 12px 0;
    }

    .important {
      background-color: #FFCDD2;
      padding: 12px;
      margin: 12px 0;
    }

    .guide {
      background-color: rgb(200, 230, 201);
      padding: 12px;
      margin: 12px 0;
    }

    .event {
      background-color: rgba(255, 224, 178, 0.8);
      padding: 12px;
      margin: 12px 0;
    }
  </style>
</head>
<body>
  <h1>市民ギャラリーからのお知らせ</h1>

  <p class="news">新しい展示コーナーが公開されました。</p>
  <p class="important">展示室内での飲食はできません。</p>
  <p class="guide">館内マップは受付で配布しています。</p>
  <p class="event">週末に親子向けワークショップを開催します。</p>
</body>
</html>

ブラウザの表示例

この例では、4つの段落にそれぞれ違う方法で背景色を指定しています。classを使って段落ごとに見た目を変えているため、内容の種類に応じて色を分けることができます。

お知らせは青系、注意事項は赤系、案内は緑系、イベントはオレンジ系のように色を分けると、読む人が内容の意味を直感的に理解しやすくなります。

背景画像を指定する

背景には単色だけでなく、画像も指定できます。背景画像を使うと、ページに雰囲気やテーマを加えることができます。たとえば、森のページなら葉の模様、海のページなら波の模様、夜空のページなら星の画像を背景にする、といった使い方ができます。

背景画像を指定するときは、background-imageを使います。

body {
  background-image: url(leaf-pattern.png);
}

urlの中には、使用したい画像ファイルへのパスを書きます。画像ファイルがHTMLファイルと同じフォルダにある場合は、ファイル名だけで指定できます。

背景画像を使うときの注意点

背景画像を使うときは、文字の読みやすさに注意が必要です。画像が派手すぎたり、文字と同じような明るさだったりすると、本文が読みづらくなります。

読みやすくするためには、次のような工夫ができます。

工夫内容
背景画像を淡いものにする文字より目立ちすぎない画像を選ぶ
文字の後ろに背景色を付けるpやsectionに半透明の背景を重ねる
画像の繰り返しを調整する必要に応じてrepeatやno-repeatを使い分ける
画像の位置を調整する文字と重ならない場所に画像を配置する

ファイル名： Lesson13-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>森の読書室</title>
  <style>
    body {
      background-image: url(leaf-pattern.png);
      font-family: sans-serif;
    }

    .message {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 20px;
      margin: 40px;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <div class="message">
    <h1>森の読書室へようこそ</h1>
    <p>木漏れ日のような落ち着いた空間で、ゆっくり本を楽しめます。</p>
  </div>
</body>
</html>

ブラウザの表示例

この例では、bodyにbackground-imageを指定しています。さらに、文字を読みやすくするために、messageクラスの部分に半透明の白い背景色を付けています。

背景画像の上に直接文字を置くと読みにくくなることがあります。そのため、本文を囲む要素にbackground-colorを指定して、文字の後ろに読みやすい領域を作るのがポイントです。

背景画像の繰り返しを調整する

background-imageで背景画像を指定すると、初期状態では画像が縦方向にも横方向にも繰り返されます。小さな模様画像をタイルのように並べたいときは便利ですが、横だけに並べたい場合や、一度だけ表示したい場合もあります。

そのときに使うのがbackground-repeatです。

background-repeatの主な値

値説明
repeat縦横に繰り返す
repeat-x横方向だけに繰り返す
repeat-y縦方向だけに繰り返す
no-repeat繰り返さず一度だけ表示する

図2：background-repeatで画像の並び方を変える

この図から分かること

background-repeatを使うと、背景画像をどの方向に繰り返すかを指定できます。模様のように敷き詰めたい場合はrepeat、横一列に飾りたい場合はrepeat-x、縦のラインとして使いたい場合はrepeat-y、ワンポイント画像として置きたい場合はno-repeatが向いています。

ファイル名： Lesson13-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>水族館イベント</title>
  <style>
    body {
      background-image: url(wave-line.png);
      background-repeat: repeat-x;
      font-family: sans-serif;
      padding: 40px;
    }

    h1 {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 16px;
    }

    p {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 16px;
    }
  </style>
</head>
<body>
  <h1>夏の水族館イベント</h1>
  <p>涼しげな波の背景とともに、海の生き物について楽しく学べるイベントを開催します。</p>
</body>
</html>

ブラウザの表示例

このHTMLでは、wave-line.pngを背景画像として指定し、background-repeat: repeat-x;で横方向だけに繰り返しています。ページ上部に波のラインが続くような表現にしたいときに使いやすい指定です。

背景画像をページ全体に敷き詰める必要がない場合は、repeat-xやrepeat-yを使うと、装飾として自然に取り入れられます。

背景画像を固定する

通常、ページをスクロールすると背景も一緒に動きます。この動きはbackground-attachmentの初期状態であるscrollです。

一方、background-attachment: fixed;を指定すると、ページをスクロールしても背景画像の位置が固定されます。本文だけが動き、背景は画面に貼り付いたように見えるため、奥行きのある印象を作れます。

background-attachmentの主な値

値説明
scrollスクロールに合わせて背景も動く
fixed背景を画面に固定する

ファイル名： Lesson13-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>宇宙観察ノート</title>
  <style>
    body {
      background-image: url(night-sky.png);
      background-attachment: fixed;
      font-family: sans-serif;
      margin: 0;
    }

    section {
      background-color: rgba(255, 255, 255, 0.86);
      margin: 40px;
      padding: 24px;
      border-radius: 12px;
    }

    p {
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <section>
    <h1>宇宙観察ノート</h1>
    <p>夜空を見上げると、季節によって見える星座が変わります。</p>
    <p>星の位置や明るさを記録して、自分だけの観察ノートを作ってみましょう。</p>
    <p>背景を固定すると、星空の中を本文だけが流れていくような印象になります。</p>
  </section>
</body>
</html>

ブラウザの表示例

この例では、bodyの背景画像にnight-sky.pngを指定し、background-attachment: fixed;で固定表示しています。本文をsectionで囲み、半透明の白い背景色を付けることで、星空の背景を見せながら文章を読みやすくしています。

ただし、背景固定はデザイン効果が強いため、使いすぎるとページが重く感じられることがあります。学習段階では、効果を確認しながら必要な場所で使うとよいでしょう。

背景画像の表示位置を指定する

背景画像を繰り返さずに一度だけ表示する場合、どこに配置するかを指定したくなります。そのときに使うのがbackground-positionです。

background-positionでは、横方向と縦方向の位置を組み合わせて指定できます。

background-positionの指定例

指定表示位置
left top左上
center center中央
right bottom右下
right top右上
left bottom左下

ファイル名： Lesson13-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>街歩きガイド</title>
  <style>
    body {
      background-image: url(corner-map.png);
      background-repeat: no-repeat;
      background-position: right bottom;
      font-family: sans-serif;
      min-height: 100vh;
      padding: 40px;
    }

    .guide-box {
      background-color: rgba(255, 255, 255, 0.88);
      padding: 24px;
      width: 60%;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <div class="guide-box">
    <h1>週末の街歩きガイド</h1>
    <p>駅前から公園まで、気軽に楽しめる散歩コースを紹介します。</p>
  </div>
</body>
</html>

ブラウザの表示例

このHTMLでは、corner-map.pngを背景画像として指定し、background-repeat: no-repeat;で一度だけ表示しています。さらにbackground-position: right bottom;を指定して、画像を右下に配置しています。

背景画像を右下に置くことで、本文エリアと画像が重なりにくくなります。背景画像を装飾として使う場合は、文字の邪魔にならない位置を選ぶことが大切です。

背景画像のサイズを調整する

背景画像をページ全体に大きく表示したいときは、background-sizeを使います。特によく使う値がcoverとcontainです。

coverとcontainの違い

値特徴
cover要素全体を覆うように画像を拡大または縮小する
contain画像全体が見えるように拡大または縮小する

coverは、画面全体を写真でしっかり覆いたいときに向いています。ただし、画像の一部が切れることがあります。containは画像全体を表示できますが、要素との比率が合わない場合は余白が出ることがあります。

図3：background-sizeで背景画像の大きさを調整する

この図から分かること

background-sizeを使うと、背景画像をどのくらいの大きさで表示するかを調整できます。coverは画面いっぱいに背景写真を見せたいときに便利です。containは画像全体を欠けずに見せたいときに向いています。どちらを使うかは、写真を大きく見せたいのか、画像全体を見せたいのかによって選びます。

ファイル名： Lesson13-7.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>朝のヨガスタジオ</title>
  <style>
    body {
      background-image: url(morning-studio.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      font-family: sans-serif;
      min-height: 100vh;
      margin: 0;
    }

    .catch {
      background-color: rgba(255, 255, 255, 0.82);
      padding: 24px;
      width: 50%;
      margin: 80px auto;
      text-align: center;
      border-radius: 16px;
    }
  </style>
</head>
<body>
  <div class="catch">
    <h1>朝のヨガスタジオ</h1>
    <p>やわらかな朝の光の中で、心と体を整える時間を過ごしましょう。</p>
  </div>
</body>
</html>

ブラウザの表示例

この例では、background-size: cover;を使って、morning-studio.pngを画面全体に広げています。さらに、background-position: center center;を指定して、画像の中央が見えやすいようにしています。

写真を背景にする場合は、文字が読みづらくなりやすいため、本文を囲む要素に半透明の背景色を付けると安心です。

backgroundでまとめて指定する

背景に関する指定は、background-color、background-image、background-repeat、background-position、background-sizeなど、複数のプロパティに分けて書けます。

一方で、backgroundを使うと、背景に関する複数の指定をまとめて書くこともできます。これをショートハンドと呼びます。

backgroundショートハンドの考え方

次のような指定をまとめて書けます。

body {
  background: url(flower-field.jpg) no-repeat center center / cover #FFF9C4;
}

この指定には、背景画像、繰り返し、位置、サイズ、背景色が含まれています。スラッシュの前が背景位置、スラッシュの後が背景サイズです。

ただし、ショートハンドは便利な反面、慣れないうちは少し読み取りにくいことがあります。最初はbackground-colorやbackground-imageのように分けて書き、意味が分かってきたらbackgroundでまとめる流れがおすすめです。

ファイル名： Lesson13-8.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>春の花だより</title>
  <style>
    body {
      background: url(flower-field.png) no-repeat center center / cover #FFF9C4;
      font-family: sans-serif;
      min-height: 100vh;
      margin: 0;
    }

    .message {
      background-color: rgba(255, 255, 255, 0.84);
      width: 52%;
      margin: 80px auto;
      padding: 28px;
      text-align: center;
      border-radius: 16px;
    }
  </style>
</head>
<body>
  <div class="message">
    <h1>春の花だより</h1>
    <p>色とりどりの花が咲く季節に合わせて、春の散策イベントを紹介します。</p>
  </div>
</body>
</html>

ブラウザの表示例

このHTMLでは、backgroundを使って背景画像、繰り返し、位置、サイズ、背景色をまとめて指定しています。flower-field.pngが読み込まれない場合でも、最後に指定した#FFF9C4が背景色として表示されます。

背景画像を使う場合でも、背景色を一緒に指定しておくと安心です。画像の読み込みが遅いときや、画像が表示できない環境でも、ページの背景が真っ白にならず、デザインの印象をある程度保てます。

背景関連プロパティの整理

CSSの背景指定では、複数のプロパティを組み合わせて使います。それぞれの役割を整理しておくと、どの指定を使えばよいか判断しやすくなります。

プロパティ主な役割
background-color背景色を指定する
background-image背景画像を指定する
background-repeat背景画像の繰り返し方を指定する
background-attachment背景画像をスクロールに合わせるか固定するかを指定する
background-position背景画像の表示位置を指定する
background-size背景画像の表示サイズを指定する
background背景関連の指定をまとめて書く

背景の指定は、ページの見た目を大きく変えるだけでなく、情報の見せ方にも関わります。背景色でエリアを分ける、背景画像で雰囲気を出す、半透明の背景で文字を読みやすくするなど、目的に合わせて使い分けることが大切です。

背景デザインで意識したいポイント

背景を指定するときは、きれいに見えることだけでなく、読みやすいことも大切です。特に、背景画像を使う場合は、文字とのコントラストを確認しましょう。

確認ポイント内容
文字は読みやすいか背景と文字の色が近すぎないか確認する
背景が目立ちすぎないか本文より背景の印象が強くなりすぎないようにする
画像の位置は適切か文字や重要な内容と重ならないようにする
画面サイズが変わっても自然かbackground-sizeやbackground-positionで調整する
背景色も指定しているか画像が表示されない場合に備えて背景色も入れておく

CSSの背景指定を使いこなせるようになると、シンプルなHTMLページでも一気に完成度が上がります。最初はbackground-colorで背景色を変えるところから始め、慣れてきたら背景画像、繰り返し、位置、サイズの調整へ進んでいくと、無理なく理解できます。