みなさんこんにちは!フリーランスプログラマーのsatoです。WEBサイトのイメージを決める背景、みなさんいい感じに設定できていますか?
そもそも背景ってどう設定するんだろう…
という悩みを持っている人も多いと思います。今回は、CSSで背景設定の際に使用するbackgroudについて見ていきましょう。前半でbackgroud関連のプロパティ一式を見ていきます。
そして後半では背景設定の際によく使う手法をまとめておきました。backgroudを使いこなせれば、サイトの見た目が劇的に変わります。ぜひ使いこなせるように学んでみてください。
この記事の目次
関連プロパティを一式紹介!
まずはbackground関係のプロパティを一式見てみましょう。
background | 背景設定を一式まとめて設定できる |
background-color | 背景色を設定できる |
background-image | 背景画像を設定できる |
background-repeat | 背景画像の繰り返し設定 |
background-attachment | 背景画像のスクロール時の挙動 |
background-position | 背景画像の座標操作 |
background-size | 背景画像の表示サイズ操作 |
background-origin | 背景画像を表示する位置の指定 |
background-clip | 背景画像を表示する領域の指定 |
9個もあるんですね!とはいえ、目的別に大きく分けると3種類しかありません。
background-color・・・背景色の指定
background-image(とその関連プロパティ)・・・画像の設定
こう見ると簡単ですね!今回はこの3種類に分けて、使い方を見ていきましょう。
一式まとめて設定!「background」
画像や色をまとめて設定するのならbackgroundを使用しましょう。
background : [color] [image] [repeat] [position] [attachment] [clip] [size] [origin];
このように、スペース区切りで他のプロパティに該当する要素を入力することで、まとめて設定が行えます。たとえば、bodyに対して背景色と画像をまとめて設定するなら以下の通りです。
body{ background : url(test.png) #9999bb; }
一行でかけて便利ですね!しかし可読性の面を考えた時に、あまりに長くなりそうな場合は、各要素個別で書いたほうが良いかと思います。
背景色を設定!「background-color」
background-colorでは背景色の設定が行えます。書き方は以下の通りなのですが…
background-color : [color];
colorの指定方法に幾つかの方法があります。
background-color: #ffffff; /* 16進数で指定 */ background-color: rgb(255, 255, 255); /* RGPで指定 */ background-color: rgba(255, 255, 255, .1); /* RGPAで指定 */ background-color: gray; /* 色名で指定 */
よく使われるのはこの4種類でしょうか。16進数などがわからない初心者はRGB形式の色指定が、わかりやすいのではないでしょうか。赤(Red)・緑(Green)・青(Blue)のRGBです。
それぞれの色の強さを、0〜255で指定すれば簡単に色合いを調整できますよ!
背景に画像を設定!
それ以外のbackground-image関係のプロパティは、背景に画像を指定した際の挙動に関するものです。こちらは、長くなるため、別記事としてまとめました。綺麗にまとめていますので、ぜひ参考にしてみてください。
