CSSで背景色指定! background-colorの使い方

こんにちは!ライターのナナミです。

WEBサイトの雰囲気を決める背景色、みなさんどんな色にしていますか?

こういう色にしたいんだけどどうすればいいのかわからない…

なんて人もいるかもしれませんね。ということで今回は背景色を指定するbackground-colorについてまとめました!この記事は下記の流れで解説していきます。

  • 【基礎】background-colorとは何か
  • 【基礎】background-colorの使い方
  • 【発展】色の指定方法色々
  • 【発展】background-colorの使用例

background-colorはCSSの必須スキル。しっかり覚えて、活用できるようになりましょう!

今回はさらに、おまけ情報も付いています。おたのしみに!

background-colorとは?

background-colorは名前の通り、要素の背景色を指定するプロパティです。

bg1

ポイントは、要素の背景という点です。背景色というと、画面全体に指定するイメージがあるかと思います。しかしbackground-colorは画面全体ではなく、要素につける色を指定するものです。

bg2

イメージ的には、それぞれの要素に色をつけるという感じですね。

background-colorの使い方

background-colorは下記のように指定します。

CSS

セレクタ{
    background-color:色の指定;
}

書き方はとっても単純、プロパティの後に色を指定する記述を入れるだけです。色の指定はカラーコードやRGBなど、色々な種類があります。次の項目で細かく説明していきますね。

色の指定方法

前述の通り、色の指定方法は様々な種類があります。今回はよく使われている4種類を解説していきます。

カラーネーム

名前の通り、色の名前で指定する方法です。色の名前は英語で記述します、赤ならred、青ならblueという感じですね。

bg3

HTML

<div class="bg_test">
    背景色を指定します
    <div class="bg_test2">
        子要素にも別で指定できます
    </div>
</div>

CSS

.bg_test {
    height: 250px;                  /* 高さ指定 */
    padding:  20px;                 /* 余白指定 */
    font-size: 20px;                /* 文字サイズ指定 */
    background-color: powderblue;   /* 背景色指定 */
}

.bg_test2 {
    color:  #fff;                   /* 文字色指定 */
    height: 200px;                  /* 高さ指定 */
    width:  200px;                  /* 幅指定 */
    font-size:  14px;               /* 文字サイズ指定 */
    background-color: blue;         /* 背景色指定 */
    padding:  20px;                 /* 余白指定 */
    float:  right;                  /* 位置指定 */
    position:  relative;            /* 位置指定 */
    top: 110px;                     /* 位置指定 */
}

カラーコード

WEBで使われる色には、それぞれ英数字を組み合わせたコードが割り当てられています。これをカラーコードと言います。

  • #3〜6桁の英数字

という形式のものですね。コードの数値にも意味があるのですが、長くなっちゃうので今回は割愛します。

bg4

HTML

<div class="bg_test">
    背景色を指定します
    <div class="bg_test2">
        子要素にも別で指定できます
    </div>
</div>

CSS

.bg_test {
    height: 250px;              /* 高さ指定 */
    padding:  20px;             /* 余白指定 */
    font-size: 20px;            /* 文字サイズ指定 */
    background-color: #89e4a8;  /* 背景色指定 */
}

.bg_test2 {
    color:  #fff;               /* 文字色指定 */
    height: 200px;              /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    font-size:  14px;           /* 文字サイズ指定 */
    background-color: #009688;  /* 背景色指定 */
    padding:  20px;             /* 余白指定 */
    float:  right;              /* 位置指定 */
    position:  relative;        /* 位置指定 */
    top: 110px;                 /* 位置指定 */
}

RGB

WEBで使われる色の種類その2です。色の三原色である赤、緑、青のバランスを数値にして、色を指定しています。絵の具を混ぜているような感じですね。数値の最大値はそれぞれ255となっています。

  • rgb(赤の数値,緑の数値,青の数値)

と記述します。

bg5

HTML

