先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで背景のスタイルを変えたいんですけど、どうやればいいですか？」

先生

「背景のスタイルはCSSのbackgroundプロパティを使えば、色や画像などを自由に設定できますよ。」

生徒

「ひとつのページの中で、部分的に背景を切り替えることはできますか？」

先生

「はい、できます！『コンテナ』と呼ばれるHTMLの箱のようなものごとに、背景を切り替えられるんです。具体的に見ていきましょう！」

1. 背景スタイルとは？CSSで設定する理由

背景スタイルとは、ウェブページの要素（ようそ）に色や画像をつけて見た目をわかりやすくするための装飾（そうしょく）のことです。例えば、タイトルの背景に青い色をつけたり、お知らせの部分に薄い黄色をつけたりすることで、どこに何が書いてあるのかがすぐにわかるようになります。

CSS（シーエスエス）というのは、ウェブページのデザインをコントロールするための言語です。HTMLだけだと文字の内容は書けますが、色や配置（はいち）などの見た目を変えるのはCSSの役割です。

2. コンテナとは？HTMLの「箱」をイメージしよう

「コンテナ」という言葉は聞きなれないかもしれませんが、これはウェブページの中の「区切り」や「箱」のことです。HTMLでは、<div>というタグを使って、このような「箱」を作ることができます。

たとえば、ページの中に「お知らせのコーナー」と「お問い合わせのコーナー」があったとしましょう。この2つを別々の箱（コンテナ）に入れておけば、それぞれに違う背景色をつけて区別することができます。

3. CSSで背景色を変える基本の書き方

背景色（はいけいいろ）を変えるには、CSSでbackground-colorというプロパティを使います。例えば、あるコンテナの背景を水色にしたい場合は、次のように書きます。


<style>
.container-blue {
    background-color: skyblue;
    padding: 20px;
}
</style>

<div class="container-blue">
    ここは水色の背景です
</div>

ブラウザ表示

4. 複数のコンテナに異なる背景を設定する方法

複数の「箱」にそれぞれ違う背景色をつけたいときは、クラス名（class）を使い分ければOKです。クラス名とは、「CSSの設定をこの部分に適用しますよ」という印のようなものです。


<style>
.container-blue {
    background-color: skyblue;
    padding: 20px;
}
.container-yellow {
    background-color: lightyellow;
    padding: 20px;
}
</style>

<div class="container-blue">
    ここは水色の背景です
</div>

<div class="container-yellow">
    ここは黄色の背景です
</div>

ブラウザ表示

5. 背景スタイルを画像に切り替えるには？

背景は色だけでなく、画像を使うこともできます。たとえば、おしゃれな模様や写真を背景に使いたいときは、background-imageというプロパティを使います。


<style>
.container-image {
    background-image: url('https://via.placeholder.com/300x100');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
    color: white;
}
</style>

<div class="container-image">
    ここは背景に画像を使っています
</div>

ブラウザ表示