CSSで背景色を指定する方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSで背景色を指定する方法を現役エンジニアが解説しています。背景色を変えるにはbackground-colorプロパティを使用します。ページ全体あるいは一部の要素の背景色を変えることが出来ます。色の指定には16進数カラーコードか色の名前を指定します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで背景色を指定する方法について解説します。
目次
今回は、CSSに関する内容だね！
どういう内容でしょうか？
CSSで背景色を指定する方法について詳しく説明していくね！
お願いします！
背景色を変えるCSSの記述は、 background-color:
背景色はbackground-colorプロパティで変更できます。
background-color: red;
色指定の方法[1] 色の名前で指定する
redやblueのように、英語の色の名前を直接記入できます。
使用できる色名は、MDNドキュメントで参照することができます。
最もシンプルに記述ができますが、実務においてはこれらの色名で表現できない微妙な色合いを使用することが多いため、この色名での指定はサンプル作成時などに留めておくとよいでしょう。
色指定の方法[2] 16進数カラーコードで指定する
16進数カラーコードとは、以下のように#(シャープ)と、6つの数字またはローマ字で表されるコードです。
数字は0から9まで、ローマ字はAからFまでを使用し、00が最も色の強さが弱く、FFが最も強いという仕組みになっています。
この原理を利用すると、#000000は、赤・緑・青すべての色が最も弱い状態＝黒を表現することができます。
逆に、#FFFFFFとすればすべての色が最も強い状態＝白、とすることができますね。
ただし、実務においてこれらの原理を意識する必要はあまりなく、指定された色を表現できるカラーコードを検索したり、デザインのデータから色コードを取得し、そのまま使用すれば問題ありません。
この色指定を実際のCSSで行うと、以下のようになります。
body {
background-color: #FF0000; //これは赤色
}
色指定の方法[3] RGBAカラーモデルを利用する
RGBAとは、Red, Green, Blue, Alfa の頭文字を取ったもので、以下のように表現されます。
16進数カラーコードとの大きな違いは、「透明度」を表現できるという点です。
このカラーモデルでは、赤・緑・青、それぞれの色の強さは0〜255の数字で表されます。
0に近いほど色が弱く、255に近いほど強くなります。
ここで注意が必要なのは、透明度だけは0から1の数字で表されるという点です。
例えば半分の透明度にしたい場合、0.5とシンプルに計算できるようになっています。
この色指定を実際のCSSで行うと、以下のようになります。
body {
background-color: rgba(0, 255, 0, 0.5); //半透明の緑色になる
}
ページ全体の背景色を変えるには
body要素にbackground-colorプロパティを設定することで、ページ全体の背景色を変えることができます。
body {
background-color: red;
}
特定の場所の背景色を変えるには
背景色を変えたい要素にbackground-colorプロパティを設定することで、特定部分のみ背景色を変えることができます。
.colored {
background-color: red;
}
実際に書いてみよう
まずは、ページ全体を薄い水色にしてみましょう。
HTML
<body>
<h1>背景色のサンプル</h1>
<div class="first"></div>
<div class="second"></div>
</body>
//CSS
body {
background-color: #e0ffff;
}
実行結果は、以下のようになります。
次に、HTMLの特定の部分のみに背景色を適用します。
/*CSSに以下を追記*/
body > div {
/*背景色を見せるために、幅と高さを指定*/
width: 150px;
height: 50px;
}
.first {
/*firstというクラスの要素の背景を青色にする*/
background-color: blue;
}
指定した範囲が青色になりましたね！
では、最後に透明度のある背景色を表現してみましょう。
/*CSSに以下を追記*/
.second {
/*secondというクラスの要素の背景を赤色にする*/
background-color: rgba(255, 0, 0, 0.3);
/*要素を重ねる*/
position: relative;
top: -25px;
left: 50px;
}
今回は透明度0.3の赤色を背景色に指定しました。
執筆してくれたメンター
| 高田悠（たかだゆう）
JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。 |
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