<div class="bg_test">
    背景色を指定します
    <div class="bg_test2">
        子要素にも別で指定できます
    </div>
</div>

CSS

.bg_test {
    height: 250px;                          /* 高さ指定 */
    padding:  20px;                         /* 余白指定 */
    font-size: 20px;                        /* 文字サイズ指定 */
    background-color: rgb(228, 224, 137);   /* 背景色指定 */
}

.bg_test2 {
    color:  #fff;                           /* 文字色指定 */
    height: 200px;                          /* 高さ指定 */
    width:  200px;                          /* 幅指定 */
    font-size:  14px;                       /* 文字サイズ指定 */
    background-color: rgb(255, 152, 0);     /* 背景色指定 */
    padding:  20px;                         /* 余白指定 */
    float:  right;                          /* 位置指定 */
    position:  relative;                    /* 位置指定 */
    top: 110px;                             /* 位置指定 */
}

RGBA

RGBの発展型、透過度も含めて指定できるものです。Aの部分はアルファ(Alpha)の頭文字で、透過度の指定部分になります。1で不透明度100%、つまり透過していない状態になります。

透過したい場合はアルファの値を1以下にする必要があるということですね。書き方はRGBとあまり変わりません。

  • rgba(赤の数値,緑の数値,青の数値,アルファの数値)

三原色の最大値は255、アルファの最大値は1だということだけ注意しておきましょう。

bg6

HTML

<div class="bg_test">
    背景色を指定します
    <div class="bg_test2">
        子要素にも別で指定できます
    </div>
</div>

CSS

.bg_test {
    height: 250px;                              /* 高さ指定 */
    padding:  20px;                             /* 余白指定 */
    font-size: 20px;                            /* 文字サイズ指定 */
    background-color: rgba(63, 81, 181, 0.7);   /* 背景色指定 */
}

.bg_test2 {
    color:  #fff;                               /* 文字色指定 */
    height: 200px;                              /* 高さ指定 */
    width:  200px;                              /* 幅指定 */
    font-size:  14px;                           /* 文字サイズ指定 */
    background-color: rgba(86, 86, 86, 0.6);    /* 背景色指定 */
    padding:  20px;                             /* 余白指定 */
    float:  right;                              /* 位置指定 */
    position:  relative;                        /* 位置指定 */
    top: 110px;                                 /* 位置指定 */
}

無色透明を指定する

ここまでは色を指定する方法でしたが、

無色透明を指定したい…

という時もありますよね。無色透明を指定する方法は、カラーネームを使う方法とRGBAを使う方法の2つがあります。

カラーネームで無色透明

カラーネームで指定する場合は、transparentと指定します。transparentは「透明な、透き通る」という意味を持った単語です。うん、そのままですね。

bg_transparent1

HTML

<div class="bg_test">
    背景色を指定します
    <div class="bg_test2">
        子要素にも別で指定できます
    </div>
</div>

CSS

.bg_test {
    height: 250px;                  /* 高さ指定 */
    padding:  20px;                 /* 余白指定 */
    font-size: 20px;                /* 文字サイズ指定 */
    background-color: powderblue;   /* 背景色指定 */
}

.bg_test2 {
    height: 200px;                  /* 高さ指定 */
    width:  200px;                  /* 幅指定 */
    font-size:  14px;               /* 文字サイズ指定 */
    background-color: transparent;  /* 背景色指定 */
    padding:  20px;                 /* 余白指定 */
    float:  right;                  /* 位置指定 */
    position:  relative;            /* 位置指定 */
    top: 110px;                     /* 位置指定 */
    border: solid 2px blue;         /* 枠線指定 */
}


RGBAで無色透明

RGBAで指定する場合は、単純にアルファの値を0にしてあげるだけでOKです。アルファは透過度、言い換えれば不透明度を指定するので、不透明度が0になれば完全な透明というわけです。

bg_transparent2

HTML

<div class="bg_test">
    背景色を指定します
    <div class="bg_test2">
        子要素にも別で指定できます
    </div>
