【CSS】background-colorで背景色を指定する方法を解説

Webサイトの制作をしていると、背景色を指定することがよくあります。CSSで背景色の指定をするとき、次のような疑問を持つ方もいるのではないでしょうか。

• CSSで背景色を指定するにはどんな方法があるんだろう？
• 背景色をグラデーションや斜めにカットさせるにはどうしたらいい？

• 実際の現場で背景色を使う場面を知りたい

この記事では、CSSで背景色を指定する方法を解説していきます。実際に制作の現場で使われている背景色の指定などを紹介していくので、参考にしてみてください。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

背景色を指定するbackground-colorプロパティ

CSSで背景色を指定するには、background-colorというプロパティを使用します。

以下にコードの例と結果を表示します。今回は背景をオレンジ色にしています。

<div class="background">
背景色を表示します
</div>

.background{
  background-color: orange;
}

色の指定方法はorangeなどのカラーネームだけでなく、16進数やRGBA値などでも指定することができます。

.background{
  background-color: #F3A83B;
  background-color: rgba(243, 168, 59, 1);
}

色の指定については、こちらの記事で詳しく解説しています。文字の色を設定する方法も一緒に解説しているので、参考にしてみてください。

CSSを使った文字色の変更方法をどこよりも丁寧に分かりやすく解説

実際に背景色をよく使う場面

背景色を使う場面は、おもに以下のような時です。

一つずつ解説していきます。

セクションによって背景色を変える

Webサイトを作成するときに、ページを構成する単位として「章」や「節目」のような部分はsectionタグで分けていきます。sectionタグを使ったときのデザインとして、セクションごとに背景色を変えることがよくあります。

実際のコードと結果の例は以下のようになります。

<section class="section1">セクション1</section>
<section class="section2">セクション2</section>
<section class="section3">セクション3</section>

.section1{
background-color: #e8f8f8;
height: 200px;
}
.section2{
background-color: #c4e6ee;
height: 200px;
}
.section3{
background-color: #e8f7f0;
height: 200px;
}

背景全体に色をつける

背景全体に色をつけるには、bodyタグにbackground-colorを指定します。

body {
  background-color: #e8f8f8;
}

テキストやボタンに背景色をつける

テキストやボタンに背景色をつけるというデザインもよくある実装です。

以下にコードの例を挙げています。font-sizeやmarginの指定は結果を見やすくするための記述です。

p{
font-size: 50px;
display:inline-block;
margin-top: 10%;
background-color: orange;
}

このように、pタグに背景色を指定した場合は最初の状態だと画面幅いっぱいに背景色が設定されてしまいます。背景色の幅を変えたい時には、widthを使いましょう。また、セレクタをインライン要素やインラインブロック要素に設定することで、テキストの幅だけ背景色をつけることができます。

背景色をずらす

背景色は要素の背景全面に設定するのではなく、ずらしてみるといったことも可能です。

文章だとわかりづらいので例を見てください。

<p class="background">
テキスト
</p>

.background{
position: relative;
}

.background::before{
position: absolute;
content: "";
left: 50%;
top: -50%;
background-color: rgb(199, 157, 157);
width: 100px;
height: 50px;
z-index: -1;
}

背景色が付いている部分だけ位置をずらすには、擬似要素を作って背景色を指定し、positonで位置を指定します。擬似要素に背景色をつける方法は応用が効きやすいため、CSSで要素をデザインする時に多用されています。

一部だけ背景色を追加する

要素の一部だけ背景色を指定する実装を行うこともよくあります。

要素の左側だけ背景をオレンジ色にする例を見てみましょう。

<div class="container">
  <div class="background-orange">
    オレンジ色の背景色の部分です
 </div>
</div>

.container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #000;
}

.background-orange {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #ffbb1e;
}

.contents{
  position: relative;
}

この実装のポイントは以下のとおりです。

1. .cotainerの中に、背景色を変更するための要素（.background-orange）とコンテンツのための要素（.contents）を作る
2. 親要素の.containerにposition: relative;を指定して、要素の重なりの起点を作る
3. .background-orangeにはposition: absolute;を、.contentsに position: relative;を指定する

