Perl Web開発者のHTML・CSS入門

色の指定方法を理解しよう

HTMLにおける色の指定方法を解説します。

色名

色名をいくつか挙げてみます。

color:red;
color:blue;
color:green;
color:white;
color:black;

色名の指定は簡単なのですが、Webデザインにおいては、原則として、使わないと考えておいてください。

基本はRGBのカラーコードを使うのが推奨です。

whiteは、比較的使う場面があるかなという感じです。

黒色は、濃さを調整するのに微調整をすることが多いので、カラーコードを使うのが推奨です。

カラーコード

カラーコードについて簡単に解説します。

白は#ffffff

赤と緑と青の強さが、すべて最大になると「白」になります。

<div style="background:green;color:#ffffff">
  白色
</div>

簡単に「#fff」でもOKです。

黒は#000000

赤と緑と青の強さが、すべて最小になると「黒」になります。

<div style="color:#000000">
  黒色
</div>

簡単に「#000」でもOKです。

原色の赤は#ff0000

赤の強さ最大、それ以外が最小になると「原色の赤」になります。

<div style="color:#ff0000">
  原色の赤
</div>

簡単に「#f00」でもOKです。

原色の緑は#ff0000

緑の強さ最大、それ以外が最小になると「原色の緑」になります。

<div style="color:#00ff00">
  原色の緑
</div>

簡単に「#0f0」でもOKです。

原色の青は#0000ff

青の強さ最大、それ以外が最小になると「原色の青」になります。

<div style="color:#0000ff">
  原色の青
</div>

簡単に「#00f」でもOKです。

色は赤緑青の強さの組み合わせで表現される

色は赤緑青の強さの組み合わせで表現されます。まず、これが基本なので、覚えておきましょう。

カラーコードを取得するには?

カラーコードをgoogle色見本を使うのが、一番簡単です。

google色見本

どのような色が、どんなカラーコードになるか、みてみましょう。

赤、緑、青の強さが、どうなっているか、みてみましょう。