CSS辞典 hsl()関数、hsla()関数の解説
色をHSL・HSLaで指定するhsl()関数、hsla()関数の使用方法と使用例、サンプルコードを記載
概要・使用方法
{ プロパティ:hsl(色相,彩度,明度)}
{ プロパティ:hsla(色相,彩度,明度,透明度)}「hsl()関数」、またはhsla()関数は、色をHSL、HSLaカラーモデルで指定することができます。透明度を指定した場合は、重なりあった領域は色が混じり合います。
色相、彩度、明度、透明度
| 色相 | 色相環上の0～360度の角度を0～036までの数字で指定する |
| 彩度 | 彩度の強さを0～100%までの%値で指定する |
| 明度 | 明度の強さを0～100%までの%値で指定する |
| 透明度 | 0～1の間の数値で透明度を指定する。小数点も使え、0を指定すると完全に透明になる |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSS hsl関数、hsla関数サンプルページ</title>
<meta charset="uft-8">
<style>
.box1{
width:300px;
height:100px;
background-color: hsl(180,50%,50%);
}
.box2{
width:300px;
height:100px;
background-color: hsla(180,50%,50%,0.5);
}
</style>
</head>
<body>
<div class="box1">hsl()関数</div>
<div class="box2">hsla()関数</div>
</body>
</html>実行結果
hsl()関数
hsla()関数
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
