+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< July 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< フリー写真素材サイト「足成」 | main | iPhoneがバカでかくなるテーブル >>
CSS3で実装されるcolorの気になる部分を調べてみた


10月19日にHTML5の草案が更新され、その中で勧告案として取り入れられたCSS3 のcolor要素。
これは今までwebカラーしか使用できなかったわけですが、それがRGB等のほかの色指定も可能になるということで、一層の表現力アップが期待できるわけです。


そのなかで、使えるカラープロファイルがいくつか書いてあったんですが、
正直なところRGB以外はピンと来ない状態。
ということで、詳しいカラーについての情報を調べてみることに。



まずHTML5の草案に関する詳しい詳細はこちら。

■HTML5草案が更新、CSS3 Colorは勧告案に [ミツエーリンクス]
http://standards.mitsue.co.jp/archives/001484.html



こちらで説明されているようにCSS3のColorモジュールが勧告案として公開されました。
このColorモジュールは、現在のモダンブラウザでも実装されているものもあり、すでに実用可能な機能です。

おおきな特徴としてこれまでの色指定に加え、RGBとHSLによるカラー指定が可能になっていることがあげられます。ですがRGBはわかるとして、HSLがちょっと聞きなれなかったので調査してみました。
せっかくなのでRGBのことも含めてレポートします。

まずCSS3で指定できるカラーの種類を列挙します。
それにたいして、それぞれ解説します。

CSS3のカラー

指定できるカラーは次の通りです。
  • RGB
  • RGBA
  • HSL
  • HSLA


RGB

おそらく理科の授業かなんかで習った方もいるかもしれません。RGBとは色の表現方法のひとつで加法混色といわれたりもします。R = Red(赤)、G = Green(緑)、B = Blue(青)、の3色の頭文字です。



加法混色とは、色を重ねると明るくなってゆくという混色のことをいいます。
モニターやTV、デジカメなどに使われています。光の3原色などともいわれ、これに対して絵の具やインクなど印刷媒体などで用いられるものは物体の3原色といわれています。いわゆるCMYKのことで、減法混色とも呼ばれます。(減法混色については別の機会に)

つまるところ、PCではいつも使ってる色彩表現方法というわけです。Photoshopなどの色指定もRGB指定があるので、なじみの指定方法が使えるということになります。


CSS3のRGB指定方法

指定ソースはこちら。
■sample 1
div#sample { color: rgb(255,255,255); }

■sample 2
div#sample { color: rgb(100%,100%,100%);}

■sample 3
div#sample {color: #ffffff; }
sample1は0〜255までの数値指定した場合の表記です。
指定は左から(R,G,B)の順番になっています。また、加法混色なので、数値が高いほど明るい色になります。数値はPhotoshopなどの画像処理ソフトを参考にピックアップすることになるでしょう。

sample2はパーセンテージでの指定です。指定順はsample1と同じです。

sample3は従来と同じように16進数指定です。



RGBA

これは先ほどのRGBにA =Alpha(アルファチャンネル) がプラスされたものです。これにより透明度の設定も可能になります。


CSS3のRGBA指定方法

■sample 1
div#sample { color: rgb(255,0,0,1); }

■sample 2
div#sample { color: rgb(100%,0%,0%,1);}
RGB指定にくわえ不透明度分(アルファ)の指定数値が追加されます。
アルファの指定は0〜1までの間で指定します。0が完全に透明で1が不透明ということになります。
細かい調整は0.01単位で調整可能です。

RGBAには16進数での指定ができませんのでご注意ください。




HSL

HSLは、H = Hue(色相)、 S = Saturation(彩度)、L = Lightness/Luminance(輝度)、の3つの成分からなる色彩表現の一つです。

RGBとは異なった方法で、以下のような定義があります。

  • Hue(色相):色味を360度の円の角度で色相を表現します。0度は赤、180度は反対にある青という感じに配置されています。



  • Saturation(彩度):1が純色で0に近づくほど純度が損なわれ灰色になっていきます。
  • Lightness/Luminance(輝度):100%が白。0%が黒であらわします。
上記の定義を図にするとこんな感じになります。


CSS3のHSL指定方法

■sample 1
div#sample { color: hsl(0,100%,50%); }
このような記述になります。
RGBとは違った定義なので、少し慣れが必要かもしれません。
指定順は左から次のようになります。

color: hsl(色相,彩度,輝度);

色相は0〜360の間を指定。
彩度は0〜100の%指定。
輝度は0〜100の%指定。

sample1の場合は色指定になります。輝度は0%が黒、100%が白になることから、通常の明るさを指定する場合は50%することになります。




HSLA

HSLAはHSLにアルファが加えられたものです。RGBと同じですね。


CSS3のHSLA指定方法

■sample 1
div#sample { color: hsl(0,100%,50%,1); }
指定方法はRGBと同じく、0〜1までの間で指定します。0が完全に透明で1が不透明ということになります。
細かい調整は0.01単位で調整可能です。




そのほか

RGB,RGBA,HSL,HSLAはカラーの指定方法でしたが、そのほかにもCSS3のcolorに関する指定があります。


transparent

transparentは完全な透明の指定です。指定したいクラスの”background-color”が透明である場合はこれを使用します。この指定そのものはCSS1から存在しているということです。
使用シーンとしては、インラインフレームの背景を透明にするなどが考えられます。


currentColor

初期の色を指定するキーワードです。
たとえば、
div#samlpe {
    color:#FF0000; //赤を指定
    border:10px solid #0066FF; //青を指定
    border-color:currentColor;
 }
この場合、これまでであれば、border内で指定した色が反映されますが、次の行でcurrentColorを指定することにより、colorで設定した色がborderにも引き継がれます。




とこんな感じになっています。
なかなか複雑ではありますが、アルファ指定ができるなどデザイン面での有効活用が望めそうです。
ブラウザ対応も主要なモダンブラウザとIE9で対応しており、今後HTML5ならびにCSS3が本格的に普及する上で、利用に問題ない状況が整っているようです。
おぼえておいて損はないと思います。

最後にWeb Color216色のRGB、HSLデータが一覧できるサイトがありましたのでリンクを。

■Web Color 216 色データ
http://noz.day-break.net/webcolor/webcolor216.html




今回のエントリーの参考にさせていただいたサイト

■CSS3色モジュール
http://zng.info/specs/css3-color.html


■血統の森 web実験小屋 - CSS3ウェブブラウザ実装メモ - CSS3 color (HSL)
http://momdo.s35.xrea.com/web-html-test/CSS3-memo/color.html


■色 - CSS3 Pre-Reference 〜 CSS3のリファレンスサイト 〜
http://css3.under.jp/value-unit/color/


■wikipedia HLS色空間
http://ja.wikipedia.org/wiki/HLS%E8%89%B2%E7%A9%BA%E9%96%93



参考書籍

色彩の基本的な知識に。



HTML5の基本的な理解にどうぞ。



| CSS | 21:24 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - CSS3で実装されるcolorの気になる部分を調べてみた | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990234