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

　Webページの背景は、単色の背景色だけでなく、繰り返しパターンや固定画像、表示位置の調整まで、多彩な表現が可能です。ここでは、CSSで背景を制御する主要なプロパティを解説します。まずは背景色の指定から始め、続いて背景画像の扱い方やリピート制御、位置調整などを順に学習していきましょう。

１．背景色の指定

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

specify-bg-css ダウンロード

1.1. `background-color` の基本

background-color プロパティを使うと、要素の背景に単色を指定できます。ページ全体の背景は body、見出しや段落など個別要素にも適用可能です。

ファイル名： lesson13-1.html

<!-- lesson13-1.html 🍵 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カフェ紹介🍵</title>
  <style>
    body {
      background-color: #FFF8E1; /* ページ全体の淡いクリーム色 */
    }
    header {
      background-color: #A1887F; /* ヘッダーにコーヒーブラウン */
      color: white;
      text-align: center;
      padding: 16px;
    }
  </style>
</head>
<body>
  <header>
    <h1>ほっと一息カフェへようこそ🍵</h1>
  </header>
  <p>当店のおすすめは、自家焙煎のコーヒーと手作りスイーツです。</p>
</body>
</html>

ブラウザの出力例

ページ全体が淡クリーム色、ヘッダーはコーヒーブラウンの背景に白文字で表示されます。

1.2. 色の指定方法（色名／16進数／`rgb()`／`rgba()`）

background-color には色名、16進数、rgb()/rgba() 関数が使用可能です。

ファイル名： lesson13-2.html

<!-- lesson13-2.html 📚 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>図書館案内📚</title>
  <style>
    /* 色名 */
    .notice { background-color: lightblue; padding:8px; }
    /* 16進数 */
    .warning { background-color: #FFCDD2; padding:8px; }
    /* rgb() */
    .info    { background-color: rgb(200,230,201); padding:8px; }
    /* rgba() */
    .alert   { background-color: rgba(255,224,178,0.8); padding:8px; }
  </style>
</head>
<body>
  <h1>地域図書館からのお知らせ📚</h1>
  <p class="notice">新刊コーナーが拡充されました。</p>
  <p class="warning">館内は飲食禁止です。</p>
  <p class="info">Wi-Fiがご利用いただけます。</p>
  <p class="alert">営業時間が変更となりました。</p>
</body>
</html>

ブラウザの出力例

　notice（ライトブルー）、warning（薄レッド）、info（淡グリーン）、alert（半透明オレンジ）の帯で表示。

２．背景画像の指定

2.1. `background-image` の基本

background-image: url("画像ファイル"); で背景に画像を設定。縦横に繰り返し表示されます。

ファイル名： lesson13-3.html

<!-- lesson13-3.html 🏞️ -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自然公園🏞️</title>
  <style>
    body {
      background-image: url("forest-pattern.png");
    }
  </style>
</head>
<body>
  <h1>森の自然公園へようこそ🏞️</h1>
  <p><b><mark>静かな林間のトレイルをお楽しみください。</mark></b></p>
</body>
</html>

ブラウザの出力例

「forest-pattern.png」がタイル状に繰り返されます。

2.2. 繰り返し制御：`background-repeat`

値	説明
repeat	縦横に繰り返す（初期値）
repeat-x	横方向のみ繰り返す
repeat-y	縦方向のみ繰り返す
no-repeat	繰り返さずに一度だけ表示

ファイル名： lesson13-4.html

<!-- lesson13-4.html 🌊 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ビーチ情報🌊</title>
  <style>
    body {
      background-image: url("wave.png");
      background-repeat: repeat-x; /* 横方向だけリピート */
    }
  </style>
</head>
<body>
  <h1>サンセットビーチ🌊</h1>
  <p>美しい夕日が堪能できるスポットです。</p>
</body>
</html>

ブラウザの出力例

wave.png が横一列にだけ繰り返されます。

2.3. 固定表示：`background-attachment`

値	説明
scroll	スクロールに合わせて背景も移動（初期値）
fixed	背景を固定し、スクロールしても位置を維持

ファイル名： lesson13-5.html

<!-- lesson13-5.html 🌌 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>星空観察🌌</title>
  <style>
    body {
      background-image: url("stars.png");
      background-attachment: fixed; /* 背景を固定 */
    }
    section {
      background-color: rgba(255,255,255,0.8);
      margin: 40px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <section>
    <h1>星空ガイド🌌</h1>
    <p>夜空に輝く星を観察しよう。</p>
  </section>
</body>
</html>

ブラウザの出力例

スクロールしても stars.jpg が画面に固定表示されます。

2.4. 位置指定：`background-position`

水平方向	縦方向	説明
left	top	左上
center	center	中央
right	bottom	右下

ファイル名： lesson13-6.html

<!-- lesson13-6.html 🚗 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ドライブロード🚗</title>
  <style>
    body {
      background-image: url("road.jpg");
      background-repeat: no-repeat;
      background-position: right bottom; /* 右下に表示 */
    }
    p {
      background-color: rgba(255,255,255,0.7);
      margin: 50px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <p>海沿いのドライブロードを満喫できます。🚗</p>
</body>
</html>

ブラウザの出力例

road.jpg が右下に一度だけ表示されます。

３．背景のサイズ・ショートハンド

3.1. `background-size` によるリサイズ

ファイル名： lesson13-7.html

<!-- lesson13-7.html 🌅 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンライズ🌅</title>
  <style>
    body {
      background-image: url("sunrise.jpg");
      background-size: cover; /* 全面をカバー */
    }
  </style>
</head>
<body>
  <br><br><br>
  <h1>朝日が昇る海岸🌅</h1>
</body>
</html>

cover：アスペクト比を保ちつつ要素全体を覆う
contain：全体を表示するが余白ができる場合あり

ブラウザの出力例

3.2. `background` ショートハンド

複数プロパティを一度に書く例です。

ファイル名： lesson13-8.html

<!-- lesson13-8.html 🌻 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ひまわり畑🌻</title>
  <style>
    body {
      background:
        url("sunflower.jpg") no-repeat center center/cover,
        #FFF9C4; /* 背景色＋画像 */
    }
  </style>
</head>
<body>
  <h1>一面のひまわり畑🌻</h1>
</body>
</html>

ブラウザの出力例

まとめ

ここで学んだ背景関連プロパティを振り返ります。

プロパティ	用途
background-color	背景色（色名／16進数／rgb／rgba）
background-image	背景画像（`url("ファイル")`）
background-repeat	繰り返し制御（repeat／repeat-x／repeat-y／no-repeat）
background-attachment	スクロール固定（scroll／fixed）
background-position	表示位置指定（left／center／right／top／bottom）
background-size	画像サイズ（cover／contain／幅高さ）
background	ショートハンド（複数プロパティまとめ指定）

これらを組み合わせて、印象的で見やすい背景デザインを実現してください！

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