</div>

CSS

.bg_test {
    height: 250px;                              /* 高さ指定 */
    padding:  20px;                             /* 余白指定 */
    font-size: 20px;                            /* 文字サイズ指定 */
    background-color: rgba(63, 81, 181, 0.7);   /* 背景色指定 */
}

.bg_test2 {
    height: 200px;                              /* 高さ指定 */
    width:  200px;                              /* 幅指定 */
    font-size:  14px;                           /* 文字サイズ指定 */
    background-color: rgba(86, 86, 86, 0);      /* 背景色指定 */
    padding:  20px;                             /* 余白指定 */
    float:  right;                              /* 位置指定 */
    position:  relative;                        /* 位置指定 */
    top: 110px;                                 /* 位置指定 */
    border: solid 2px rgba(0, 0, 255, 1);       /* 枠線指定 */
}

背景色を透過にする方法

無色透明じゃなくて、

色がついた状態でちょっとだけ透明にしたい…

そんな時に使えるのが、opacityとRGBAです。これらはそれぞれ違った見栄えになるので、その時に合わせてどちらを使うのかがポイントです。では、それぞれ見ていきましょう。

opacityを使う

opacityは要素の透過度を指定できるプロパティです。background-colorと併用することができるので、背景色の透過も可能です。

bg_transparent3

HTML

<div class="bg_test">
    子要素に透過をかけています
    <div class="bg_test2">
        文字も透過されます
        <div class="bg_test3">
            子要素も透過されます
        </div>
    </div>
</div>

CSS

.bg_test {
    height: 250px;              /* 高さ指定 */
    padding:  20px;             /* 余白指定 */
    font-size: 20px;            /* 文字サイズ指定 */
    background-color: #12636d;  /* 背景色指定 */
    color: #fff;                /* 文字色指定 */
}

.bg_test2 {
    height: 200px;              /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    font-size:  14px;           /* 文字サイズ指定 */
    background-color: #217b4a;  /* 背景色指定 */
    padding:  20px;             /* 余白指定 */
    float:  right;              /* 位置指定 */
    position:  relative;        /* 位置指定 */
    top: 110px;                 /* 位置指定 */
    opacity: 0.6;               /* 透過指定 */
}

.bg_test3 {
    height: 140px;              /* 高さ指定 */
    background-color:  #000;    /* 背景色指定 */
    position:  relative;        /* 位置指定 */
    top: 30px;                  /* 位置指定 */
}

ただし、要素そのものの透過度を指定するものなので、内包されている要素も全部透過がかかります。なので文字も子要素もまとめて透過した状態になります。

RGBAで透過度を指定する

内包されている要素は透過したくない…

という時にはこちら、RGBAです。色の指定方法でも紹介した通り、アルファの値で透過度を指定することができます。指定してみると…

bg_transparent4

HTML

<div class="bg_test">
    子要素に透過をかけています
    <div class="bg_test2">
        文字は透過されません
        <div class="bg_test3">
            子要素は透過されません
        </div>
    </div>
</div>

CSS

.bg_test {
    height: 250px;              /* 高さ指定 */
    padding:  20px;             /* 余白指定 */
    font-size: 20px;            /* 文字サイズ指定 */
    background-color: #12636d;  /* 背景色指定 */
    color: #fff;                /* 文字色指定 */
}

.bg_test2 {
    height: 200px;                              /* 高さ指定 */
    width:  200px;                              /* 幅指定 */
    font-size:  14px;                           /* 文字サイズ指定 */
    background-color: rgba(33, 123, 74, 0.6);   /* 背景色指定 */
    padding:  20px;                             /* 余白指定 */
    float:  right;                              /* 位置指定 */
    position:  relative;                        /* 位置指定 */
    top: 110px;                                 /* 位置指定 */
}

.bg_test3 {
    height: 140px;              /* 高さ指定 */
    background-color: #8BC34A;  /* 背景色指定 */
    position:  relative;        /* 位置指定 */
    top: 10px;                  /* 位置指定 */
}

