CSS辞典 hsl()関数、hsla()関数の解説

css辞典 CSS辞典
この記事は約3分で読めます。

色を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 実行サンプル

hsl()関数、hsla()関数のchromeブラウザの実行結果

Firefox 実行サンプル

hsl()関数、hsla()関数のfirefoxブラウザの実行結果

edge 実行サンプル

hsl()関数、hsla()関数のedgeブラウザの実行結果

opera 実行サンプル

hsl()関数、hsla()関数のoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました