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

CSSで背景色の不透明度を設定する方法｜RGBAの使い方を徹底解説

背景色に不透明度（透過効果）を設定したい場合は、CSSのRGBAカラーモデルを使用します。RGBAは、赤（R）・緑（G）・青（B）の3原色に、透明度を表すアルファ値（A）を加えた色の指定方法です。アルファ値は0〜1の範囲で指定し、「0」が完全な透明、「1」が完全不透明になります。

RGBAの基本構文

背景色の不透明度は、backgroundプロパティで次のように指定します。

background: rgba(40, 135, 70, 0.5); /* 不透明度50% */

サンプルコード

以下のコードでは、同じ色でありながらアルファ値を変えることで、透明度の異なるボックスを表示しています。ブラウザで実際に実行して、表示の違いを確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background: rgb(40, 135, 70);
            padding: 20px;
         }
         div.first {
            background: rgba(40, 135, 70, 0.2);
         }
         div.second {
            background: rgba(40, 135, 70, 0.6);
         }
      </style>
   </head>
   <body>
      <p>RGBAカラーモデルによる背景色の指定</p>
      <div class = "first"><p>不透明度20%</p></div>
      <div class = "second"><p>不透明度60%</p></div>
      <div><p>デフォルト（不透明度100%）</p></div>
   </body>
</html>

実行結果のポイント

  • rgba(40, 135, 70, 0.2) … 不透明度20%。背景がほとんど透けて見えます。
  • rgba(40, 135, 70, 0.6) … 不透明度60%。やや濃い色で表示されます。
  • rgb(40, 135, 70) … アルファ値を指定しないデフォルト状態。完全不透明です。

opacityプロパティとの違いに注意

CSSには要素全体の透明度を制御するopacityプロパティもありますが、こちらを使うとテキストなどの子要素まで一緒に半透明になってしまいます。背景色だけを透過させたい場合は、この記事のようにRGBA形式で色を指定するのが確実です。また、近年のブラウザでは8桁のHEXカラー（例：#28874633）でも透明度を指定できるため、用途に応じて使い分けるのもおすすめです。

  1. CSSでグリッドアイテムに名前を設定する方法（grid-areaの使い方）

    CSSでグリッドアイテムに名前を設定するには、grid-areaプロパティを使用し、grid-template-areasプロパティと組み合わせます。まず親要素（グリッドコンテナ）側でgrid-template-areasを使ってレイアウト上の領域に名前を定義し、次に子要素（グリッドアイテム）側でgrid-areaにその名前を指定することで、任意のアイテムを特定の領域へ自由に配置できます。 サンプルコード <!DOCTYPE html> <html> <head> <style> .container { display: grid;

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

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