📚

HTMLカラーコードの使い方。サイトを見やすく配色する

WEBサイトを作る上で大切な配色。

選んだ色次第でユーザーが離れていくこともあれば、PV数が跳ね上がることもあります。それほど見やすさは大切なポイントです。


それほど大切な配色ですが、なかなかいい色が見つからない・色の変え方がわからないという人が多いのではないでしょうか。そこで今回はWEBサイトの色を編集する際に必須のHTMLカラーコードについて説明します。

HTMLカラーコードとは

Memo

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カラーチャート

image1


タイルをクリックするとカラーコードが表示されます。直感的に操作できるのが特徴です。次に紹介する原色大辞典と比べて、細かく色を選ぶことは難しいかもしれませんが、簡単に操作できるので初心者にはオススメです。

原色大辞典

image2


デザインがとても良く、ひと目で探したい色が見つかるのが特徴です。

カラーコードを知りたい色があったらクリックすることで、単一色のページに移動できます。RGBの数値も分かるので、画像編集の際にも役立ちます。

image3










WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation