こんにちは！たく丸です。
今回は背景色を入れる方法をご紹介して行こうと思います。
背景はホームページの割合で占める面積が広いため、良くも悪くもサイト全体の印象を大きく変える役割を果たします。
背景を設定するにあたり、CSSを用いて設定すること 多く容易に色を入れたり、グラデーションや画像を配置することもできます。
今回はその背景の設定方法をご説明します。
まず、背景に装飾を施すには、CSSの「background」というプロパティを用いて設定します。
この「background」では背景色、背景グラデーション、背景画像を設定できます。
特に設定をしなければ真っ白な背景になり、殺風景なサイトになるため、リッチ感を持たせたり、背景に薄く色を入れるだけでもサイトの見栄えが変わりおしゃれなサイトに仕上げることができます。
そんな背景を設定する方法が下記になります。
まずはシンプルに単色の背景色を指定する方法をご紹介致します。
下記サンプルです。
See the Pen
NWqGpJY by TAKUYA (@fukutaku)
on CodePen.
上記のように「background-color:〇〇;」と書くことで狙っている要素に対し背景に色を入れることが出来ます。
ここで注意することは２点あり、
1、背景色は画面全体に入るのではなく、指定している要素に対して入れることができる。
2、コンテンツ内にに高さをとる要素がない時は狙っている要素自体の高さがとれないため背景色が入らない
どういうことかは下記にて説明します。
1、狙っているコンテンツに背景色を入れる
See the Pen
指定した要素に背景色を入れる by TAKUYA (@fukutaku)
on CodePen.
これは 狙っているコンテンツ毎に背景色を指定するパターンです。
包括している要素「background-red」には赤色の背景を指定し、その中にある要素「background-blue」には、青色を指定しています。
記述方法はシンプルで各要素に対して、背景色を設定しています。
2、コンテンツがない場合
See the Pen
背景色（要素なし） by TAKUYA (@fukutaku)
on CodePen.
ご覧のように高さが取れる要素がないため、背景に色が入りません。
どうしても要素を入れずに背景に色を入れたいとなると、CSSでheight（高さ）の指定をして高さを確保する必要があります。
ひとまず背景に色を入れる方法がわかったところで次に紹介するのは、背景にグラデーションを入れる方法です。
一言でグラデーションと言っても色々なパターンがあり、上から下に向かっているものや、横方向に向かっているもの、斜め方向にはたまた放射状など様々です。
ここでは各グラデーションの入れ方を解説して行こうと思います。
1、上から下方向へグラデーション
See the Pen
上から下へのグラデーション by TAKUYA (@fukutaku)
on CodePen.
2、左から右へのグラデーション
次に左右でのグラデーションについて解説していきます。
See the Pen
横からグラデーション by TAKUYA (@fukutaku)
on CodePen.
上下のグラデーション同様に通常とプレフィックスがある場合とで記述方法は違いますが、論理的には同じで上から（下から）という箇所を右から（左から）にすれば横方向にグラデーションが入ります。
3、複数色を使ったグラデーション
こちらは先程までの2色のグラデーションとは違い3色以上を用いた応用編になります。
3色以上使う際はカンマ(,)を用いて複数指定をするかもしくは、「%」で位置を調整し色の幅の割合を指定します。それではコードを見ていきましょう！
See the Pen
qBdbVPV by TAKUYA (@fukutaku)
on CodePen.
上記のように表示したい領域を「％」でしきりグラデーションを指定することで、複数色のグラデーションを可能にします。
今回は背景に色を入れるCSSに紹介をさせていただきました。
背景が真っ白かそうじゃないかで全然変わるので、背景を活用してセンスあるサイトに仕上げていきましょう！