HTMLカラーコードの使い方。サイトを見やすく配色する
WEBサイトを作る上で大切な配色。
選んだ色次第でユーザーが離れていくこともあれば、PV数が跳ね上がることもあります。それほど見やすさは大切なポイントです。
それほど大切な配色ですが、なかなかいい色が見つからない・色の変え方がわからないという人が多いのではないでしょうか。そこで今回はWEBサイトの色を編集する際に必須のHTMLカラーコードについて説明します。
HTMLカラーコードとは
HTMLカラーコードとは、HTMLで色を表現するための文字列である。 参考:ニコニコ第百科
その名の通りHTML用に編集された色を表現するためのコードのことです。画像編集などではRGBを多く使うように、HTML・CSSなどWEBデザインではHTMLカラーコードを使います。
数字は16進数で表されていて、基本的に#のあとに6桁の半角英数字で表します。また#000000などは#000、#abcabcは#abcのように省略することも可能です。
黒 (black)→#000000(#000)
白 (white)→#ffffff(#fff)
黄緑 (lightgreen)→#90ee90
HTMLカラーコードという名前ですが、CSSでも同じように使うことができます。
/* 使用例:大見出し(h1要素)の色を指定する */
/* 「色の値」部分にカラーコードを記述 */
h1 {color: 色の値;}
実際の記述方法
CSSの記述例
/* 塗りつぶし囲い */
.box1 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #dcdcdc;/*背景色*/
}
.box1 p {
margin: 0;
padding: 0;
}
色を変える場合は/*~*/(コメントライン)
の前の#◯◯◯◯◯◯
を変えます。
今回は#dcdcdc
(gainsboro)色に指定しています。
HTMLの記述例
<!-- 文字の色を赤色に -->
<p style="color:ff0000">
<!-- h1の色を青色に -->
<h1 style="color:0000ff">
オススメのHTMLカラーコード見本サイト
カラーコードをすべて覚えるのは正直時間の無駄です。
カラーコードを一覧形式で紹介してくれているサイトがあるので、活用すべきだと思います。今回はオススメのHTMLカラーコード見本サイトを2つ紹介します。
ブックマークなどすぐにアクセスできるようにしておくと、とても便利です。
HTMLカラーチャート
タイルをクリックするとカラーコードが表示されます。直感的に操作できるのが特徴です。次に紹介する原色大辞典と比べて、細かく色を選ぶことは難しいかもしれませんが、簡単に操作できるので初心者にはオススメです。
原色大辞典
デザインがとても良く、ひと目で探したい色が見つかるのが特徴です。
カラーコードを知りたい色があったらクリックすることで、単一色のページに移動できます。RGBの数値も分かるので、画像編集の際にも役立ちます。