こんにちは。最近アロマに凝りだし、仕事中はペパーミントとレモンの香りをディフュー ズしているサイトウです。
今回はCSSの必須スキルbackground-colorについてご紹介します。CSSとは、Webページの土台であるHTMLを装飾してくための言語です。background-colorは背景の装飾をするときに用います。
背景の色を変えるだけでそんなに印象って変わるのかな？
変わります！背景の色を変えることで、ホームページの印象や雰囲気はまったく違ったものになります。
今回は、background-colorの
について説明します。ホームページをアレンジしたい方やこれからCSSを学習される方はぜひ読んでみてくださいね。
目次
background-colorとは
background-colorの読み方
バックグラウンド カラーと読みます。
background-colorの説明
backgroundとは、景色・絵画・写真の背景のことです。直訳のとおり、背景の色を指定するプロパティです。背景というと、景色や絵画全体の色を想像される方が多いですが、各要素の背景の色を指定することができます。初期値はtransparentで、背景の色が何もない状態です。
background-colorで利用できる値
background-colorでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| transparent | 背景色を透明にします。こちらが初期値です。 |
| 色 | カラーネームや数字、rgbで色を指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
background-colorの基本的な使い方
background-colorの使い方
下記のように記載します。
|
1 2 3 |
h1{ background-color:red; } |
書き方はCSSの基本通り
- セレクター（どの部分の）
- プロパティ（何を）
- 値（どのようにするか）
です。ポイントは、セレクターでどの部分を色付けするのかしっかりと指定することです。例えば、画面全体の色を変えるのか、1要素のみを色付けするのか、明確にします。ここを間違えてしまうと意図した箇所と違う部分が色付けされてしまうので、注意が必要です。
また、上記の例では値の部分を「red」と記載していますが、色を指定するのにはいくつか書き方がありますので、ご紹介します。
カラーネームを書く
さきほどの例と同じ書き方です。blue、redのように色の名前を英語で書きます。最もシンプルです。
カラーコードで書く
|
1 2 3 |
h1{ background-color:#ff0000; } |
#3〜6桁の英数字で書きます。カラーコードは色によって決まっています。カラーネームよりも詳細な色の指定が可能です。例えば、同じ赤でもオレンジに近い赤もあれば黒っぽい赤もありますよね。微妙な色の違いを指定することができます。
RGBで書く
|
1 2 |
h1{ background-color:rgb(255,105,180); |
rgb(赤の数値,緑の数値,青の数値)と書きます。カンマで区切ることを忘れないようにしましょう。赤・緑・青のバランスを数値にして色を指定します。数値の最大値はそれぞれ255です。実際に数字を変えていくつか表示させてみるとわかりやすいですよ。
RGBAで書く
|
1 2 |
h1{ background-color:rgb(255,105,180,0.5); |
先ほどのRGBに加えて、透過度を指定することができます。Aの部分はアルファ（Alpha）の頭文字で、透過度の指定部分です。アルファの最大値は1です。0は透明で、1にすると不透明となります。こちらも実際に数値を変化させてみるのがおすすめです。
カラーコードやRGB値を調べるときはカラーピッカーを使用するのがよいでしょう。色見本サイトもたくさんあるので、ぜひ検索してみてください。
background-colorとbackground-imageとの違い
背景の色を指定するbackground-colorに対し、background-imageは背景に画像を指定することができます。背景に写真や画像を入れたいときはbackground-imageを使用しましょう。
background-colorの応用的な使い方
背景色を透過させる
opacityというプロパティを使って要素の透過度を指定すると、背景色を透過させることができます。先ほどのRGBAは文字は透けませんが、opacityは文字も透けます。
透過させない場合はこちら。
See the Pen
VwjqzPY by Fusae Saito (@mori238)
on CodePen.
透過させるとこのようになります。
See the Pen
zYBydZe by Fusae Saito (@mori238)
on CodePen.
同じ色でも透過させるかどうかで雰囲気が変わります。どのような印象にしたいかをふまえて使い分けてください。
いかがでしたか。今回は、「background-color」についてご紹介しました。背景色を使いこなして、自分らしいサイトを作ってみましょう。ぜひ参考にしてみてくださいね。
参考文献：2019年 SBクリエイティブ株式会社｜1冊ですべて身につくHTML&CSSとWebデザイン入門講座【著】Mana
