CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSの色


CSSは、140以上の色名、HEX値、RGB値、RGBA値、HSL値、HSLA値、および不透明度をサポートしています。


RGBAカラー

RGBAカラー値は、アルファチャネルを使用したRGBカラー値の拡張です。これは、色の不透明度を指定します。

RGBAカラー値は、rgba(赤、緑、青、アルファ)で指定されます。alphaパラメータは、0.0(完全に透明)から1.0(完全に不透明)までの数値です。

rgba(255、0、0、0.2);
rgba(255、0、0、0.4);
rgba(255、0、0、0.6);
rgba(255、0、0、0.8);

次の例では、さまざまなRGBAカラーを定義しています。

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */


HSLカラー

HSLは、色相、彩度、明度の略です。

HSLカラー値は、hsl(hue、saturation、lightness)で指定されます。

  1. 色相はカラーホイールの度数です(0から360まで):
    • 0(または360)は赤です
    • 120は緑色です
    • 240は青です
  2. 彩度はパーセンテージ値です。100%はフルカラーです。
  3. 明るさもパーセンテージです。0%は暗い(黒)、100%は白です。
hsl(0、100%、30%);
hsl(0、100%、50%);
hsl(0、100%、70%);
hsl(0、100%、90%);

次の例では、さまざまなHSL色を定義しています。

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

HSLAカラー

HSLA色値は、色の不透明度を指定するアルファチャネルを使用したHSL色値の拡張です。

HSLAカラー値は、hsla(hue、saturation、lightness、alpha)で指定されます。ここで、alphaパラメーターは不透明度を定義します。alphaパラメータは、0.0(完全に透明)から1.0(完全に不透明)までの数値です。

hsla(0、100%、30%、0.3);
hsla(0、100%、50%、0.3);
hsla(0、100%、70%、0.3);
hsla(0、100%、90%、0.3);

次の例では、さまざまなHSLA色を定義しています。

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

不透明度

CSSopacityプロパティは、要素全体の不透明度を設定します(背景色とテキストの両方が不透明/透明になります)。

opacityプロパティ値は、0.0(完全に透明)から1.0(完全に不透明)までの数値である必要があります

rgb(255、0、0);不透明度:0.2;
rgb(255、0、0);不透明度:0.4;
rgb(255、0、0);不透明度:0.6;
rgb(255、0、0);不透明度:0.8;

上記のテキストも透明/不透明になることに注意してください。

次の例は、不透明度のあるさまざまな要素を示しています。

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

エクササイズで自分をテストする

エクササイズ:

<h1>要素の完全な赤の背景色のRGBA色値を挿入します。透明度はありません。

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>