この記事ではHTMLやCSSで色を決めるときに使われるカラーコードについて解説します！HTMLやCSSでは色を決めるために、色を指定するカラーコードと呼ばれるコードを使って色を決めます。
またカラーコードの他にも色を指定する方法があります。この記事では、
- カラーコードとは
- 色を指定する2つの方法（カラーコード、カラーネーム）
について解説していきます。HTMLやCSSで使われるカラーコードを、今までなんとなく使ってきた方はぜひご覧ください！
カラーコードとは
カラーコードは、HTMLで色を決めるときに使われる色を表したコードです。こちらをご覧ください。
#000000 <!-- ブラック --> #ff0000 <!-- レッド --> #00ff00 <!-- ライム（グリーン） --> #0000ff <!-- ブルー --> #ffffff <!-- ホワイト -->
（参考：ウェブカラーリファレンス、http://www.htmq.com/color/websafe216.shtml）
このコードの、シャープから6桁、16進数で表された数字がカラーコードになります。16進数は「0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F」で表されます。
その16進数で表される桁が6桁あるのですが、それぞれの桁で色の役割が変わります。RGBという言葉を聞いたことがありますか？
RGBはRed、Green、Blueの頭文字で、それぞれ色の三原色が割り当てられています。この色の三原色が、それぞれ2桁ずつ割り当てられています。それを踏まえて先程のカラーコードを見てみましょう。
0〜fになるにつれて、色が明るくなっていくことがブラックとホワイトからわかりますね。
また、レッド、ライム（グリーン）、ブルーの色を見てみると、それぞれ割り当てられた2桁がfに、つまり一番明るくなっていることがわかります。カラーコードの仕組みは分かって頂けたでしょうか？
具体的な使い方
それでは具体的な使い方を見ていきましょう。と言っても、先程の色の指定を、色を変えるために適切な部分に書くだけになります。まずはHTML上で、直接文字の色を変える方法について見ていきましょう。こちらをご覧ください。
<html>
<div class="text">
<font color="blue">Hello.</font>
<font color="#0000FF">Goodbye.</font>
</div>
</html>
実行結果
ここではfontタグで色を変えたいテキストを囲って、color属性で色を変えています。色が英単語とカラーコードの2つで指定されていますが、これについては後ほど解説します！
では次に、spanタグやdivタグを使った色の変更方法について、HTMLとCSSで見てみましょう。こちらのコードをご覧ください。
HTML
<html>
<div style="color:greenyellow">Hello.</div>
<span style="color:#00FF00">Goodbye.</span>
</html>
実行結果
HTML+CSS
<style>
.text, div {
color: red;
}
.text, span {
color: #FF0000;
}
</style>
<html>
<div class="text">Hello.</div>
<span class="text">Goodbye.</span>
</html>
実行結果
ここではdivタグとspanタグについて、HTMLのみの場合とHTMLとCSSを使った場合に分けて実行しています。基本的には先程の色の指定方法と同じですね。ただ、fontタグと違ってdivタグやspanタグではstyle属性を使って色を指定することに気をつけましょう。
また、CSSを使って様々な色を変えるための詳しい解説は、こちらの記事で解説されているのでぜひご覧ください。
省略や名前で色を指定する方法
カラーコードの基本について分かったところで、色を指定する2つの方法について見ていきましょう。
カラーコード
先程のカラーコードは2桁ずつRGBが割り当てられた「#16進数6桁」の形でした。このカラーコードは省略することもできます。こちらをご覧ください。
#000 <!-- ブラック --> #f00 <!-- レッド --> #fff <!-- ホワイト -->
6桁の16進数は「RRGGBB」として割り当てられていました。これを今回は、「RGB」として短縮しました。レッドの「#f00」を6桁に直すには、それぞれの桁の繰り返しを2回にするだけ（「#ff0000」）です。
このように同じ色が割り当てられた2桁が同じ数字の繰り返しであった場合は3桁に省略することができます。
また、このあとにカラーネームという英単語を使った指定についても解説しますが、カラーコード以外で指定をした場合は、ブラウザによって微妙に色が変わる可能性もあります。なので基本的にはカラーコードを使っていきましょう。
カラーネーム
先程のカラーコードは16進数の6桁や3桁で色を指定していました。今回のカラーネームは、数字ではなく英単語で指定をする方法です。こちらをご覧ください。
white green black
ただの英単語だと思われるかもしれませんが、これをカラーコードと同じように指定するだけで色が適用されます。カラーネームを使うと開発をするときも見やすく、カラーコードよりも分かりやすいので扱いが楽になります。
ただし、カラーネームに対応していないHTMLのバージョンやブラウザもあり、未だにそれが使われていないとは限りません。なのでWeb開発ではカラーコードを使って色を指定するほうが主流です。
まとめ
この記事では、HTMLで色を指定するいくつかの方法について解説してきました。基本的には16進数6桁のカラーコードで指定するのが良い方法です。
ただし、開発する環境でCSSを必ず使うなどのルールが決まっている場面では、それぞれに応じて最適なものを使っていきましょう。もしカラーコードについて忘れてしまった場合は、ぜひまたこの記事をご覧ください！
