hsla()

エイチエスエルエー（関数）

意味色相、彩度、明度、透明度を指定する関数

hsla()とは？

hsla()関数は、色をHSLA色空間で指定するためにCSSで使用する関数です。HSLAは「Hue（色相）」「Saturation（彩度）」「Lightness（明度）」の3つの色の特性と「Alpha（透明度）」を指定することができます。色相は0から360の角度で、彩度と明度はパーセンテージで、透明度は0（完全に透明）から1（完全に不透明）の値で指定します。

hsla()の具体的な使い方

HSLAで半透明の背景色を設定する例

<style>
    .hsla-color {
        background-color: hsla(120, 100%, 50%, 0.3);
        padding: 20px;
        color: white;
    }
</style>

<div class='hsla-color'>
    HSLA(120, 100%, 50%, 0.3)
</div>

背景色を色相が120（緑色）、彩度が100%、明度が50%、透明度が0.3の色に設定しています。

hsla()に関するよくある質問

Q. hsla()の各パラメータは何を表す？

A. hsla()の4つのパラメータは順に、色相(0-360度)、彩度(0-100%)、明度(0-100%)、透明度(0-1)を表します。

Q. hsla()とhsl()の違いは？

A. hsla()はhsl()に透明度のパラメータを追加したものです。hsl()は不透明度が常に1（完全に不透明）です。

Q. 透明度を変えずに色だけ変える？

A. 最初の3つのパラメータ（色相、彩度、明度）を変更し、最後の透明度パラメータはそのままにすることで、透明度を維持したまま色を変更できます。

hsla()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのhsla()やmax()、min()、repeating-radial-gradient()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。