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

CSSで要素の背景色を設定する方法

HTML要素の背景色を設定するには、CSSの background-color プロパティを使用します。このプロパティは、段落や見出し、divなど、あらゆる要素に適用でき、色名（例：blue）だけでなく、カラーコード（#0000ff）やRGB値（rgb(0, 0, 255)）でも指定可能です。

記述例

以下のコードを実行すると、background-color プロパティの使い方を実際に確認できます。インラインスタイルとして style 属性に直接指定しています。

<html>
   <head>
      <body>
         <p style = "background-color:blue;">
         このテキストには青い背景色が設定されています。</p>
      </body>
   </head>
</html>

表示結果

上記コードをブラウザで開くと、指定した段落の背景が青色で表示され、その中のテキストが青い背景の上に描画されます。

補足：外部スタイルシートでの指定

実務では、スタイルをHTMLから分離して管理するために、外部スタイルシートやstyle要素内でクラスを使って指定するのが一般的です。

.highlight {
  background-color: blue;
}

このように記述しておけば、HTML側で <p class="highlight">〜</p> とクラスを付けるだけで、同じ背景色を複数の要素に再利用できます。

  1. CSSでボタンの背景色を変更する方法【初心者向け解説】

    CSSでボタンの背景色を変更するには、background-colorプロパティを使用します。このプロパティに任意のカラーコードやカラー名を指定するだけで、ボタンの見た目を簡単にカスタマイズできます。background-colorプロパティの基本background-colorは、要素の背景色を設定するためのCSSプロパティです。ボタン以外にも、divやリンクなど、あらゆるHTML要素に適用できます。値には「yellow」のようなカラー名のほか、「#ff0000」のような16進数カラーコードや、「rgb(255, 255, 0)」のようなRGB値も指定可能です。サンプルコード以下のコードを実

  2. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m