背景色だけが透過された状態になります。

background-colorの使用例

冒頭で述べた通り、background-colorは画面全体だけではなく、要素の色を指定できるものです。つまり、使いどころがありすぎるんです、やばいです。いくつか例を出しますので、参考にしてみてください。

サイト全体の背景色

bg_ex1

HTML

<body class="bg_test">
    <header>
        ヘッダー
    </header>
    <main>
        メインコンテンツ
    </main>
    <footer>
        フッター
    </footer>
</body>

CSS

header {
    border-bottom:  solid 1px;  /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
}
.bg_test {
    text-align:  center;        /* 文字中央揃え */
    color:  #fff;               /* 文字色指定 */
    background-color:  #000;    /* 背景色指定 */
}
footer {
    border-top: solid 1px;      /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
}

main {
    padding:  20px;             /* 余白指定 */
    height:  300px;             /* 高さ指定 */
}

まずは基本、サイト全体の背景を指定できます。背景色を変えるだけでかなり印象が変わりますね。

コンテンツごとの背景色

bg_ex2

HTML

<body class="bg_test">
    <header>
        ヘッダー
    </header>
    <main>
        <div class="bg_test2">
            コンテンツです
        </div>
        <div class="bg_test2">
            コンテンツです
        </div>
        <div class="bg_test2">
            コンテンツです
        </div>
    </main>
    <footer>
        フッター
    </footer>
</body>

CSS

header {
    border-bottom:  solid 1px;  /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
}
.bg_test {
    text-align:  center;        /* 文字中央揃え */
    color:  #fff;               /* 文字色指定 */
    background-color: #00BCD4;  /* 背景色指定 */
}
footer {
    border-top: solid 1px;      /* 枠線指定 */
    padding:  10px;             /* 余白指定 */
}

main {
    padding:  20px;             /* 余白指定 */
    height:  300px;             /* 高さ指定 */
}


.bg_test2 {
    width: 32.33333%;                           /* 幅指定 */
    display:  inline-block;                     /* インラインブロック指定 */
    background-color: rgba(255, 255, 255, 0.6); /* 背景色指定 */
    color: #222;                                /* 文字色指定 */
    padding:  10px;                             /* 余白指定 */
    box-sizing:  border-box;                    /* 崩れ防止 */
    height: 300px;                              /* 高さ指定 */
    border-radius:  5px;                        /* 角丸指定 */
}

こうしてコンテンツの背景も指定すると、文字を読みやすくしたりもできますね。色の組み合わせによってはこれだけでもおしゃれな感じにできます。

細かい要素の背景色

bg_ex3
HTML

<a class="bg_test" href="URL">
    click!
</a>

CSS

.bg_test {
    text-align:  center;                /* 文字中央揃え */
    color:  #fff;                       /* 文字色指定 */
    background-color: #00BCD4;          /* 背景色指定 */
    display:  block;                    /* ブロック要素にする */
    width:  300px;                      /* 幅指定 */
    padding:  15px;                     /* 余白指定 */
    font-size:  20px;                   /* 文字サイズ指定 */
    text-decoration:  none;             /* デフォルトCSS打ち消し */
    border-radius:  5px;                /* 角丸指定 */
    box-shadow: 0 4px 0 0px #028d9e;    /* 影指定 */
}

CSSさえあれば、ボタンもサクッと実装!レイアウトだけでなく、こういう細かい所にも活用できます。

グラデーション背景色

bg_ex4

HTML

<div class="bg_test">
</div>

CSS

.bg_test {
    height: 300px;  /* 高さ指定 */
    background: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);    /* 背景色指定 */
}

もっともっとおしゃれなWEBサイトにしたい…

そんな時にはグラデーション背景!ちょっと取り入れるだけでおしゃれですね。グラデーション背景の指定方法は下記の記事をぜひご覧ください

おまけ 色選びに困ったら…

