ログイン
問題1

【color】文字の色を変えてみよう

初めに学習するCSSは、テキストの文字の色を変更する「color」プロパティです。 colorの値に色を指定することで文字色を変更することができ、 色の指定方法は主に、キーワード指定、カラーコード指定が使われています。 それでは実践問題を通して学習していきましょう!

アイコン画像

本のアイコン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¥
            

コメントのアイコン解説

classをセレクタとして指定するには、ドット(.)に続けてクラス名を指定します。
今回はRGBを使ってカラー指定を行ないました。
細かく色を指定する場合はカラーコード(#ffa500など)で指定しましょう!
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!