CSS3の基本 - レベルアップCSS

CSS3で追加された色の値

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3では、これまでの16進数やキーワードに加えて、不透明度やHSLカラーなどの新しい色の値を使うことができます。ここでは、CSS3における新しい色の値の使い方について紹介します。
講師:
08:43

字幕

CSS3 ではこれまでの 16 進数やキーワードに加えて不透明度や HSL カラーなどの新しい値を使うことができます。このレッスンでは CSS3 における新しい色の値の使い方について紹介します。まず RGBa カラー値について紹介します。RGBa カラー値の a とは alpha の頭文字を意味し色の不透明度を指定します。ここでは見出しに対して RGBa カラー値を指定してみましょう。h1 要素に対してここでは color プロパティを使って RGBa カラー値を指定します。RGBa カラー値を指定するにはRGBa 関数を使います。RGBa 関数の中ではそれぞれの値を数値で指定します。まず R Red の値を数値で指定します。ここでは 255 を指定します。次に G Green の値を指定します。3つ目は B Blue の値を指定します。ここまででは RGB それぞれに 255 0 0 の値が指定されていますのでここでは赤を指定していることになります。数値はこれまで通り 0 から 255 の 256段階で色を指定します。そして最後に a の部分、この部分には 0 から1 の間で不透明度を指定します。 1 が不透明 0 が完全に透明を表す値です。ここでは半分の 0.5 つまり 50% の透明度で赤を表示するという指定をしてみます。するとウェブブラウザでは 255 0 0 の赤が半分の 50% の透明度で表示されたときの色でカラープロパティ文字色が設定されています。また RGBa カラー値は別の書き方をすることもできます。一旦先ほどの指定をコメントアウトしておきましょう。別の書き方では RGBa 関数の中の数値を0 から 255 の数値ではなくパーセント値で指定できます。実際に上の指定と同じ指定を書いてみましょう。color プロパティに RGBa 関数を使って色を指定します。このときパーセント値が使えますので真っ赤を指定するには 100%0% 0%で指定できます。そして最後の alpha の部分の指定は先ほどと同様に 0 から 1 で指定します。先ほど指定した CSS の宣言と全く同じ宣言を別の書き方で指定してみました。次に指定できる値は HSL カラー値です。HSL とは色相、彩度、明度の英語の頭文字を取った名前でHSL と略します。これら3つの値を HSL 関数に入力することでカラーの値を指定できます。 この HSL カラー値では RGB カラー値に比べてより直感的に色を制御できます。最初の H 色相で指定できる値は0 から 360 度で表されるためCSS の構文では単位を付けず単に数値を記述します。イメージとしては次の図の通りです。HSL で指定できる色相は真っ赤な部分を角度として 0 度と計算しそこから計算して 360 度という度数で値を指定します。そのため 0 度の赤の反対 180 度では赤と全く反対の色相である青緑が指定できます。では実際にここでは H 色相に対して赤を指定してみましょう。先ほどと同じく h1 要素に対して文字色を指定するため一旦先ほどの指定をコメントアウトしておきます。そして h1 をセレクタとしてcolor プロパティ。文字色を変えます。今度は先ほどとは違ってHSL 関数を使います。色相は 0 度、真っ赤を指定するためここでは 0 を指定します。そして次に指定する値は S 彩度です。彩度は色の鮮やかさを表し 0 から 100%の間の値で指定します。ここでは 100% を指定しましょう。そして最後に L 。L の明度は色の明るさを表しこちらも 0 から 100% で表します。 明度の場合 0% は黒 100% は白50% は色相で指定した色そのままとなりますのでここでは 50% を指定します。ウェブブラウザを見ると真っ赤な文字色が設定されていることが分かります。HSL では RGB と同じように HSL カラー値にも不透明度を加えたHSLa カラー値があります。一旦先ほどの指定をコメントアウトして今度はHSLa カラー値で指定してみましょう。HSLa カラー値を指定するにはHSLa 関数を使います。これを color プロパティに対して指定し同様に 0100% 50% という指定をします。そして最後に RGB と同じような形で不透明度を指定すると文字色に HSLa カラー値を使って文字色を指定することができました。そして最後に指定できるのはcurrentColor キーワードです。これは文字色を指定する color プロパティの値をそのまま取得するためのキーワードです。これはデフォルトでは継承を行わない子要素のプロパティにcolor プロパティを継承させるために使われます。例えば現在 CSS では line クラスというクラスに高さ 1px が適用されています。 HTML を確認すると header 要素とmain 要素の間にdiv 要素がありその div 要素にline クラスが立っています。この line クラスで使うプロパティの値で親の要素で使った color プロパティの値を継承したいためここでは body 要素に対して指定している黒の文字色を継承してみましょう。body 要素には黒の文字色が設定されていますのでその子孫であるline クラスでは currentColor キーワードを使ってこの黒の値を継承することができます。ここでは line クラスの背景色に対してcurrentColor キーワードでbody 要素の黒の文字色を継承してみます。ウェブブラウザを見ると先ほどにはなかったラインが現れました。これは元々 line クラスによって 1px の高さが確保されていたボックスの背景色に対して body 要素に適用されている黒の文字色、この色を背景色として継承するためにcurrentColor キーワードを使って黒を継承した結果です。このレッスンでは CSS3 で使えるようになった不透明度やHSL カラーなどの新しい色の値の使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

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

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

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

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