【CSS】レッスン3-06:背景画像を設定しよう

一つ前の章では画像のスタイルを変更する方法について学習しました。

今回は背景画像の設定方法について見ていきましょう。

Lesson3-1:ボックス配置の基礎を理解しよう
Lesson3-2:ボックスサイズを変更しよう
Lesson3-3:ボックスを自在に配置しよう
Lesson3-4:画像を自在に配置しよう
Lesson3-5:画像のスタイルを変更しよう
Lesson3-6:背景画像を設定しよう ◁今回はココ
Lesson3-7:リンクボタンを設置しよう
Lesson3-8:リストとテーブルのスタイルを変更しよう
Lesson3-9:CSS変数を理解しよう

Webページのデザインをより魅力的にするためには、文字やレイアウトだけでなく、視覚的な要素も重要です。

その中でも「背景画像」は、ページ全体の雰囲気や印象を大きく左右する効果的なデザイン手法のひとつです。

このレッスンでは、CSSを使って背景画像を簡単に設定する方法を学び、サイズや位置を調整して思い通りのデザインを作成するテクニックを身につけましょう。

<<前のページ HTML/CSSの記事一覧 次のページ>>

背景画像とは

背景画像とはWebページの背景部分に配置される画像のことです。通常、テキストやコンテンツの背後に表示され、ページ全体のデザインや雰囲気を引き立てる役割を果たします。

例えば風景の写真を背景にすることで、自然を感じさせるデザインにしたり、グラデーション画像を使うことで、シンプルながらもスタイリッシュな印象を与えることができます。

背景画像は単なる装飾だけでなく、Webサイトのブランドイメージやメッセージを視覚的に伝える重要な要素です。

たとえばカフェのホームページならコーヒーの写真、旅行サイトなら美しい風景画像を背景に使用することで、訪問者に強い印象を残すことができます。

このレッスンではCSSを使用して背景画像を設定し、効果的にページデザインを向上させる方法を詳しく学んでいきます。

背景画像の基本設定

背景画像はCSSの background-image プロパティを使用することで簡単に設定できます。

このプロパティを使うことで、任意の画像をWebページの背景として表示することが可能です。

背景画像を設定する基本構文は以下の通りです。

selector {
  background-image: url('画像のパス');
}
  • selector: CSSで指定する要素(例:bodydivなど)。
  • url('画像のパス'): 表示したい画像の場所を指定します。画像ファイルは、相対パスまたは絶対パスで指定できます。

ページ全体に背景画像を設定する

以下のHTMLコードをコピーし、適切な画像のパスを指定してブラウザ表示してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>背景画像の基本設定</title>
  <style>
    body {
      background-image: url('background.jpg'); /* 背景画像の指定 */
    }
  </style>
</head>
<body>
  <h1>背景画像のサンプル</h1>
  <p>このページは背景画像が設定されています。</p>
</body>
</html>
  • <style>タグの中で、CSSを直接記述しています。
  • bodyタグに対してbackground-imageプロパティを指定しているため、ページ全体の背景に画像が表示されます。
  • url('background.jpg')は、HTMLファイルと同じフォルダに保存された「background.jpg」という画像ファイルを参照しています。

背景画像のサイズ調整

背景画像を設定しただけでは、画像のサイズが意図した通りに表示されない場合があります。

画像が大きすぎたり、小さすぎたりして、デザインが崩れてしまうこともあります。

この問題を解決するために使用するのが、background-size プロパティです。

background-size プロパティの基本

background-size プロパティは、背景画像の表示サイズを調整するためのプロパティです。

このプロパティを使うことで、画像を拡大・縮小したり、特定のサイズにフィットさせたりすることができます。

基本構文は以下の通りです。

selector {
  background-image: url('画像のパス');
  background-size: 値;
}
  • selector: CSSのセレクタ(例: body, div など)
  • : サイズを指定する値(例: cover, contain, 100px 200px, 50% 50%など)

