全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

Web・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ 難解カラーコー...

難解カラーコードも、意味を知れば簡単!

今日は、主にCSSで色の指定をする時に使う、カラーコードについてです。
「#ea34f1」こんなやつです。

一見すると、「何の暗号?」って感じてしまいますが、
きちんとルールがあり、そのルールを覚えてしまえば、さほど難しい問題ではありません。


■-□-■-□-■-□-■-□-■-□-■
パソコンのモニターは、三色の組み合わせ
■-□-■-□-■-□-■-□-■-□-■
パソコンだけでなく、テレビ等もそうなのですが、いわゆる「モニター」が色を再現する際は、
光の三原色を組み合わせる事で色を再現しています。
光の三原色は、「赤、緑、青」の3色です。
英語にしたときの頭文字を取って、「RGB」という言葉がよく使われます。

※Red Green Blue


■-□-■-□-■-□-■-□-■-□-■
各々の色をどれくらい組み合わせるか
■-□-■-□-■-□-■-□-■-□-■
上記で説明したRGBは、3色の色を各々どれくらい組み合わせるかによって、色を再現します。
そして、組み合わせる量は、0〜255の、計256段階に分かれています。
つまり再現出来る色の数は、256の三乗で、16,777,216通りになります。

例えば「赤」は、
R=255、G=0、B=0
と考えます。


■-□-■-□-■-□-■-□-■-□-■
カラーコードは16進数で考える
■-□-■-□-■-□-■-□-■-□-■
カラーコードは、RGBの値を、各々16進数で表した時の数値になります。

普段使う10進数が、10で位が一つ上がるのに対し、
16進数は、16で位が一つ上がります。9以上はアルファベットを使います。

10進数
1,2,3,4,5,6,7,8,9,10

16進数
1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10

16進数で表した時、255は、「FF」になります。
再現出来る色の段階である、0〜256は、
16進数で考えると、00〜FFになるわけです。

さて、最初に書いたカラーコードを見てみます。

#ea34f1

これは、#以降の2文字ずつ分解して考えます。
最初の2文字が赤(R)
次の2文字が緑(G)
最後の2文字が青(B)
を16進数で表しています。

#ea34f1

各々十進数に戻すと、
R:ea→234
G:34→52
B:f1→241

となり、各々0〜255の256段階のうち、
赤が234、緑が52、青が241
の色を組み合わせた色となります。

こんな色です。



■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
カラーコードは、RGBの0〜255の数値を、16進数にしてくっつけたものです。
一見すると暗号みたいに思えてしまいますが、ルール自体は上記の様に単純だったりします。


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
とうとうiPhone6が発売されましたね!!
予約しているので、早く取りに行きたいのですが、
仕事の関係上、日曜日まで取りに行けなさそう。。。
早く欲しいです!!

それではまた☆


■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

 

(2014年9月19日(金) 20:16)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