これで背景色を一部だけ変更することが可能です。.background-orangeの位置(left・right)などを指定すれば背景色を任意の位置に設定できます。

背景色に変化をつける

よりサイトの見た目にこだわりたいときは、背景色を変化させてみるといいかもしれません。グラデーションや斜めの背景色などのデザインがあると、サイトの見た目にアクセントを加えられます。

ここからは背景色を変化させる方法を紹介していきます。

背景色をグラデーションさせる

背景色をグラデーションさせるには、linear-gradientという値を記述します。先に記述した色からスタートし、後に記述した色に向かってグラデーションしていきます。

以下がコードの例と表示結果です。

body{
height: 100vh;
background: linear-gradient(rgb(243, 215, 215),rgb(238, 102, 102));
}

また、グラデーションの方向は上から下の一方向のみでなく横方向や斜めにも設定できます。色の指定の前にdeg値を入力することで、グラデーションの方向を設定できます。deg値はマイナスの値を指定するとグラデーションの方向が反転します。

body{
height: 100vh;
/*右下から斜め45度にグラデーション*/
background: linear-gradient(-45deg, rgb(243, 215, 215),rgb(238, 102, 102));
}

グラデーションを作るときに便利なサイト

グラデーションを自分で設定するとき、よく次のような問題が起こります。

• 使いたい色がうまく決まらない
• グラデーションがきれいにならない

このような問題を避けるには、グラデーション作成ツールを使いましょう。おすすめのサイトのリンクがこちらです。

カラーパレットでグラデーションの始めの色と終わりの色を設定すると、コードを自動で取得してくれます。作業の効率が非常に上がるため、重宝します。

背景色を斜めにする

背景色は斜めにすることも可能です。背景色を斜めにする方法はいくつかありますが、今回の記事ではtransform: skew();を使った方法で解説していきます。

以下がコードの例と表示結果です。

<div class="background">
</div>

.background{
height: 200px; width: 100%;
background-color: rgb(255, 136, 0);
transform: skewY(5deg);
}

skew以外の方法だと、clip-pathやborderを使用する方法があります。上側だけ斜めにしたいときなど、背景色の形を作りたい場合はこちらの方法がおすすめです。

clip-pathやborderを使って背景色の形を変える方法はこちらの記事で詳しく解説しているので、参考にしてみてください。

CSSで三角形を作る手順を初心者でも分かるように丁寧に解説！

背景色を透過させる

背景色は透過させることもできます。色の透過はopacityを用いるかrgbaの指定を用いることで可能です。

今回は背景色をrgbaで指定し、透明度を0.5に設定しています。

以下がコードの例と表示結果です。

<div class="background">
</div>

.background{
height: 200px;
width: 100%;
background: rgba(255, 136, 0, 0.5);
}

背景色を透過させると、要素を見やすくする効果があります。例えばテキストに背景色を指定すると、色によってはテキストが読みづらくなってしまいます。背景色の透明度を下げて目立たなくすれば、テキストを読みやすくすることができます。

また、ヘッダーなど画面に追従する要素を作成したとき、透明度が0だと後ろの要素が完全に隠れてしまいます。背景色を透過させれば後ろの要素が透けて見えるため、ちょっとオシャレな印象のデザインにすることができます。

背景色を透過させるデザインはサイトを見やすくするためのアイデアとして持っておくと良いでしょう。

まとめ

この記事では、CSSで背景色を設定する方法や実際に背景色を使う場面での使い方を紹介しました。

背景色は様々な場面で使えるデザインの一つです。背景色を上手に使っているサイトはとても見栄えが良くなり、技術的にも高い印象を与えられます。そのため、背景色にこだわるのは制作を行ううえで非常に大切だと言えます。

背景色をうまく使いこなして、あなただけの素敵な背景色をデザインしてみましょう。きっと、より制作を楽しめるようになりますよ。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー