スポンサーサイト

--年--月--日
拍手する
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iPhone用のホームページを作ろう その2

2009年05月25日
拍手する
基礎編として今回はカラーコードの意味を解説します。
「#DDFFCC」とか見たことありませんか?PhotoshopとかHTML(簡単に言うとホームページを作るための文法です)での色指定なんかでよく出てくる表記です。
ホームページを作るうえでどうしても色の指定は必要になります。基本を抑えておけば微妙な色合いの指定も出来るようになるので、理解しておいたほうが得ですよ。
カラーコードの表記はほぼ16進数で行われています。16進数は2進数と関連性が強く、2進数はbitという単位で表記されます。えーっと・・・なんのこっちゃ?ですよね^^;。順番に解説しますのでちょっとお付き合いを。

そもそもbitという概念はコンピューターが1と0しか認識できないというところから始まっています。スイッチで言えばONとOFFしか分からないのがコンピューターです。そのスイッチが沢山あっても同時に認識して、ON/OFFの配列パターンに意味を付けて各種処理を行うのがコンピューターというマシンです。

コンピューターは常に進化して、4bit→8bit→16bit→32bit→64bitという一度に処理が行える単位が増加してきました。
・4bit=2の4剰=16(Byte)
・8bit=2の8剰=256(Byte)
・16bit=2の16剰=65,536(Byte)=64KB=約6万5千バイト
・32bit=2の32剰=4,294,967,296(Byte)=4GB=約43億バイト
・64bit=2の64剰=18,446,744,073,709,551,615(Byte)=16EB(エクサバイト)=約172億GB
           = 1,844京6,744兆737億955万 1,615バイト
単位:キロ(K)→メガ(M)→ギガ(G)→テラ(T)→ペタ(P)→エクサ(E)
   *1byte(1バイト)は8bitとなります。

前置きはこれくらいにして、実際にカラーコードに当てはめてみます。
「#DDFFCC」の意味は?。最初の#は16進数ということを表しています。

また16進数かよ!だから何なんだよそれ!!16進数・・・ここで、ちょっと整理します。
普段生活で使っている数字は10進数です。10進数は1から始まって9まで1桁でそこから1増えると10となり2桁になります。99までいって次に100となり3桁になります。つまり基数を10とした数値の表現方法が10進数ということです。
では2進数は?2進数はbitという単位の塊です。bit=1と0=スイッチのON/OFF つまり1bitでは2種類の数字しか表せません。これを2進数といいます。
2進数では0の次が1。1の次がなんと10という表現になります。1の次にすぐ桁上がりして2桁になってしまうのが2進数です。
では、16進数は???流れで行くと16進数の基数は16ということが想定されますよね。ということは、16をカウントしたところで桁が上がるはず。1~9までは普通に数えられます。次は10?10では桁上がりして2桁になってしまいます。さて、どうしましょう.。答えはアルファベットを使用します。数え方を羅列すると[0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F]で次に10となります。が、普通に10と表記すると10進数と見分けがつきません。そこで、16進数の場合は10Hとか#10とか$10とかという書き方をします。
2進数、10進数、16進数それぞれを同じ数字で表記すると次のようになります。(下記の3つは同じ数字です)
10進数=221
 2進数=11011101B (最後のBは2進数ということを明示しています)
16進数=#DD (最初の#は16進数ということを明示しています)

こうして並べると2進数は非常に分かりにくいですよね。そこで、コンピューターで入力に使うのは主に16進数になっています。16進数の1桁は2進数の4桁に対応します。[1101B=#D]という感じです。2進数の場合1桁を1bitと数えるので、この場合は4bitの2進数ということになります。
よく使う表記では16進数は2桁以上で表記されることがほとんどです。16進数の2桁は2進数では8桁。2進数の8桁は8bitという表現となります。8bitは16進数の1単位としても良く使われます。
ここでちょっと2進数の計算の仕方を説明します。
2進数の桁は右側から1,2,4,8,16,32,64,128・・・という単位で桁上がりが行われます。
1000Bという2進数があった場合、8+0+0+0で10進数では8ということになります。同様に1111Bという2進数の場合は、8+4+2+1という計算になり、10進数では15ということになります。

そこでカラーコードです。カラーコードはRed/Green/Blueの光の3原色で構成されます。この3色の濃淡を組み合わせることによって色々な色を作り出します。
最近では最低でも1色に付き256段階の色の指定が出来るようになっています。と、いうことは組み合わせの数は256*256*256=16,777,216色。1色に256段階の濃淡が指定できれば1600万色を表現できるということです。
では、なぜ256段階という半端な数字なのか?それは16進数の都合からなのです。つまり良く使われる16進数の1単位が8bitだからなのです。
8bit=11111111Bという8桁の2進数になります。では、この8bitを10進数にするには128+64+32+16+8+4+2+1と計算すれば良いので、計算結果は255になります。これにゼロという段階を足すと256段階になるのです。

では、実際のカラーコードである「#DDFFCC」はどうなっているのか?
各色は均等に8bitづつに割り当てられています(注:例外も存在しますが、その場合何らかの注意書き等があるはずです)。この16進数を分解すると Red=#DD Green=#FF Blue=#CC になります。
それぞれの色は
■Red=#DD
■Green=#FF
■Blue=#CC
となり、これを組み合わせると
#DD+#FF+#CC=■こんな感じの色になります。
各段階はゼロに近づくほど暗くなります。したがってすべてゼロ=#000000を指定すると黒になり、#FFFFFFを指定すると白になります。
ということは、各色を均等に暗くすればグレーになるということです。
ちなみに
#808080=■(#80=128)
この色を半分の暗さにすると
#404040=■(#40=64)
となり、逆に少し明るくすると
#A0A0A0=■(#A0=160)
となります。
各色を強調するには対応する色の段階の数値を上げればOKです。
上記2番目の色で青を強調(一番明るい255)してみると
#4040FF=■(#FF=255) 
となります。
各色は2桁ずつ順番になっているので対応する場所の色の数値データを変えれば、色々な色を作ることが出来ます。

結構遠回りした説明になりましたが、なんとなく分かりましたか?。ここに書いたことをしっかり理解するとかなりの応用が利くようになります。あとは慣れです。がんばって理解してください。
Comment

管理者のみに表示

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。