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

CSS3のHSLAカラー値とは？透明度（アルファ）の指定方法を解説

HSLAカラー値とは

CSS3で利用できるHSLAカラー値は、色相（Hue）、彩度（Saturation）、輝度（Lightness）、そしてアルファ（Alpha：不透明度）の4つの値を組み合わせて色を指定する方法です。

特に重要なのがアルファ値です。これは色の不透明度を表しており、0.0〜1.0の範囲内の数値で指定します。0.0を指定すると完全な透明になり、1.0を指定すると完全な不透明になります。この値を調整することで、要素や背景に半透明の効果を簡単に加えることができます。

HSLAの各パラメータ

  • Hue（色相）： 0〜360の角度で色味を指定（0=赤、120=緑、240=青など）
  • Saturation（彩度）： パーセンテージで指定し、100%が最も鮮やかな色
  • Lightness（輝度）： パーセンテージで指定し、50%が標準的な明るさ
  • Alpha（不透明度）： 0.0（完全に透明）〜1.0（完全に不透明）で指定

記述例

以下は、HSLAを使って複数の段落にそれぞれ異なる色相と透明度を指定したサンプルコードです。比較用として、通常のhsl()およびrgba()を使用した指定も含まれています。

<!DOCTYPE html>
<html>
<head>
<style>
   #demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
   #demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
   #demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
   #demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
   #demo5 {background-color: hsl(150, 100%, 60%);}
   #demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、各段落に異なる色相と透明度を持つ背景色が適用されます。アルファ値が小さくなるほど背景が透けて表示され、透明度の違いがひと目で確認できます。

  1. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;

  2. Matplotlibでデータ値を色情報に変換する方法をわかりやすく解説

    Matplotlibでは、数値データの値に応じて色を割り当てることで、散布図などを視覚的に分かりやすく表現できます。この記事では、データ値をカラーマップを使って色情報に変換し、プロットに反映させる具体的な手順をサンプルコードとともに解説します。 データ値を色情報に変換する基本の手順 図のサイズを設定し、サブプロット間および周囲の余白（パディング）を調整します。 plt.get_cmap() を使ってカラーマップのインスタンスを取得します。名前が指定されない場合は、rc設定のデフォルト値が使用されます。 色情報に変換する対象となるランダムな数値データを作成します。 プロット用のランダムなデータ