スポンサード リンク
colorプロパティ
文字の色を指定使い方(書式)
セレクタ { color: 色の値; }
colorプロパティ
対応ブラウザ | |
適用できる要素 | 全ての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桁ずつ並べて色を指定します。.hoge { color: #FF9900; }
16進数(3桁)
#FF9900を省略して#F90と指定することもできます。.hoge2 { color: #F90; }
10進数
赤、緑、青の三原色を0から255までの10進数で指定します。.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;