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

CSSのhsl()関数でHSLモデル（色相・彩度・明度）を使って色を定義する方法

CSSのhsl()関数とは

CSSでHue-Saturation-Lightness（HSL）モデルを使用して色を定義するには、hsl()関数を使います。HSLモデルはRGBよりも人間の色の感覚に近い形で指定できるため、色味や明るさの調整が直感的に行えるのが大きな特徴です。

hsl()関数の3つのパラメータ

hsl()関数は、以下の3つの値をカンマで区切って指定します。

  • 色相（Hue）：0〜360の角度で指定します。0が赤、120が緑、240が青に対応します。
  • 彩度（Saturation）：0%〜100%で指定します。0%はグレーになり、100%に近づくほど鮮やかな色になります。
  • 明度（Lightness）：0%〜100%で指定します。0%は黒、100%は白、50%が標準的な明るさです。

実装例

以下のコードは、CSSのhsl()関数を使って見出しの背景色を設定する例です。実際にブラウザで実行して、色の変化を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            background-color: hsl(0, 100%, 50%);
         }
         h2 {
            background-color: hsl(192, 89%, 48%);
         }
      </style>
   </head>
   <body>
      <h1>赤い背景（Red Background）</h1>
      <h2>青い背景（Blue Background）</h2>
   </body>
</html>

コードの解説

この例では、h1要素にhsl(0, 100%, 50%)を指定しているため、色相0度・彩度100%・明度50%の純色の赤が背景に適用されます。一方、h2要素にはhsl(192, 89%, 48%)を指定しており、色相192度の鮮やかなシアン寄りの青が表示されます。

このように、HSLモデルでは色相の数値を変えるだけで簡単に別の色へ切り替えられるため、配色のバリエーションを作りたい場合にも非常に便利です。

  1. CSSボックスモデルとは？基本構造をわかりやすく解説

    CSSボックスモデルとはWebデザインやレイアウトを語るうえで欠かせない基本概念が「ボックスモデル（box model）」です。CSSでは、HTMLのすべての要素が四角形の「箱」として扱われます。テキストや画像、見出しなど、どの要素も例外なくこの考え方に基づいて配置されます。ボックスモデルを正しく理解することは、要素のサイズ計算や余白の調整、意図した通りのレイアウトを実現するための第一歩となります。ボックスモデルの4つの構成要素CSSボックスモデルは、内側から外側へ向かって以下の4つの領域で構成されています。1. コンテンツ（content）テキストや画像など、要素そのものが持つ実際の中身です

  2. CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方

    CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector {    color: /*値*/ }サンプルコード1次の例では、リン