CSS3のグラデーション

カラーを定めるHSLaモデル

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSのカラーは、HSLaモデルにもとづく、hsla()関数で指定することもできます。
講師:
04:06

字幕

このレッスンではカラーを定義する時の HSLaと呼ばれるモデルについて ご説明します CSSではカラーを様々な形で 指定することができます いまブラウザで開いているこの四角い領域は 虹色のカラーのグラデーションが 設定してあります 設定の仕方 カラーはいろいろに定義できますので それをざっと見たうえで hsla という 関数についてご紹介したいと思います 虹色の線形グラデーションを定義した HTML ドキュメントを Dreamweaver で開いています この background はそうですね linear-gradient ということで 複数のカラーが設定してあります ただカラーの設定の仕方はわざと バラバラにしました まず最初 red 最後 purple これはいわゆるカラー名 カラーネームという指定の仕方です それから rgb に α を加えた rgba 255, 255, 0 ということになりますと これは黄色で α は 1 完全な不透明です そして慣れない方にはちょっと分かりにくい と思うのが この hsla という指定です rgb と似て三個の数字でカラーを定め 最後の数字は α です ではこの hsla というのが どういう決め方になっているのか 説明しましょう HSLa モデルというのは4つの値で カラーを定めます 1つ目は Hue 色相です これは頭文字 H になります 次に頭文字 S は Saturation 彩度ですね 鮮やかさということです 3つ目の L は Lightness 輝度 明るさですね そして最後は Alpha 不透明度あるいは― アルファという形で通ってしまいますね この形で指定するのが先ほど説明した hsla 関数というもので この関数はどう指定するかというと 4つの数値を定めます 色相 彩度 輝度 アルファ と先ほどご紹介したとおりの順番です HSLa ですね まず色相はカラーサークルという円形で 表すのですけれど その中の度数値 0~360 で 値の単位はつけません よく度数で Del と付ける事があるのですが 単位は付けずに数値だけを定めます 次に彩度 鮮やかさは 0 にすると完全にグレーになります 100 が元通りの状態 これはパーセンテージで指定します そして輝度も パーセンテージなのですが 0 にすると必ず黒になってしまいます 同じく100%にすると どんな色であろうとも白になります 50%が元通りの色ということです そして最後はおなじみですね アルファで― 0 が完全に透明で 1が完全に不透明です 色相についてだけ 簡単に補足しておきましょう いまウィキペディアで色相のページを 開いています カラーサークルと言ったのですが 日本語で言いますと― 色相環というもので こういう形でまさに円形で カラーが指定してあります そして 0 度が赤になるんですが それはここを見ると良いのですけど 色相スケールというもので 0 が赤でオレンジから黄色に変わり グリーン シアン ブルー 紫 そして 360 で赤に戻ります なお関数の rgba は a をとった アルファを指定しない― rgb という関数があります 同様に HSLa についても HSL という関数がありますので アルファを特に指定しないという場合には これを使うこともできます このレッスンではカラーモデル HSLa モデルと その HSLa モデルに基づいた HSL 関数の引数など 指定の仕方についてご説明しました

CSS3のグラデーション

CSS3のグラデーション機能はW3Cで勧告候補となり、最新のブラウザであれば使えるようになりました。このコースでは線形や放射状のグラデーションの構文や使い方を詳しく解説します。グラデーションを使ったパターンやテクスチャの作例を一歩一歩段階的に作り進めながら、必要に応じて文法的な説明も加え、細かな設定やオプションまで広くカバーしています。

1時間56分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月27日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。