background-colorを使う上で一番の難関ってなんだと思いますか?ズバリ、色選びです。

イメージはあるけど、どんな色にすればいいかわかんない…
色はあるんだけど、カラーコードがわからない…

そんな方のために、おまけとして解決法を2つご紹介します。

色見本サイトを見てみる

そもそもどんな色にするか悩んでるならこれ、色見本サイト!WEBで使える様々な色を紹介しているサイトがたくさんあります。カラーコードも記載しているサイトも多いので、これだと思ったらコピペするだけでOK

下記の記事は、いろんなテーマで色をまとめてくれています。イメージに合わせた色を見つけられやすいので、とってもおすすめです。
bg_site1
http://www.hp-stylelink.com/news/2013/07/20130708.php

Google Chromeで色を試してみる

Google Chromeにはデベロッパーツールというものがあるのをご存知でしょうか?ブラウザ上でコードの確認などができる、とっても便利なツールです。

このデベロッパーツール、色探しにも超便利なんです。

bg_site2

このように適当に背景色を決めて、四角のところをクリックすると…

bg_site3

色を選ぶ画面が出てきます。RGBAでもカラーコードでもなんでも対応している強いやつです。とりあえずこれで色を試してみるとイメージが湧きやすいですね。

しかも、この状態のままカーソルを画面側に動かすと…

bg_site4

画面上の色をピックアップすることができます。使いたい色のカラーコードがわからなくても、これで安心!迷った時にはデベロッパーツールを活用して、いろいろ試してみるのがおすすめです。

CSSだけでは高条件の案件獲得が難しい..?

中にはCSSのスキルを身につけた先にフリーランスとして仕事を獲得したいと考えている人もいるのではないでしょうか?

WEBサイトの見栄えを決めるCSSですが、それ単体だけを習得するよりも、他の言語もセットで習得した方が圧倒的に好条件の案件を獲得しやすくなります。

CSSだけの案件は価格帯が低い事が多い

CSSを学ぶことで、もちろん出来ることは広がるのですが、仕事獲得という面で考えるとCSS単体だとなかなか厳しい面があるからです。なぜなら案件自体は多いのですが、3〜5万ほどの低単価帯が多いのです。

また、大手アウトソーシングサイトであるクラウドワークスでCSS案件を調べてみると...

XHTMLやCSS2.1だけでなく最新技術を学んでおく必要があります。
JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。

引用元:クラウドワークス(一部抜粋)

といった記述もあります。以上の事から、PhotoshopやJavaScriptなども扱えると、仕事獲得のしやすさ、単価もグッと上がります。だからこそ今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。

もちろん、一緒に学ぶオススメ言語はPhotoshop、JavaScript以外にもたくさんあり、どの言語を学ぶといいか?はあなたの作りたい物によって変わります。

詳しく知りたい人は、是非プログラミング言語診断を利用してみてください。あなたにぴったりの言語を1分ほどで無料診断致します。

挫折せずにスキルを身につけたいなら

セットでスキルを身に付けることをオススメしましたが、

CSSだけでも大変なのに他の言語なんて..

と思ってしまう方もいることでしょう。確かに、CSSも極めようと思ったら非常に奥が深いので、まずそれを習得するだけでも大変です。そこに加えて他の言語を身に付けると考えると、かなり難しそうですよね。

そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?弊社では、

  • 現役エンジニアによるマンツーマンレッスン
  • 目的に合わせたあなた専用のオーダーメイドカリキュラム
  • 転職支援、フリーランスとしての独立支援

を徹底しているので、つまずく事なく学習を進める事ができます。もちろん、いきなり入会する必要はありません。まずは無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。

下記ボタンより1分ほどで予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。

無料体験レッスンの
予約はこちら

まとめ

いかがでしたか?背景色はWEBサイトの雰囲気を決定づけるといっても過言ではありません。色選びが大変だった時には、おまけ情報のことを思い出していただければ幸いです!

どんどん活用して、素敵なWEBサイトを作ってくださいね。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー