サイタ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)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

今日は、CSSの子孫セレクタと複数セレクタに関してです。 特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、 使いこなす事が出来ないので、しっかり練習しましょう。 ■-□-■-□-■-□-■-□-■-□-■ HTMLのツリー構造とは? ■-□-■-□-■-□...

今日は、よく使うCSSのセレクタに関してです。 CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。 とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。 基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。 ...

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

ブログ記事 ページ先頭へ