2009年09月03日
3桁のカラーコードと6桁のカラーコードはどう違うの？
今回は、CSS（スタイルシート）に使われています、3桁のカラーコードのお話です。通常、カラーコードというと6桁なんですが CSS（スタイルシート）を見てみますと、3桁と6桁のカラーコードが使用されています。
CSS（スタイルシート）に記述されているカラーコードを変更すれば、スキンの色やフォントなどの色を変えることができるんですが、色見本のカラーコードは通常6桁で表示されていますので、CSS（スタイルシート）に記述されているカラーコードが3桁だった場合、6桁のカラーコードに変えれるのか、ちょっと不安になりますよね。
CSS（スタイルシート）に記述されているカラーコードを変更すれば、スキンの色やフォントなどの色を変えることができるんですが、色見本のカラーコードは通常6桁で表示されていますので、CSS（スタイルシート）に記述されているカラーコードが3桁だった場合、6桁のカラーコードに変えれるのか、ちょっと不安になりますよね。
実は、この3桁のカラーコードは6桁のカラーコードを省略しただけのものなので、実際には6桁のカラーコードが指定されているだけなんです。例えば #CCC と記述されているカラーコードは #CCCCCC を省略した記述になります。真っ黒の #000000 は、#000。真っ白の #FFFFFF は、#FFF ということです。
では、#093 は #093093 を省略したものとお考えになる方もいらっしゃるかと思いますが、これは違いまして、#093 は #009933 を省略したものなんです。省略の仕組みは前後半分に分けて3桁で省略しているのではなく
R、G、B それぞれ2桁を1桁で省略しているからなんです。
わかりやすいように色分けしますと # 0 9 3 = # 00 99 33 ということになり、RGBそれぞれの2桁が同じ場合は1桁に省略して記述されている訳なんです。
いかがでしたでしょうか？カスタマイズする場合は、既存の記述を書き換えたり追記することなので、常に不安がつきまといます。素朴な疑問かとは思いましたが、これで少しでも不安がなくなればと思い記事にしてみました。
またちょっとした色についてのお話がありましたら記事をアップします。気長にお待ちください。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
では、#093 は #093093 を省略したものとお考えになる方もいらっしゃるかと思いますが、これは違いまして、#093 は #009933 を省略したものなんです。省略の仕組みは前後半分に分けて3桁で省略しているのではなく
R、G、B それぞれ2桁を1桁で省略しているからなんです。
わかりやすいように色分けしますと # 0 9 3 = # 00 99 33 ということになり、RGBそれぞれの2桁が同じ場合は1桁に省略して記述されている訳なんです。
いかがでしたでしょうか？カスタマイズする場合は、既存の記述を書き換えたり追記することなので、常に不安がつきまといます。素朴な疑問かとは思いましたが、これで少しでも不安がなくなればと思い記事にしてみました。
またちょっとした色についてのお話がありましたら記事をアップします。気長にお待ちください。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪
押していただけると励みになります
この記事へのコメント