CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで背景色を設定する方法｜background-colorプロパティの使い方

CSSでは、background-colorプロパティを使用することで、任意の要素の背景色を簡単に指定できます。値の指定方法は複数用意されており、標準的な色名（キーワード）のほか、rgb()、rgba()、hsl()、hsla()などの関数も利用できます。

background-colorプロパティの構文

background-colorプロパティの基本的な構文は以下のとおりです。

セレクタ {
    background-color: /*値*/
}

背景色の指定方法の種類

  • 色名（キーワード）：「pink」「azure」など、あらかじめ定義された色の名前で指定します。
  • rgb() / rgba()：赤・緑・青の光の三原色の数値で指定します。rgba()では不透明度（アルファ値）も設定できます。
  • hsl() / hsla()：色相（Hue）、彩度（Saturation）、輝度（Lightness）で指定します。こちらもhsla()で不透明度を設定できます。

使用例1：複数の要素に異なる背景色を適用する

次の例では、擬似クラスを使ってp要素ごとに異なる背景色を設定し、div要素にも個別の背景色を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
    font-family: cursive;
    background-color: pink;
}
p:last-child {
    background-color: azure;
}
div {
    margin: auto;
    padding: 5px;
    font-family: Helvetica;
    width: 430px;
    background-color: burlywood;
}
</style>
</head>
<body>
<p>
Java is a high-level programming language originally developed by Sun Microsystems.<p>
<div>
Java released in 1995</div>
<p>
Java runs on a variety of platforms such as Windows, Mac OS, and the various versions of UNIX.</p>
</body>
</html>

出力結果

このコードを実行すると、最初の段落はピンク色、最後の段落は薄い水色（azure）、中央のdiv要素はベージュ系（burlywood）の背景色で表示されます。

CSSで背景色を設定する方法｜background-colorプロパティの使い方

使用例2：見出し・コンテナ・段落それぞれに背景色を設定する

続いて、div要素・h1要素・p要素にそれぞれ異なる背景色を適用した例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: springgreen;
}
h1 {
    background-color: lightcoral;
    text-align: center;
}
p {
    background-color: lightseagreen;
    font-size: 150%;
}
</style>
</head>
<body>
<div>
<h1>Demo</h1>
<p>This is demo text1. This is demo text2. This is demo text3. </p>
</div>
</body>
</html>

出力結果

実行すると、外側のdiv全体がスプリンググリーン、見出し「Demo」がライトコーラル、段落部分がライトシーグリーンの背景色で表示されます。このように、background-colorプロパティを使えば、ページ内の各要素に柔軟に配色を適用できます。

CSSで背景色を設定する方法｜background-colorプロパティの使い方

  1. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用

  2. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l