風葉音 2006-03-07 22:45

·色と不透明度

RGB値とα値

前回はWidgetがオブジェクトというものから成り立っていること、オブジェクトにはその特徴を指定することができる属性があることを説明しました。また、最後にはこれまでに出てきたtextオブジェクトの属性の一覧をお見せしました。

属性の中には指定方法が独特のものがあり、前回は表示位置に関する属性について説明しました。今回は引き続いて色と不透明度に関する属性の指定方法を説明します。

属性 概要
color 文字の色
opacity 文字の不透明度
bgColor 背景の色
bgOpacity 背景の不透明度

RGB値

色を指定する属性は、その名前に「color」もしくは「Color」を含みます。textオブジェクトの場合は文字の色を指定するcolorと、背景色を指定するbgColorの2つになります。

色には「三原色」と呼ばれる、基本となる3つの色が存在します。

三原色は、それを光で表すのか、インクで表すのかによって異なり、前者は光(色)の三原色、後者は料色の三原色と呼ばれています。

色の指定は、ウェブページを作ったことのある方でしたらご存知かもしれませんが、「RGB値」と呼ばれる「#」のあとに数字やアルファベットが6文字を連ねる表記をします。

RGB値は2文字ずつで順に赤(Red)・緑(Green)・青(Blue)の量を意味しています。それぞれの量は「00」から「ff」までの16進数2桁の範囲で調整することができます。

16進数とは、1桁を0〜15までの数で表現する数値体系のことです。対して、我々が通常使用しているものは10進数になります。16進数では0から9までは普通の数字を使いますが、10〜15まではアルファベットのa〜fを使用します。従って、16進数が2桁ですので162=256、0から255を表現することができるのです。

例えば「#ff0000」は赤の成分だけが255ですので、これは赤の純色を意味します。「#000000」のように全成分が0であれば黒を、反対に全成分が255の「#ffffff」は白をそれぞれ意味します。

指定したい色を数値で表現できるようになるにはある程度慣れが必要ですので、OSやペイントツール、ウェブページ作成ツールなどに備わっている色の設定変更機能を使用すると、その色を表現する数値がわかることでしょう。

わたしの力不足から、Trident(Internet Explorer)でしか動作しないものではありますが、以下に同様のことを確認できるものを用意しました。動作にはJavaScriptが必要となります。

α値

不透明度とは、文字通りその対象となるものがどの程度非透過な表示をされるかを指定するものです。透過な表示ということはすなわち、その後ろにあるものも表示されるようになるということです。

この後ろにあるものを表示するために、前後の画像を透過性を考慮して合成する処理(αブレンディング)に用いられる係数を「α値」といい、不透明度属性はまさにこの値と同じ意味を持ちます。

色と同様に、不透明度を指定する属性は、その名前に「opacity」もしくは「Opacity」を含みます。textオブジェクトの場合は文字の不透明度を指定するopacityと、背景の不透明度を指定するbgOpacityrの2つになります。

不透明度も色の成分と同様に0〜255までの指定範囲を持ちますが、RGB値とは異なり、16進数ではなく10進数で指定します。0が完全な透明を、255が不透明を示します。従って、この間の数値を指定することでカラーフィルタのような効果や、透明感のあるWidgetを作成することができます。

Yahoo! Widget Engineに最初からついてくるWidgetには半透明なものが多いのですが、実はこれらはこの不透明度を使用しているのではなく画像によって半透明を実現しています。

これらのWidgetが使用している画像は、赤緑青の3成分に加え、不透明度を合わせた4つの成分を色として表現する、いわゆる「ARGB値」と呼ばれる色表現をできる形式のためこのようなことができるのです。

* * *
·トラックバック i
name sign site
·コメント i ここでは「w≠笑」です。
検索
メイプルストーリー
ロリポップ!
Opera
NOw 時間ねぇー