値の部分には具体的な数値のほかに、coverやcontainといった指定ができます。

covercontain の違い

  • cover: 背景画像が要素全体を覆うように拡大または縮小されます。画像の一部がはみ出すことがありますが、余白はできません。
  • contain: 背景画像が要素の中に完全に収まるように表示されます。画像全体が表示されますが、余白ができる場合があります。

先ほどのHTMLコードにbackground-sizeを追記し、4種類の方法で背景画像を表示してみましょう。

なお、cover以外の指定をする際に、繰り返し表示をしない場合は「background-repeat: no-repeat;」を追記すると1枚だけの表示となります。

背景画像の位置調整

背景画像を設定した後、画像の表示位置を細かく調整したい場合にはbackground-position プロパティを使用します。

このプロパティを使うことで、背景画像を中央、上部、下部、左右など、自由に配置することができます。

background-position プロパティの基本

background-position プロパティの基本構文は以下の通りです。

selector {
  background-image: url('画像のパス');
  background-position: 値;
}
  • selector: CSSのセレクタ(例: body, div など)。
  • : 画像の配置場所(例: center, top, right, bottom, left など)。

位置のキーワード指定

background-position では、以下のキーワードを使用して画像の配置を指定できます。

  • center:中央に配置(デフォルト設定)
  • top:上寄せ
  • bottom:下寄せ
  • left:左寄せ
  • right:右寄せ

background-size と併用した配置

background-size で画像のサイズを調整した場合、background-position を組み合わせることでさらに細かなデザインが可能になります。

以下のCSSコードをbodyに読み込んでみましょう。

.box {
  width: 400px;
  height: 300px;
  background-image: url('background.jpg');
  background-size: 150px 150px;
  background-position: center bottom; /* 中央下に配置 */
  background-repeat: no-repeat;       /* 繰り返しを防止 */
  border: 1px solid #333;
}
  • 画像がボックスの中央下部に表示されます。
  • background-repeat: no-repeat; を指定することで、余分な画像の繰り返し表示を防ぎます。

まとめ

  • background-position で背景画像の配置を細かくコントロールできる。
  • キーワード(center, top, right, など)で直感的に配置が可能。
  • ピクセルやパーセンテージ指定で、より精密な位置調整ができる。
  • background-size との併用で、デザインの幅が広がる。

次は、背景色と背景画像を組み合わせる方法について学んでいきましょう。

