CSS
LINEでログイン
Googleでログイン
Twitterでログイン
colorプロパティとは
colorプロパティとは、要素のテキストの文字色を変えることのできるCSSのプロパティです。
要素の色を設定するプロパティは他にもbackground-color（背景色）、 border-color（境界色）、 outline-color（輪郭色） などが用意されており、今回使用するcolorプロパティは「文字色」を設定します。
変更したい箇所に合わせてプロパティを使い分けられるようにしておきましょう。
colorの使い方
colorプロパティを使った色の指定方法には、"blue"や"red"といったキーワードで指定する方法や、
"#" の後に R（赤）G（緑）B（青）の光の3原色をそれぞれ2桁の16進数で表した数値を並べた #rrggbb 形式で指定する方法、
Hue（色相）、Saturation（彩度）、Lightness（輝度）をそれぞれ0～360の数値で指定して色を決める方法があります。
一般的によく使われているのが16進数のRGB形式で指定する方法になります。
RGB形式は、赤緑青の3原色を0～255の数値で調整できることから、細かい色の設定を行なえます。
また、色を白にしたい場合はrgb(225,225,225)で設定し、黒の場合はrgb(0,0,0)とすることで表現できます。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題1：【color】文字の色を変えてみよう
'ninjacode'という文字列を赤色に
'プログラミング学習'という文字列を青色に
変更してみましょう。
'プログラミング学習'という文字列を青色に
変更してみましょう。
あらかじめエディタに書くコード
<p class="text">ninjacode<span>プログラミング学習</span></p>
¥HTML¥
期待する画面
解答ソースコード
.text {
color: red;
}
.text span {
color: blue;
}
¥CSS¥
完了にする！
活動記録をTweetする
今回はRGBを使ってカラー指定を行ないました。
細かく色を指定する場合はカラーコード(#ffa500など)で指定しましょう!