LabEx
ログイン登録

CSS で背景スタイルを適用する

CSSBeginner
オンラインで実践に進む

はじめに

この実験 (Lab) では、CSS を使用して高度な背景スタイルを適用する方法を学びます。特に、色と画像の操作を通じてウェブページのデザインを強化することに焦点を当てます。この実験では、HTML 要素の背景色の設定、背景画像の追加とサイズ調整、画像の配置と繰り返し制御、および複数の背景プロパティの組み合わせによる視覚的に魅力的なウェブレイアウトの作成といった、不可欠なテクニックを網羅します。

実践的なハンズオン例を通じて、名前付きカラー、16 進数コード、RGB 関数を使用した背景色の指定方法を様々な方法で探求し、正確なサイズ調整と配置テクニックで背景画像を取り込む方法も学びます。この実験の終わりには、CSS の背景プロパティを使用して、よりダイナミックで魅力的なウェブページデザインを作成するための実践的なスキルを習得していることでしょう。

HTML 要素に背景色を設定する

このステップでは、CSS を使用して HTML 要素に背景色を設定する方法を学びます。背景色は、さまざまな要素に色を追加することで、ウェブページのデザインを強化するための基本的な方法です。

まず、背景色のスタイリングを実証するための HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに styles.html という名前の新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* ここに CSS を追加します */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

次に、さまざまな要素に背景色を設定するための CSS を追加しましょう。HTML ファイルの <style> セクションを更新します。

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

この例では、背景色を指定する 3 つの方法を示しました。

  1. 名前付きカラー (blue)
  2. 16 進数カラーコード (#FF5733)
  3. RGB カラー関数 (rgb(200, 230, 255))

ファイルを保存し、ウェブブラウザで開いて、要素に適用されたさまざまな背景色を確認してください。

背景画像とサイズを追加する

このステップでは、HTML 要素に背景画像を追加し、CSS を使用してそのサイズを制御する方法を学びます。前の例を基に、~/project ディレクトリにある styles.html ファイルを更新して進めます。

サンプル画像は ~/project ディレクトリにあります。

それでは、styles.html ファイルを以下の内容で更新してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Fills entire container
    </div>
    <div class="image-container contain-background">
      Contain: Fits entire image
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 pixels
    </div>
  </body>
</html>

この例では、背景画像のサイズを指定する 3 つの異なる方法を示しています。

  1. background-size: cover; - コンテナ全体を覆うように画像をスケーリングします。
  2. background-size: contain; - 画像全体がコンテナ内に収まるようにスケーリングします。
  3. background-size: 200px 150px; - 背景画像の特定のピクセルサイズを設定します。

この HTML ファイルをブラウザで開くと、3 つの異なる背景画像サイズ指定テクニックが表示されます。

背景画像の配置

このステップでは、CSS を使用して背景画像の配置を制御する方法を学びます。さまざまな背景配置テクニックを実証するために、~/project ディレクトリにある styles.html ファイルの編集を続けます。

styles.html ファイルを以下の内容で更新してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

この例では、背景画像を配置する 4 つの異なる方法を示しています。

  1. background-position: top left; - 画像を左上隅に配置します。
  2. background-position: center; - 画像をコンテナの中央に配置します。
  3. background-position: bottom right; - 画像を右下隅に配置します。
  4. background-position: 20% 80%; - パーセンテージ値を使用してカスタム配置を行います。

この HTML ファイルをブラウザで開くと、さまざまな配置値が背景画像の配置にどのように影響するかを確認できます。

背景画像の繰り返しを制御する

このステップでは、background-repeat CSS プロパティを使用して背景画像の繰り返しを制御する方法を学びます。さまざまな繰り返しテクニックを実証するために、~/project ディレクトリにある styles.html ファイルの編集を続けます。

styles.html ファイルを以下の内容で更新してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Default)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertical)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

この例では、背景画像の繰り返しに関する 4 つの異なるテクニックを示しています。

  1. background-repeat: repeat; - 画像を水平方向と垂直方向の両方に繰り返します（デフォルト）。
  2. background-repeat: repeat-x; - 画像を水平方向のみに繰り返します。
  3. background-repeat: repeat-y; - 画像を垂直方向のみに繰り返します。
  4. background-repeat: no-repeat; - 画像の繰り返しを無効にします。

この HTML ファイルをブラウザで開くと、さまざまな繰り返し値が背景画像の表示にどのように影響するかを確認できます。

複数の背景プロパティを組み合わせる

このステップでは、複数の背景プロパティを組み合わせて、より複雑で興味深い背景デザインを作成する方法を学びます。高度な背景スタイリングテクニックを実証するために、~/project ディレクトリにある styles.html ファイルを修正します。

styles.html ファイルを以下の内容で更新してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

small-pattern.jpg は ~/project ディレクトリにあります。

この例では、2 つの高度な背景テクニックを示しています。

  1. オーバーレイ付き複数背景：

    • 線形グラデーションを使用して半透明のオーバーレイを作成します。
    • グラデーションと背景画像を組み合わせます。
    • 一貫したサイズ設定、配置、繰り返しを適用します。

  2. レイヤード背景：

    • 繰り返しパターン画像と線形グラデーションを組み合わせます。
    • 各背景レイヤーに異なるサイズ設定と配置を使用します。

この HTML ファイルをブラウザで開くと、複数の背景プロパティがどのように複雑で視覚的に興味深いデザインを作成できるかを確認できます。

まとめ

この実験では、参加者は包括的なステップバイステップのアプローチを通じて、CSS で背景スタイルを適用する方法を学びました。この実験では、名前付きカラー、16 進数コード、RGB 関数などのさまざまな方法を使用した背景色の設定や、背景画像の操作の探索など、ウェブページのデザインを強化するための基本的なテクニックを扱いました。

実践的な演習では、HTML 要素に背景画像を追加する方法、サイズ設定、配置、繰り返しを制御する方法、および複数の背景プロパティを組み合わせる方法を示しました。実践的な例を通して、学習者はさまざまなスタイリングテクニックを使用して、視覚的に魅力的でダイナミックなウェブページ背景を作成するために CSS を使用する実践的なスキルを習得しました。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development