Skip to content

6. 色と背景

Web デザインにおいて、色と背景の使い方は視覚的な魅力を高め、情報の伝達を効率化するために非常に重要です。この章では、CSS を使って色と背景を効果的に設定する方法を学びます。

6.1 色の設定

CSS では、色をさまざまな方法で指定できます。代表的なものには以下の方法があります。

6.1.1 色名

CSS には 147 種類の色名が定義されています。例えば、以下のように色名を使用して色を設定できます。

.color-example {
  color: red; /* テキストの色 */
  background-color: blue; /* 背景の色 */
}

6.1.2 16 進数（Hex）

16 進数を使用して、特定の色を指定することもできます。例えば、#RRGGBB形式です。

.hex-example {
  color: #ff5733; /* オレンジ色のテキスト */
  background-color: #333333; /* 暗い灰色の背景 */
}

6.1.3 RGB

RGB（Red, Green, Blue）色モデルを使用し、rgb()関数で色を指定する方法です。

.rgb-example {
  color: rgb(255, 0, 0); /* 赤色のテキスト */
  background-color: rgb(0, 0, 255); /* 青色の背景 */
}

6.1.4 RGBA

RGBA は RGB に透明度（アルファ値）を追加したものです。

.rgba-example {
  color: rgba(255, 0, 0, 0.5); /* 半透明の赤色テキスト */
  background-color: rgba(0, 0, 255, 0.3); /* 半透明の青色背景 */
}

6.1.5 HSL

HSL（Hue, Saturation, Lightness）は色相、彩度、明度を利用した色指定方法です。

.hsl-example {
  color: hsl(120, 100%, 50%); /* 緑色のテキスト */
}

6.2 背景の設定

背景の設定には、色だけでなく画像も使用されるため、より複雑なデザインが可能になります。

6.2.1 背景色の設定

背景色はbackground-colorプロパティを使用して設定します。

.bg-color-example {
  background-color: lightblue; /* 背景色を薄い青に設定 */
}

6.2.2 背景画像の設定

背景画像を設定するには、background-imageプロパティを使用します。

.bg-image-example {
  background-image: url("background.jpg"); /* 画像のURLを指定 */
}

6.2.3 背景画像の繰り返し

背景画像の繰り返しを制御するには、background-repeatプロパティを使用します。

.bg-repeat-example {
  background-image: url("background.jpg");
  background-repeat: no-repeat; /* 背景画像を繰り返さない */
}

6.2.4 背景画像の位置

背景画像の位置を指定するには、background-positionプロパティを使用します。

.bg-position-example {
  background-image: url("background.jpg");
  background-position: center; /* 背景画像を中央に配置 */
}

6.2.5 背景画像のサイズ

背景画像のサイズを指定するには、background-sizeプロパティを使用します。

.bg-size-example {
  background-image: url("background.jpg");
  background-size: cover; /* 背景画像を要素のサイズに合わせる */
}

6.3 複数の背景の設定

複数の背景を設定する場合、コンマで区切って指定することができます。

.multiple-bg-example {
  background-image: url("background1.jpg"), url("background2.png");
  background-position: left top, right bottom;
  background-repeat: no-repeat, repeat;
}

これにより、各背景画像の位置や繰り返し方法を個別に指定することができます。

以上がこの章の内容です。各項目を実際に試して、どのように表示されるか確認してみてください。色と背景の適切な設定は、Web ページの見た目を大きく変えることができる強力なツールです。