以下のHTMLコードに background-position プロパティを追加して、背景画像がボックスの中央に表示されるようにしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>背景画像の練習問題</title>
  <style>
    .box {
      width: 300px;
      height: 200px;
      background-image: url('background.jpg');
      background-size: cover;
      /* ここにコードを追加して中央に配置してみよう */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

背景色と併用する方法

背景画像だけでなく、背景色(background-color を併用することで、より視覚的に美しいデザインを作成することができます。

背景色は画像が表示されない場合のフォールバックとしても役立ち、ページのデザインの一貫性を保つために重要な役割を果たします。

background-color プロパティの基本

background-color プロパティは、要素の背景に単色の色を設定するためのCSSプロパティです。

基本構文は以下の通りです。

selector {
  background-color: 色;
}
  • selector: CSSのセレクタ(例: body, div など)。
  • : 色名(例: red, blue)、16進数カラーコード(例: #ffcc00)、RGB値(例: rgb(255, 204, 0))などで指定します。

背景画像と背景色の併用

background-imagebackground-color は同時に指定することができます。

この場合、背景色は背景画像の下に表示され、画像が透過している場合や表示されない場合に見えるようになります。

以下のHTMLコードをコピーし、適切な画像のパスを指定してブラウザ表示してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>背景色と背景画像の併用</title>
  <style>
    .background-box {
      width: 300px;
      height: 200px;
      background-color: #f0f0f0; /* 背景色の指定 */
      background-image: url('background.png'); /* 背景画像の指定 */
      background-size: cover; /* 画像を全体にフィット */
      background-position: center; /* 中央に配置 */
      border: 2px solid #000;
    }
  </style>
</head>
<body>
  <div class="background-box"></div>
</body>
</html>
  • background-color: #f0f0f0; で薄いグレーの背景色を指定しています。
  • background-image: url('background.png'); で背景画像を設定。
  • もし画像が読み込まれない場合、この背景色が代わりに表示されます。

透過画像との併用

PNG形式などの透過画像を使用する場合、背景色が透過部分に見えるため、デザインの自由度が高まります。

.transparent-box {
  width: 300px;
  height: 200px;
  background-color: lightblue; /* 透過部分に表示される色 */
  background-image: url('transparent.png'); /* 透過PNG画像 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #333;
}
  • 透過部分にlightblue の背景色が表示されます。
  • 透過画像を使うことで、デザインに奥行きや立体感を加えることができます。

グラデーションとの併用

背景色として、単色だけでなくグラデーションも使用可能です。

linear-gradient() を使うことで、背景画像と組み合わせた美しいデザインが作れます。

.gradient-box {
  width: 300px;
  height: 200px;
  background-image: 
    linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
    url('background.jpg'); /* グラデーションと背景画像の重ね合わせ */
  background-size: cover;
  background-position: center;
  border: 2px solid #000;
}
  • linear-gradient() で赤から青への半透明グラデーションを作成。
  • その上に背景画像を重ねることで、デザインに深みを持たせることができます。

まとめ

  • background-color は、背景画像が表示されない場合のフォールバックとして便利。
  • 透過画像と組み合わせることで、背景色が透けて見えるデザインが可能。
  • グラデーションを併用することで、さらにおしゃれな背景デザインが作れる。

このように背景色と背景画像を組み合わせることで、シンプルながらも洗練されたWebデザインを実現することができます。

次のコードは背景画像の上にグラデーションを重ねて表示するためのものです。

グラデーションを追加して、上から下に向かって薄い赤から薄い青に変化する効果を作成してみましょう。

.gradient-box {
  width: 300px;
  height: 200px;
  background-image: 
    ____ ;  /* ここにグラデーションのコードを追加しよう */
    url('background.jpg');
  background-size: cover;
  background-position: center;
  border: 2px solid #000;
}

まとめ

今回のレッスンでは、CSSを使った背景画像の設置方法について学びました。

背景画像はWebページの印象を大きく左右する重要な要素です。今回学んだCSSプロパティを活用することで、シンプルなデザインから複雑なレイアウトまで自由自在に表現できるようになります。

ここまで学習を進めてきたあなたは、確実にスキルを向上させています!ぜひ、実際に自分のWebページで試してみて、さまざまなデザインに挑戦してみてください。

継続的な練習が、さらなる成長につながります。お疲れさまでした!

練習問題3-6:背景画像と背景色を組み合わせたデザインを作ろう!

以下の条件に従って、背景画像と背景色を組み合わせたオリジナルのデザインを作成してみましょう。

  • 背景画像を用意すること。
  • 背景画像はページ全体(bodyタグ)に表示されるようにすること。
  • background-size を使って、画像がページ全体を覆うように表示すること。
  • 画像が中央に表示されるように、background-position を調整すること。
  • 背景色として薄いグレー(#eeeeee)を設定し、背景画像が表示されない場合のフォールバックとすること。
  • 画像が繰り返されないように、background-repeat を設定すること。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>総復習:背景デザインの課題</title>
  <style>
    body {
      /* ここに必要なCSSプロパティを追加して完成させよう! */
    }
  </style>
</head>
<body>
  <h1>背景デザインの総復習!</h1>
  <p>この記事で学んだ内容を活かして、素敵な背景デザインを作ってみよう!</p>
</body>
</html>

初めてのWebサイトを作ろう3-6

このサイトの Lesson1-1(HTML学習の入り口) か Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る