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

CSS3のHSLAカラープロパティとは？使い方をわかりやすく解説

HSLAカラーモデルとは

HSLAは、色相（Hue）、彩度（Saturation）、輝度（Lightness）、アルファ（Alpha）の4つの要素で色を表現するCSS3のカラーモデルです。最後のアルファ値は、RGBAと同様に色の不透明度を指定するために使用されます。

各値の意味は以下の通りです。

  • 色相（Hue）：0〜360の角度で色合いを指定します（0が赤、120が緑、240が青など）。
  • 彩度（Saturation）：0%〜100%で色の鮮やかさを指定します。0%にするとグレーになります。
  • 輝度（Lightness）：0%〜100%で明るさを指定します。0%は黒、100%は白になります。
  • アルファ（Alpha）：0（完全な透明）〜1（完全な不透明）の数値で不透明度を指定します。

HSLAの使用例

次の例では、HSLAカラープロパティを使って、同じ緑系の色相でも輝度の異なる3つの段落を表示しています。いずれもアルファ値を0.3に設定しているため、背景が透けた半透明の状態で描画されます。

<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>
   <body>
      <p>HSLA colors:</p>
      <p id = "d1">Less opacity green</p>
      <p id = "d2">Green</p>
      <p id = "d3">Green</p>
   </body>
</html>

このコードでは、#d1は標準的な緑（輝度50%）、#d2は明るい緑（輝度75%）、#d3は暗い緑（輝度25%）の背景色となり、すべて同じ不透明度（0.3）で表示されます。このようにHSLAを使うと、色相を保ちながら明るさだけを調整した配色を直感的に作成できるのが大きなメリットです。

  1. CSS3のRGBA・HSL・HSLAカラー値の使い方を徹底解説

    CSS3では、従来のカラーネームや16進数（HEX）に加えて、より柔軟な色指定の方法が複数導入されました。その代表が RGBA、HSL、HSLA の3つのカラー値です。それぞれの特徴と使い方を、実際のコード例とともに詳しく見ていきましょう。RGBAカラー値とはRGBA は「Red（赤）」「Green（緑）」「Blue（青）」「Alpha（アルファ）」の4つの要素で構成される色指定方法です。RGBはそれぞれ0〜255の数値で色の強さを表し、Alphaは色の不透明度（透明度）を指定します。Alphaの値は 0.0〜1.0 の範囲で指定します。1.0が完全な不透明（透過なし）、0.0が完全な透明を意

  2. CSS3のRGBAカラー値とは？透明度の指定方法を実例付きで解説

    RGBAカラー値とは RGBAは、Red（赤）・Green（緑）・Blue（青）・Alpha（アルファ）の頭文字を組み合わせたCSS3の色指定形式です。従来のRGBカラーモデルに加えて、Alphaパラメータで色の不透明度（透過度）を細かく制御できるのが最大の特徴です。 アルファ値は0.0〜1.0の範囲の数値で指定します。 ・1.0 … 完全に不透明（通常のRGBと同じ見え方） ・0.5 … 半透明 ・0.0 … 完全に透明（見えなくなる） このように、同じ色でもアルファ値を変えるだけで、背後にある要素や背景が透けて見えるエフェクトを簡単に実現できます。 アルファ値による透明度の違い 下の画像