コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド CSSチュートリアル cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

青灯夜游
青灯夜游
Oct 17, 2018 am 10:57 AM
css

hsl() と hsla() を使用して CSS で色の値を設定するにはどうすればよいですか?この記事では、hsl() と hsla() を使用して CSS で色の値を設定する方法について簡単に説明します。困っている友人は参考にしていただければ幸いです。

CSS でカラー値を設定するには、hsl() と hsla() の 2 つの方法があります。これらは基本的に HSL カラー モード メソッドを使用してカラーを設定します。

HSL カラー モードは、色相 (H)、彩度 (S)、明度 (L) の 3 つのカラー チャネルを変更し、それらを重ね合わせて幅を広げます。さまざまな色。 HSL カラー標準には、人間の視覚で認識できるほぼすべての色が含まれており、現在最も広く使用されているカラー システムの 1 つです。

HSL は色相、彩度、明度の 3 つのチャネルの色を表します。

そして HSLA は HSL をベースに透明度 (A) の設定を追加します。

HSL カラー モードが何であるかがわかったので、CSS で hsl() と hsla() を使用してカラー値を設定する方法を見てみましょう。

CSS の hsl() と色の値の基本構文

hsl(): 

hsl(H,S,L);
ログイン後にコピー

H (色相: 色相): 色から派生ディスク、0 と 360 は赤、120 に近いは緑、240 は青;

S (彩度: 彩度): 値はパーセンテージで、0% はグレースケールを表し、100% を表します。最高の彩度;

L (明るさ: 明度): 値はパーセントでもあり、0% は最も暗いことを表し、50% は平均を表し、100% は最も明るいことを表します。

簡単なコード例を使用して、hsl() が色の値を設定する方法を確認できます。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hsl()和颜色</title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslL1 { background:hsl(320, 100%, 50%); height:40px; }      
			.hslL2 { background:hsl(320, 50%, 50%); height:40px; }      
			.hslL3 { background:hsl(320, 100%, 75%); height:40px; }      
			.hslL4 { background:hsl(202, 100%, 50%); height:40px; }      
			.hslL5 { background:hsl(202, 50%, 50%); height:40px; }      
			.hslL6 { background:hsl(202, 100%, 75%); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslL1"></div>
			<div class="hslL2"></div>
			<div class="hslL3"></div>
			<div class="hslL4"></div>
			<div class="hslL5"></div>
			<div class="hslL6"></div>
		</div>
	</body>
</html>
ログイン後にコピー

レンダリング:

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

# #同じ色相ですが、彩度や明度を変えると別の色になることがわかります

#

background:hsl(320, 100%, 50%); 
background:hsl(320, 50%, 50%);     
background:hsl(320, 100%, 75%);
ログイン後にコピー

#

background:hsl(202, 100%, 50%); 
background:hsl(202, 50%, 50%);
background:hsl(202, 100%, 75%);
ログイン後にコピー
cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）##css の hsla() とカラー値

hsla() の基本構文: 

hsla(H,S,L,A);
ログイン後にコピー

hsla() の H、S、L は hsl( ）、色相、彩度、明度を表しており、基本的な設定は同じなのでここでは紹介しません。 hsla() の A 属性値を見てみましょう:

A (透明度: アルファ): 値は 0 から 1 までの数値で、0 は不透明を表し、1 は完全な透明を表します。

簡単なコード例を通じて、hsla() がどのように色の値を設定するかを見てみましょう: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }      
			.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }      
			.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }      
			.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }      
			.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslaL1"></div>
			<div class="hslaL2"></div>
			<div class="hslaL3"></div>
			<div class="hslaL4"></div>
			<div class="hslaL5"></div>
			<div class="hslaL6"></div>
		</div>
	</body>
</html>
ログイン後にコピー

レンダリング:

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明） From上の例では、この6色の色相、彩度、明度は同じで、透明度を変えるだけで異なる色が表示されることがわかります。 

background:hsla(165, 35%, 50%, 0.2); 
background:hsla(165, 35%, 50%, 0.4);
background:hsla(165, 35%, 50%, 0.6); 
background:hsla(165, 35%, 50%, 0.8); 
background:hsla(165, 35%, 50%, 1.0);
ログイン後にコピー

hsl() と hsla() のブラウザ互換性を見てみましょう:

cssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）現在、hsl() と hsla() は次の環境で使用できます。 Firefox、Google Chrome、Safari などのブラウザはサポートが充実しており、プレフィックスなしで使用できます。


要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS 基本ビデオ チュートリアル

、 CSS3 ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。

以上がcssでhsl()とhsla()を使ってカラー値を設定する方法について簡単に説明します（画像とテキストで詳しく説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7480
15
CakePHP チュートリアル
1377
52
Steamのアカウント名の形式は何ですか
77
11
Win11 Activation Key Permanent
51
19
NYTの接続はヒントと回答です
19
33
もっと見る
Related knowledge
ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップの日付を確認する方法 ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

See all articles