colorプロパティ

TOPページに戻る > CSS

スポンサード リンク

colorプロパティ

文字の色を指定
色の値を使って文字色を変更できます
colorプロパティの値に色を指定する16進数やキーワードを入れます

使い方(書式)

セレクタ { color: 色の値; }                                    

colorプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 する

プロパティの値 説明
16進数 #FF9900 #と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します
16進数(3桁) #FF9900を省略して#F90と指定することもできます
10進数 rgb 赤、緑、青の三原色を0から255までの10進数で指定
rgb(255, 128, 0) この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定
10進数 rgb % 三原色のパーセントで指定
rgb(100%, 50%, 0%) この場合は100%が赤の色の指定、50%が緑の色の指定、0%が青色の指定
色のキーワード red、green、blue、pinkなど色をキーワードで指定

実際の指定方法

16進数

#と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します。
16進とは0から9までの数とAからFまでの16の数のこと(解りやすくいえばAが10でFが15、0もあるので15+1=16個の数)
.hoge { color: #FF9900; }

16進数(3桁)

#FF9900を省略して#F90と指定することもできます。
.hoge2 { color: #F90; }

10進数

赤、緑、青の三原色を0から255までの10進数で指定します。
rgbとはred、green、blueの頭文字をとって付けたもの。三原色といって、この組み合わせでいろんな色を表現できる。
この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定
.hoge3 { color: rgb(255, 128, 0); }

パーセンテージ

赤、緑、青の三原色を0%から100%で指定することもできます。
.hoge4 { color: rgb(100%, 50%, 0%); }

色のキーワード

red、green、blue、pinkなど色をキーワードで指定します。
.hoge5 { color: red; }

html部分

<p class="hoge">color: #FF9900;</p>
<p class="hoge2">color: #F90;</p>
<p class="hoge3">color: rgb(255, 128, 0);</p>
<p class="hoge4">color: rgb(100%, 50%, 0%);</p>
<p class="hoge5">color: red;</p>

実際の表示

color: #FF9900;

color: #F90;

color: rgb(255, 128, 0);

color: rgb(100%, 50%, 0%);

color: red;





(C)2012 ホームページ作成無料