1. TOP
  2. html&CSS入門
  3. 文字色を変える「color」プロパティの使い方解説

文字色を変える「color」プロパティの使い方解説

文字色はサイトの読みやすさや、第一印象に大きく関わる重要なプロパティです。

読みにくい文字色は無意識に避けられてしまい、コンテンツが読まれる確率が下がるので、しっかりと読みやすい文字色を指定しましょう。

また、文字色を上手に使えば読みやすさだけでなく、ユーザーの注目を集めたい部分、注意を促す文言、リンクなど文字色によって色々なことを直感的にユーザーに伝えることができます

例えば赤文字にすることで、「ここは重要な部分なんだな」と書き手の意図を伝えることができます。

1色で書くよりも伝えられることが増えるので、文字色はしっかりマスターしておきましょう。

文字色の変え方

簡単な例

文字色を指定するにはcolorプロパティを使います。簡単な例を見てみましょう。

<p class="demo01">これは文章です</p>
.demo01{
   	color: red;
 }

これをブラウザで表示して文字色が赤くなっていたら成功です。

構文

colorプロパティの構文は以下の通りとなります。

color: 色;

色は「色の名前」や「カラーコード」で指定します。

colorプロパティは継承される

colorの値は継承されます。継承とは受け継がれるということで、親要素に指定された文字色は子要素にも適用されます

子要素で色を変えたい場合は、子要素にも色を指定しましょう。

基本的には、bodyでサイト全体のデフォルトの文字色を指定しておいて、色を変えたい部分にだけ、colorプロパティを指定するといった使い方をします。

ページ内で色を何も指定していなければ、デフォルトで黒(#000000)になります。

注意点

文字色を変える場合には合わせて背景色も指定するようにしましょう。

背景色を指定していないと、ユーザーのブラウザの設定によって背景色が変わって、文字が見づらいということもありえます。

背景色の設定はbackground-colorを使います。

こちらも継承されので、bodyにbackground-color:#fff;などと指定しておきましょう。

色の指定方法

具体的な色の指定方法は以下の通りです。

色の名前で指定

今までの例で見たきたように、代表的な色には名前(カラーネーム)がつけられており、その名前で指定することが出来ます。

色の名前は、100色以上用意されていて、全てを紹介しきれませんが、代表的な色は下記のようなものがあります。

  • red
  • black
  • yellow

他の例を知りたい場合は、https://www.colordic.org/(https://www.colordic.org/))

などを参考にしてみてください

16進数のカラーコードで指定

色は「red」などの色の名前だけでなく、カラーコードと呼ばれる数値で指定することも出来ます。

カラーコードはデザインする人ならphotoshopで見ることが出来るので馴染みがあると思いますが、「color: #ff0000;」のような6桁の数値です。

デザインソフトがない方は、googleで「#ff0000;」などのカラーコードを検索すると、カラーコードをがどのようなものか見ることが出来ます。

16進数は馴染みがないかと思いますが、一桁が0から始まり、16まであるという特殊な数え方です。9の次に数字がないのでアルファベットを数字と見立てて使います。

例)1,2,3,~~7,8,9.a.b.c.d.e.f

色はレッド、グリーン、ブルーの組み合わせで表す

コンピュータのモニターは、光の三原色で色を表現していています。RGBとも呼ばれますが、レッド(R)、グリーン(G)、ブルー(B)の3色ですべての色を表します

最初の「#」は16進数で指定していることを表し、6桁の数値は、2桁ごとにレッド、グリーン、ブルーの色のコードを表していて、00が最も濃くffが最も薄い色になります。

この例の場合はレッドがff, グリーンの00、ブルーも00を表していて、赤になります。

ちなみに、カラーコードは各色のコードが繰り返している場合は略して3桁で表すこともできます。

#ff00 = #f00

10進数で色と透明度を指定

先ほどは16進数でしたが、10進数で指定することも出来ます。

10進数というのは普段使っている、1~9のあと10となる数値です。

rgb(255,0,0)という風に、レッド、グリーン、ブルーそれぞれに0~255の数値を指定します。

.demo01{
  color:rgb(255,0,0);
 }

透明度を指定もできる

「rgb」の応用辺ですが、「rgba」とすると透明度を指定することもできます。「a」は「alpha(アルファ)」の頭文字です。

.demo01{
    color:rgba(255,0,0,0.8);
 }

透明度は「1」で全て見え、「0」で完全な透明、「0.5」で半分くらいの透明度になります。

その他の指定方法

他にも、HSLという方法で指定することも出来ますが、ほとんど使うことはなく、覚えるのが大変になので省略させていただきます。

基本的によく使うのは、カラーコードを16進数で指定するパターンです。稀に、透明度を指定したいときなどに、rgbaを使って指定することもあります。色の名前を使った指定の仕方は、代表的な色しか選べないのであまり使いません。

色を変えてみよう

全ての文字色を変えたい場合

文字色は継承されるので、body要素に文字色を設定すれば全体に反映されます。

body{
   color: #555555;
 }

文章の一部分の色を変えたい場合

文章の中の一部分だけ文字色を変えたい場合は、文章の中で、spanや strongなどを使います。

<p class="demo02">これは<strong>文章</strong>です</p>
strong{
   color: #f00;
 }

Spanやstrongタグはインライン要素なので、文章内でも使うことが出来ます。

Strongタグはテキストを強調するために使うタグです。特に強調の意図がない場合は、汎用的なspanタグを使うと良いでしょう。

リンクの色を変えたい場合

リンクの色は、ブラウザによって少しずつ違いますが、デフォルトで青っぽい色が設定されています。

これらを統一したい場合や、別の色を設定したい場合は色を設定する必要があります。

下記のように設定しましょう。

a {  
    color:#1111cc;
 }
//ホバー時
a:hover {
    color:#11cccc;
}

//訪問済みのリンク
a:visited {
    color:#1111cc;
 }

また、リンクのホバー時の色(リンクにカーソルが乗ったときの色)や訪問済みのリンクの色も変更出来ます。

リンクの色はできるだけ青系統の色にすることをおすすめします。Googleやyahooをはじめ、多くのサイトでリンクは青で設定されています。サイトを見る人は「リンク = 青」となっているので、特に理由がなければ青にしておいたほうが意図が伝わりやすいです。

まとめ

  • 文字色はサイトの読みやすさや、第一印象に大きく関わる
  • 1色で書くよりも色を使ったほうが情報を伝えられる
  • 文字色を指定するにはcolorプロパティを使う
  • 色は「色の名前」や「カラーコード」で指定する
  • colorプロパティは継承される
  • 背景色も指定する
  • 基本的に16進数でカラーコードを指定する