お役立ちサイト カスタマイズ ブログ

ブログの配色デザインに悩んだら「HTMLカラーコード」を使え!

2016/01/02

pastels-212323_1280

皆さん、ズボン履いてますか?

履いていない人でもパンツはさすがに履いてると思います。

では、ズボンを履いてる人はズボンの色、ズボンを履いてない人はパンツの色を見てください。

 

…見ましたか?

その色、自由に変えられたら面白いと思いませんか。

 

…というわけで、別にズボンの色やパンツの色なんぞどうでもいいのですが、ホームページやブログを運営していると、そんな風にウェブ上のデザインの色をいじくりたくなることが多々ありますよね。ですが、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セーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で作者の意図通りの色で表示させることができるからです。

http://www.htmq.com/color/websafe216.shtml

ウェブデザインも奥が深いので、興味がある方はもっと詳しくやってみても面白いと思います。

それではまた!

 


スポンサーリンク
スポンサーリンク

この記事がよかったら
いいね!しよう

新着記事を呆然と配信中

呆然としたい人はTwitterで回転オトエフミを…

↓ついでに回転オトエフミ制作の…

紅葉葉 秀秀逸プロフィール

 ●紅葉葉 秀秀逸
 ブログ管理人。90分の自主映画を作り、音楽も全編作曲する程の創作好きです。
 趣味:筆記体を投げ倒す、座右の銘:「ラー油の上」、年齢:鳥


        

真面目なプロフィール・お問い合わせ

-お役立ちサイト, カスタマイズ, ブログ
-,


関連記事


おすすめ記事

1
【マリオ雑学】スーパーマリオUSAはなぜUSA?→夢工場ドキドキパニックが元だった

知らない人はいない赤帽子、それはマリオ。緑帽子ならゼルダですね。 そんなマリオは ...

2
ドラクエ5パパスの「ぬわーーっっ!!」がリメイク版でしれっと激しくなってた件を徹底考察

「ぬわー」 これを聞けば全日本人の70%は一瞬でなんのことかわかるだろう。 &n ...

3
自主制作映画の作り方!役立つ記事総まとめ【素材サイト・編集ソフト・撮影秘話etc…】

上の画像は、”本で空を飛ぶヒーロー”の写真です。なんだそりゃ、と思うでしょう。は ...