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

CSSのhsla()関数で色を定義する方法｜HSLAカラーモデルの使い方を解説

CSSで不透明度（アルファ値）付きのHSL（Hue-Saturation-Lightness：色相・彩度・輝度）モデルを使って色を定義するには、hsla()関数を使用します。HSLAは、RGBよりも直感的に「色のイメージ」から指定できるのが特徴で、透明度も同時に制御できる便利なカラーモデルです。

hsla()関数の基本構文とパラメータ

hsla()関数は、以下の4つのパラメータを受け取ります。

  • 色相（Hue）：0〜360の角度（deg）で色を指定します。0が赤、120が緑、240が青に対応します。
  • 彩度（Saturation）：0%〜100%で指定します。100%が最も鮮やかな色になり、0%に近づくほど灰色になります。
  • 輝度（Lightness）：0%〜100%で指定します。0%が黒、50%が標準的な明るさ、100%が白になります。
  • アルファ（Alpha）：0（完全に透明）〜1（完全不透明）までの数値で透明度を指定します。0.3なら30%の不透明度になります。

使用例

次のコードでは、h1要素にhsl()で赤、h2要素に青の背景色を設定し、p要素にはhsla()を使って半透明の紫の背景色を適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            background-color:hsl(0,100%,50%);
         }
         h2 {
            background-color:hsl(192,89%,48%);
         }
         p {
            background-color:hsla(290,100%,50%,0.3);
         }
      </style>
   </head>
   <body>
      <h1>Red Background</h1>
      <h2>Blue Background</h2>
      <p>This is demo text!</p>
   </body>
</html>

このコードをブラウザで実行すると、「Red Background」には鮮やかな赤い背景が、「Blue Background」には青みのある背景が表示されます。また、デモテキストの段落には、透過率70%（不透明度30%）の紫の背景色が適用され、背後のコンテンツが透けて見える半透明の効果を確認できます。

  1. CSSでX軸方向のスキュー変換を定義する方法（skewXの使い方）

    CSSでは、transformプロパティにskewX()関数を指定することで、要素をX軸（水平方向）に傾斜させることができます。角度の値が大きいほど、要素は水平方向に強く歪みます。以下のコードを実行して、X軸に沿ったスキュー変換の動作を確認してみましょう。サンプルコード<html>    <head>       <style>          div {             width: 30

  2. CSSボックスモデルとは？基本構造をわかりやすく解説

    CSSボックスモデルとはWebデザインやレイアウトを語るうえで欠かせない基本概念が「ボックスモデル（box model）」です。CSSでは、HTMLのすべての要素が四角形の「箱」として扱われます。テキストや画像、見出しなど、どの要素も例外なくこの考え方に基づいて配置されます。ボックスモデルを正しく理解することは、要素のサイズ計算や余白の調整、意図した通りのレイアウトを実現するための第一歩となります。ボックスモデルの4つの構成要素CSSボックスモデルは、内側から外側へ向かって以下の4つの領域で構成されています。1. コンテンツ（content）テキストや画像など、要素そのものが持つ実際の中身です