皆さん、ズボン履いてますか？
履いていない人でもパンツはさすがに履いてると思います。
では、ズボンを履いてる人はズボンの色、ズボンを履いてない人はパンツの色を見てください。
…見ましたか？
その色、自由に変えられたら面白いと思いませんか。
…というわけで、別にズボンの色やパンツの色なんぞどうでもいいのですが、ホームページやブログを運営していると、そんな風にウェブ上のデザインの色をいじくりたくなることが多々ありますよね。ですが、htmlで色を指定するときは「カラーコード」という暗号みたいなもので色を指定しなくてはならないのでちょっと面倒です。
例えば「color: #cc3535;」とか、「background-color: #442ea6;」といった風に、「#」以降の部分で、色を指定するのです。こんなの全部覚えてなんていられません。
ここでは、そんな時に色選びの助けになってくれる、魚屋にとっての魚のような救世主的サイトをご紹介します。
ウェブデザインに大層便利な「HTMLカラーコード」
http://html-color-codes.info/japanese/
さて、そんな素晴らしいサイトがこちらの「HTMLカラーコード」という、そのまんまなサイトです。記事タイトルは煽りすぎでしょうか？ でも個人的には超便利なのです。
そして、こちらのサイトでは二つの方法でhtmlのカラーコードを取得することが可能です。
①クリックだけで基本的な色のコードがわかる「HTMLカラーチャート」
一つ目がこれ。「HTMLカラーチャート」です。
これは、よく使われるような基本的な色が上記のようにチャート上に表示されているので、それをクリックすると、クリックした色のコードがわかる仕組みです。まあ、説明なくてもわかるくらいシンプルなシステムですが、説明してみます。
「HTMLカラーチャート」の使い方
まず、カラーチャートから色を好きな選びます。
ここでは試しに、「誰しもがエコを連想する緑色」を適当に選んでみます。
上記の通り、世の中で最もエコっぽい色（赤丸で囲んだ色）を選んでクリックしてみます。
すると…
ポンッ
カラーチャートの上に、たった今クリックした「最強にエコな緑色」のアイコン的なものが出てきます。
このアイコンの下部に書いてある謎の数字とアルファベットが、この色のカラーコードということになります。今回の場合は「40FF00」です。
色をたくさんクリックすると、何個もこのカラーアイコン的なものが出現します。
こんな感じです。
ピン機能
更に、このカラーアイコン的なものの右上にあるピンマーク的なものをクリックすると、なんと次にこのウェブページを開いたときにもその色を記憶してくれます。
お気に入りの色があったら、このピン機能を使って、うっかりページを閉じてしまっても平気なようにしておくと便利でしょう。
↑念のためですが、ピンマークというのはこの画鋲的なもののこと。
②自由自在に好きな色のコードを調べられる「HTMLカラーピッカー」
二つ目はこれ、「HTMLカラーピッカー」です。
こちらは、色々な方法でカラーコードを自由に調べることができます。個人的にはこちらを使うことが多いです。右下に現在の色のカラーコードが表示されます。
色相バーから感覚的に調べる
例えば「オレンジ系の色」のカラーコードを知りたいときは、上図の右側にあるバーを動かしてだいたいオレンジらへんにします。
そして、その後は上図のようなオレンジのグラデーションから、好きな位置を色々クリックしていけばOKです。
上図のちっちゃい丸の位置のカラーコードが表示されます。
数値を直接入力して調べる
もっと厳密に色を決定・調整したいというときはにはこの方法が便利です。
「HTMLカラーピッカー」では、上記の欄に「RGB」か「HSV」の値を直接入力してカラーコードを調べることができます。
ちなみに、上図の数値だとこんな色になります。
使い方の解説動画
この説明でもわからなかった方は、なんとサイト上に使い方の説明動画があるので、それを見るときっとわかることと思います。
ただ、ビデオ内容は英語バージョンしかないようです。ちなみに私はこの動画はまともに見たことはありません…。
その他
ほか、「HMTLカラーコードの使い方」に関しての説明も下記のように簡単に載っています。
更には、「HMTLカラーコードの決まり」の解説まであるという至れり尽くせりっぷり。
これは楽しんじゃいますね。
まとめ
このように、なかなかに使い勝手が良いため、私自身もしょっちゅう使っているサイトです。ペラサイトなのでサイト自体の作りもシンプルでわかりやすいので、その点からもお勧めできます。
ブログのデザインで「色」というのはかなり重要なので、皆さんも気を遣ってみてください。
本当はウェブ上で推奨されている色（どんな環境見てもだいたい同じに見える…とされている色）というのは「セーフカラー」と呼ばれる216色しかないのですが、個人的には今の時代ではあまり関係ないと思っているので、気にしなくても良いと思います。
8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。 可能ならばページの背景色や文字色には、WEBセーフカラーを使用してください。
WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で作者の意図通りの色で表示させることができるからです。
ウェブデザインも奥が深いので、興味がある方はもっと詳しくやってみても面白いと思います。
それではまた！