LabEx
ログイン無料登録

CSS における背景スタイルの適用

CSSCSSBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、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ファイルを変更することで、前の例を引き続き拡張します。

まず、サンプル画像をダウンロードする必要があります。ターミナルで以下のコマンドを使用します。

wget https://labex.io/courses/images/background-sample.jpg -O ~/project/background-sample.jpg

次に、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.png"), 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>

まず、小さなパターン画像をダウンロードします。

wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png

この例では、2つの高度な背景技術を示しています。

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

    • 半透明なオーバーレイを作成するために線形グラデーションを使用
    • グラデーションと背景画像を組み合わせる
    • 一貫したサイズ指定、位置指定、繰り返しを適用

  2. 重ね合わせた背景：

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

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

まとめ

この実験では、参加者はCSSにおける背景スタイルの適用方法を包括的かつ段階的なアプローチで学びました。この実験では、名前付き色、16進コード、RGB関数などのさまざまな方法を使って背景色を設定することや、背景画像の操作を探求することなど、ウェブページのデザインを向上させるための基本的な技術を扱いました。

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

関連 CSS コース
CSS のクイックスタート

CSS のクイックスタート

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

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

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

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

HTMLCSSJavaScript
初級