このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

hsla()”関数CSS3で追加

記事Mar. 3rd,2021
HSL値でアルファ値を含む色を表すCSSの関数、“hsla()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

hsla()”関数

hsla()”関数はHSL色空間の色相(“Hue”)、彩度(“Saturation”)、輝度(“Lightness”、もしくは“Luminance”)の成分と透過度を表すアルファ値で色を指定するための関数です。<color>”値として使用することができます。

HSL色空間のイメージ
HSL色空間のイメージ

1個目の引数は色相を表し、<angle>”値、もしくは<number>”値が使用できます。HSL空間の色相は通常角度で表されるため、<number>”値はそのまま度数を表す数値として解釈されます(“360”は“360deg”と同じ)。

HSL色空間のイメージ
HSL色空間のイメージ

2個目の引数は彩度を表し、<percentage>”値で指定します。“100%”が純色、“0%”で無彩色の灰色になります。

3個目の引数は輝度を表し、<percentage>”値で指定します。“50%”が純色を表し、“0%”が黒色、“100%”が黒色となります。

4個目の引数は色の透過度を示すアルファ値を表します。アルファ値は<percentage>”値、もしくは<number>”値で指定できます。

<percentage>”値で引数を指定する場合
0%”は完全な透明、“100%”は不透明を表します。
<number>”値で引数を指定する場合
0”は完全な透明、不透明は“1”で表されます。

引数はコンマ(“,”)で区切って記述します。

不透明な黒色
hsla(0deg,100%,50%,100%)
hsla(0deg,100%,50%,1)
hsla(0,100%,50%,100%)
hsla(0,100%,50%,1)
半透明な黒色
hsla(0deg,100%,50%,50%)
hsla(0deg,100%,50%,0.5)
hsla(0,100%,50%,50%)
hsla(0,100%,50%,0.5)
透明な黒色
hsla(0deg,100%,50%,0%)
hsla(0deg,100%,50%,0)
hsla(0,100%,50%,0%)
hsla(0,100%,50%,0)

“CSS Color Module Level 3”ではアルファ値を含まない色がhsl()”関数、アルファ値を含む色が“hsla()”関数と区別されていましたが、“CSS Color Module Level 4”では“hsla()”関数はhsl()”関数の別名として定義され、同じ働きをします。

使用例

.purple-100p { background-color: hsla(319deg,43%,60%,100%);}
.purple-90p { background-color: hsla(319deg,43%,60%,90%);}
.purple-80p { background-color: hsla(319deg,43%,60%,80%);}
.purple-70p { background-color: hsla(319deg,43%,60%,70%);}
.purple-60p { background-color: hsla(319deg,43%,60%,60%);}
.purple-50p { background-color: hsla(319deg,43%,60%,50%);}
.purple-40p { background-color: hsla(319deg,43%,60%,40%);}
.purple-30p { background-color: hsla(319deg,43%,60%,30%);}
.purple-20p { background-color: hsla(319deg,43%,60%,20%);}
.purple-10p { background-color: hsla(319deg,43%,60%,10%);}
.purple-0p { background-color: hsla(319deg,43%,60%,0%);}
<table>
<tr>
<td class="purple-100p">100%</td>
<td class="purple-90p">90%</td>
<td class="purple-80p">80%</td>
</tr>
<tr>
<td class="purple-70p">70%</td>
<td class="purple-60p">60%</td>
<td class="purple-50p">50%</td>
</tr>
<tr>
<td class="purple-40p">40%</td>
<td class="purple-30p">30%</td>
<td class="purple-20p">20%</td>
</tr>
<tr>
<td class="purple-10p">10%</td>
<td class="purple-0p">0%</td>
</tr>
</table>
100% 90% 80%
70% 60% 50%
40% 30% 20%
10% 0%

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
hsla()
定義なし

定義なし

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク