CSS の色と背景

レクチャー 3: CSS の色と背景

この講義では、色と背景を使用して Web サイトを視覚的に魅力的にする方法を学びます。色と背景を効果的に適用する方法を理解することは、魅力的で見た目にも美しい Web デザインを作成する鍵となります。

---

CSS での色の使用

CSS を使用すると、色名、16 進数値、RGB、RGBA、HSL、HSLA の使用など、さまざまな方法で色を指定できます。

1.色の名前

CSS は、事前定義された幅広い色の名前を提供します。

• 例:

  h1 {
    color: red;
  }

これにより、すべての

のテキストの色が設定されます。要素を赤にします。

2. 16 進数の色

16 進コードは、赤、緑、青 (RGB) 値の組み合わせによって定義される 6 桁の数字と文字の組み合わせです。

• 例:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB と RGBA

RGB は、赤、緑、青を表します。 RGBA は、不透明度のアルファ チャネルを追加します。

• 例 (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• 例 (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL と HSLA

HSL は、色相、彩度、明度の略です。 HSLA にはアルファ チャネルが含まれています。

• 例 (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• 例 (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

背景の適用

CSS の背景は、要素に色、画像、グラデーションなどを追加することでデザインを強化できます。

1.背景色

background-color プロパティを使用して、HTML 要素の背景色を設定できます。

• 例:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2.背景画像

CSS を使用すると、画像を背景として使用できます。

• 例:

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

これにより、クラス バナーを持つ要素に背景画像が設定されます。画像はエリア全体をカバーし、中央に配置されます。

3.背景の繰り返し

背景画像を水平方向、垂直方向に繰り返すか、まったく繰り返さないかを制御します。

• 例:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4.背景位置

背景画像の開始位置を制御できます。

• 例:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5.背景のグラデーション

グラデーションを使用すると、2 つ以上の色の間でスムーズな移行を作成できます。

• 例 (線形グラデーション):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• 例 (放射状グラデーション):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

実践例:

色、背景画像、グラデーションを使用する例で、これらの概念を実践してみましょう。

HTML:

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of using colors and backgrounds in CSS.</p>
</div>

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

この例では:

• 本体の背景色はライトグレーです。

• テキストは濃い青色です。

• .content div には、暗いグラデーションのオーバーレイを持つ背景画像があり、白いテキストが目立ちます。

• テキストは背景を引き立てるために明るい色合いです。

練習演習

1. 見出し、段落、div を含む Web ページを作成します。
2. さまざまなカラー形式 (16 進数、RGB、HSL) を試して、テキストと背景のスタイルを設定します。
3. 背景画像をセクションに適用し、その位置、サイズ、繰り返しプロパティを調整します。
4. 線形または放射状のグラデーションの背景を持つセクションを作成します。

---

次のステップ: 次の講義では、CSS の タイポグラフィとフォント スタイル について説明します。ここでは、Web サイトの読みやすさを向上させるためにフォントを選択およびカスタマイズする方法を学びます。と訴えます。また会いましょう!

---

以上がCSS の色と背景の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。