CSSスキル - 第5章 Lesson1

背景の色を変更する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

背景の色を設定するための、background-colorプロパティについて、初心者向けに解説しています。



この動画で学べること

・背景の色を設定する方法



背景色の設定をする方法

背景の色を設定するための、background-colorプロパティについて学んでいきましょう。
背景を指定する書き方は、「background-color: #カラーコード;」です。
実際に、<header>タグに水色の背景を指定してみたいと思います。



header {
background-color: #CCEEF2;
}



一度、保存してブラウザで見てみましょう。
背景が指定した色に変更されました。
次に、不透明度を下げた状態で背景の色を設定する方法も見てみましょう。
まず、先ほど書いたbackground-colorの部分は必要ないので、コメントアウトの状態にしておきます。



ではrgba()で背景の色を指定する方法を見ていきましょう。
プロパティはbackgroundで、値にrgba()と書きます。さらにその()の中に、色を指定する数字を書いていきます。
「rgba」のrgbは、RGBカラーのことを指していて、()の中の数字が順番にレッド、グリーン、ブルーの値となっています。
そして、「rgba」の最後のaは不透明度を指定します。


header {
/*background-color: #CCEEF2;*/
background: rgba(0,144,255,0.55);
}



保存してブラウザで見てみましょう。
背景の色と同時に、不透明度も調整することができました。