ywork2020.com

Title

要素の文字の色を変更する

目次 (INDEX)

colorプロパティの概要

color は次の単語から命名されたプロパティです。
color
読み: カラー
意味: 色

このプロパティは要素の文字色、つまりテキストカラーを設定するためのプロパティです。

これに類似したプロパティに背景色を設定するためのbackground-colorがあります。

余談になりますが、font-colorとかtext-colorとか間違えてしまうことがありますが、テキストの色は単純にcolorプロパティだと覚えてください。

目次に戻る

実機サンプルのとサンプルコード

テキストの色を設定するためには要素の中にテキストが入っている必要があります。 つまり、開始タグと終了タグの間にテキスト入っている必要があります。 ここからのサンプルでは段落要素であるp要素を使って説明していきます。

構文

セレクター{color: 設定値;}
※color : 設定値; の「:」コロンの文字は「=」イコールという意味があります。

初期値: ブラウザによって異なる

colorプロパティの初期値はブラウザによって異なります。 ですが、初期値に戻すということであれば、initialキーワードを使う方法があります。 ただし、IEなど、一部のブラウザではinitialキーワードに対応していないこともあります。

initial
読み: イニシャル
意味: 初期、最初

それではサンプルを見ていきましょう。

<p>サンプルテキスト</p>

p{color: initial;}

目次に戻る

W3C基本色で文字色を指定する

W3C とはWorld Wide Web Consortiumの略称です。 Web技術の標準化を行う非営利団体の名称です。ここではW3Cで標準化されているカラーの名称でテキストの色を赤色にしてみます。

<p>サンプルテキスト</p>

p{color: red;}
色の名称については、色見本 (カラーサンプル) を参考にして下さい。

目次に戻る

16進数で文字色を指定する

16進数 とは私たちが普段、数学などで使っているアラビア数字の0~9にA~Fを付け加えた数字です。 アラビア数字は0から数えて9の次の10で位が上がりますが、16進数では9の次からABCDEFと数えていき、最後のFが16番目の 数字となります。つまりFはアラビア数字でいうところの15を表すことになります。

16進数で色を表す場合はカラーコードの先頭に「#」を付けます。

色の指定方法は #XXYYZZ を例とすると XXの部分が赤色の明るさ, YYの部分が緑色の明るさ, ZZの部分が青色の明るさ の形式で 0~F の数字をあてはめて指定します。 なお、指定した数字が大きいほど、明るくなります。

それでは16進数を使ってテキストの色を青色にしてみます。

<p>サンプルテキスト</p>

p{color: #0000FF;}
16進数についての補足

16進数で色を指定する場合には2種類の書き方があります。#000と#000000はどちらも16進数のカラーコードです。 #000は16進数のカラーコードの短縮系となり、指定できる色の幅が少し大雑把になります。

カラーコードに大文字と小文字の区別はありませんので、例えば#FFFと書いても#fffと書いても同じ意味になります。

色ついては、色見本 (カラーサンプル) を参考にして下さい。

目次に戻る

RGBコードで文字色を指定する

RGB とはRed,Green,Blueの頭文字をとったもので赤と緑と青の色の混合比を使って色を指定します。 この考え方は16進数で色を指定する場合と同じです。

rgb( , , ) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示されます。

それではRGBを使ってテキストの色を緑系色にしてみます。

<p>サンプルテキスト</p>

p{color: rgb(0,200,0);}

目次に戻る

RGBAコードで文字色を指定する

RGBA とはRed,Green,Blue,Alphaの頭文字をとったもので前項で挙げたRGBに透過度であるAlpha値を指定することができます。

rgba( , , , 透過率) の形式で色の部分に0~255の数値を当てはめます。大きい数値ほど、その系統色が明るく表示され、 かつ、透過度を設定することで指定した色に透明度を設定します。

それでは検証として、p要素を使ってRGBAでテキストの色を赤色にして、かつ透明度を70%にしてみます。

<p>サンプルテキスト</p> 無透過

<p>サンプルテキスト</p> 70%透過

p{background-color: rgba(255,0,0,0.3));}
透過率の補足

透過率は0を指定すると100%透過している状態で、1を指定すると0%の透過率を表します。つまり0~1の間の小数点付の実数値で指定するわけですが、 言葉の表現としては「べた塗り率」と言った方が理解しやすいかもしれません。

目次に戻る

プロパティについての補足

  • すべての要素に適用可能
  • 親要素の値を継承する

目次に戻る