CSSで背景色を指定する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで背景色を指定する方法を現役エンジニアが解説しています。背景色を変えるにはbackground-colorプロパティを使用します。ページ全体あるいは一部の要素の背景色を変えることが出来ます。色の指定には16進数カラーコードか色の名前を指定します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで背景色を指定する方法について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSで背景色を指定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

背景色を変えるCSSの記述は、 background-color:

背景色はbackground-colorプロパティで変更できます。

 

background-color: red;

 

色の指定はredやblueなどのカラーネームで指定する方法、#123456のように16進数のカラーコードで指定する方法があります。

カラーネーム指定:指定できるキーワードは[<color> \- CSS: カスケーディングスタイルシート \| MDN]mozilla.org-css-color-keywordsでチェックしてみてください。

カラーコード指定:赤色、緑色、青色の順で2文字ずつ区切り、16進数で指定します。色の強弱は00が最小、FFが最大、00に近づくほど薄い色、FFに近づくほど濃い色になります。

 
16進数カラーコードの赤色・緑色・青色

 
16進数カラーコードの具体的な指定方法

 

ページ全体の背景色を変えるには

body要素にbackground-colorプロパティを設定することで、ページ全体の背景色を変えることができます。
 

body {
  background-color: red;
}

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

特定の場所の背景色を変えるには

背景色を変えたい要素にbackground-colorプロパティを設定することで、特定部分のみ背景色を変えることができます。
 

.colored {
  background-color: red;
}

 

実際に書いてみよう

ページ全体の背景色を変えるには

HTML

<div class="first">1st</div>
<div class="second">2nd</div>
<div class="third">3rd</div>

 

CSS

body {
  background-color: yellow;
}

 

特定の場所の背景色を変えるには

CSS

.second {
  background-color: yellow;
}

 

 

この記事を監修してくれた方

メンター稲員さん。
フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby,Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

オンラインのプログラミングスクールTechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。