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

hsla() CSS関数の使い方とサンプルコード

CSSで色を指定する方法のひとつに、HSLモデル（色相・彩度・明度）に基づいて色を定義するhsla()関数があります。hsla()は「hsl()」にアルファ値（透明度）を加えたもので、半透明の色を表現したい場合に便利です。

hsla()関数の基本構文

hsla(色相, 彩度, 明度, アルファ値)

各パラメータの意味

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

実装例

以下のコードでは、見出しにhsl()を使った不透明な背景色を、段落には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>赤い背景</h1>
      <h2>青い背景</h2>
      <p>これはデモ用テキストです！</p>
   </body>
</html>

サンプルコードのポイント

  • hsl(0,100%,50%)：色相0度＝赤を最大の彩度・標準の明度で表現した、鮮やかな赤色の背景になります。
  • hsl(192,89%,48%)：シアン寄りの青系統の色で、くっきりとしたブルーの背景になります。
  • hsla(290,100%,50%,0.3)：紫（マゼンタ寄り）の色を30%の不透明度で描画するため、背後の要素が透けて見える半透明の背景になります。

このようにhsla()関数を使えば、直感的な数値指定で色味を調整しながら、透明度も自由にコントロールできます。デザインのアクセントカラーやオーバーレイ表現などにぜひ活用してみてください。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不