やぁ、結構お腹が弱いユトピ(@yutopi60pa)だよ。
みなさんはWEBサイトをもっとオシャレにしてみたくないですかね？
そりゃもちろんですよね。
そんなみなさんのために今回はサイトをオシャレにするためにかかせないCSSプロパティ「background」を紹介するよ！
backgroundは背景の設定をできるCSSプロパティで、ビジュアルがメインになるようなWEBデザインでは欠かすことができないプロパティです！
というわけでbackgroundの解説をしていきますぜ！！
目次
backgroundとは？
cssプロパティである「background」は指定した場所の背景を設定することができます。
背景には色や画像の設定をすることができます。
例えばサイト全体の背景を宇宙の画像にしたり、一部の背景の色を変えたりだとかが可能です。
それでは早速やってみましょう。
backgroundを使ってみよう！
背景に赤を設定
css
|
1 2 3 4 5 6 7 |
css #bgred { background:red; } HTML <div id="bgred" style="color:#fff;">背景は赤だよ！</div> |
結果
背景を青に設定
css
|
1 2 3 4 5 6 7 |
CSS #bgblue { background:blue; } HTML <div id="bgblue" style="color:#fff;">背景は青だよ！</div> |
結果
背景に画像を設定
css
|
1 2 3 4 5 6 7 |
CSS #bgspace { background: url(http://60pablog.com/wp-content/uploads/2016/08/utyu.jpg) } HTML <div id="bgspace" style="color:#fff;">背景は宇宙の画像だよ！</div> |
結果
こんな感じ背景の設定をすることができます！
画像を設定する場合は画像のあるパスを「url()」の中に指定してあげれば表示されます！
他にbackgroundには様々な機能があります！
その機能を紹介しますね！
backgroundの関連プロパティ
backgroundには色や画像の設定を細かく決めることができます。
例えば画像の位置や、大きさ、繰り返しの設定もできます。
やり方は以下のプロパティを設定していきます。
background-color、background-image
background-color、background-imageはそれぞれ色と画像の設定をすることができます。基本的にbackgroundと同じ指定の仕方で問題ありません。
background-color・background-image
background-colorを指定
css
|
1 2 3 4 5 6 7 |
CSS #bgcred { background-color: red; } HTML <div id="bgcred" style="color:#fff;">背景は赤だよ！</div> |
結果
background-imageを指定
css
|
1 2 3 4 5 6 7 |
CSS #bgcspace { background-image: url(http://60pablog.com/wp-content/uploads/2016/08/utyu.jpg) } HTML <div id="bgcspace" style="color:#fff;">背景は宇宙だよ！</div> |
結果
どちらも先ほどのデモと同じ結果になります。
background-repeat
background-repeatは画像の繰り返しを指定できます。
縦への繰り返し、横への繰り返し、または両方の指定が可能です。
指定方法は以下4つです。
- background-repeat: repeat・・・縦、横へ繰り返す。
- background-repeat: repeat-x・・・横のみへ繰り返す。
- background-repeat: repeat-y・・・縦のみへ繰り返す。
- background-repeat: no-repeat・・・繰り返しを無効にする。
横の繰り返しの「x」や縦への繰り返しの「y」は、座標をもとに方向を決めている増すので、xやyを使用しています。
それでは実際に見てみましょう。
background-repeat
background-repeat:repeatを使用
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
CSS #bgrr { background: url(http://60pablog.com/wp-content/uploads/2016/04/iphone-1.png); background-repeat: repeat; width:100%; height:200px; border:1px solid #ddd; } HTML <div id="bgrr"> <strong> <span class="blue">背景画像が繰り返してるよ！</span> </strong> </div> |
結果
background-repeat:repeat-xを使用
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#bgrx { background: url(http://60pablog.com/wp-content/uploads/2016/04/iphone-1.png); background-repeat: repeat-x; width:100%; height:200px; border:1px solid #ddd; } HTML <div id="bgrx"> <strong> <span class="blue">背景画像が横に繰り返してるよ！</span> </strong> </div> |
結果
background-repeat:repeat-yを使用
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
CSS #bgry { background: url(http://60pablog.com/wp-content/uploads/2016/04/iphone-1.png); background-repeat: repeat-y; width:100%; height:200px; border:1px solid #ddd; } HTML <div id="bgry"> <strong> <span class="blue">背景画像が縦に繰り返してるよ！</span> </strong> </div> |
結果
background-repeat:no-repeatを使用
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
CSS #bgrn { background: url(http://60pablog.com/wp-content/uploads/2016/04/iphone-1.png); background-repeat: no-repeat; width:100%; height:200px; border:1px solid #ddd; } HTML <div id="bgrn"> <strong> <span class="blue">背景画像が繰り返さないよ！</span> </strong> </div> |
結果
このように背景の画像が指定したように繰り返します。
でもこれってどこでつかうのよ？そんな疑問を持った人に朗報！
background-repeatを使ったテクニックをご紹介しましょう！
まずこういった画像を用意します。
この画像を背景に設定し、繰り返しをすると以下の結果になります。
背景画像繰り返しの応用
水玉になるよ！
css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CSS #bgir { background:url(http://60pablog.com/wp-content/uploads/2016/08/A3.png); background-repeat:repeat; width:100%; height:300px; } HTML <div id="bgir"> <strong>水玉だね！！</strong> </div> |
結果
このように背景画像を繰り返すと模様になるデザインもすることができます。
こういった画像を自分で製作してもいいですし、フリー素材サイトもあるので、そちらの画像を使ってみるのもいいですね。
background-position
background-positionは背景画像が表示される場所の指定をすることができます。
例えば左下に表示させたい場合は「background-position: left bottom;」と指定します。
background-positionの指定方法は以下の3つです。
- 位置を指定するワード「top・bottom・left・right」
例 background-position: top right;・・・背景画像を右上に配置 - ％で指定
例 background-position: 50% 80%;・・・背景画像を左から50%、上から80%の位置に配置。 - 数字で指定
例 background-position: 20px 30px;・・・背景画像を左から20px、上から30pxの位置に配置。
下二つの指定方法が少しイメージしにくいかもしれませんね。
どちらも左上が基準になり、左上からx軸またはy軸方向に何%や何pxと指定しています。
順番はbackground-poaition: x yで指定します。
ちなみに数字が一つだけ指定された場合は、x、yともに同じ数字分動きます。
例えば、background-poisition: 50pxならx、yともに50px分背景画像が移動します。
実際にやってみましょう。
background-positionの指定
background-position: top rightを指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
CSS #bgpn { background: url(http://60pablog.com/wp-content/uploads/2016/08/A3.png); background-repeat: no-repeat; background-position: top right; background-size: 20%; width: 100%; height: 200px; border: 1px solid black; } HTML <div id="bgpn"> </div> |
結果
background-position: 50% 80%を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
CSS #bgpp { background: url(http://60pablog.com/wp-content/uploads/2016/08/A3.png); background-repeat: no-repeat; background-position: 50% 80%; background-size: 20%; width: 100%; height: 200px; border: 1px solid black; } HTML <div id="bgpp"></div> |
結果
background-position: 20px 30pxを指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
CSS #bgpm { background: url(http://60pablog.com/wp-content/uploads/2016/08/A3.png); background-repeat: no-repeat; background-position: 20px 30px; background-size: 20%; width: 100%; height: 200px; border: 1px solid black; } HTML <div id="bgpm"></div> |
結果
このような指定方法を使えば背景画像の位置を指定することができます。
ちなみに%指定が少しわかりにくい気がしますが、これは背景画像を設定している要素の大きさによって場所が変わっていきます。
今回の場合はid名bgppのdivタグが背景画像を設定している要素ですので、その幅と高さに応じて画像の位置を計算しています。
%指定した数字をpxに変換する計算式はなかなか複雑で、それだけで1記事書けちゃいます。
なのでいまは割愛しますが、使い勝手としては%指定の方が良いです。
最近のレスポンシブデザインにも対応でき、ウィンドウの幅が変わっても位置を自動的に計算してくれるので、デザインも崩れず非常に便利です。
でも正直最初から数値を入れてもどの辺に表示されるかは正確にはわからないので、ブラウザのデベロッパーツールなどを使用して、実際に表示を確認していきながら調整するのが一般的ですね。
そちらの方が正確に画像の配置を行えますし。
デベロッパーツールの使い方に関してはこちらを参照ください。
HTML・CSSスキル上達を”爆速”にするたった1つの方法
bckground-attachment
最後はbackground-attachmentです。
こちらのプロパティの機能は背景画像がスクロールに伴ってついてくるか、固定させるかを指定することができます。
- fixed・・・スクロールしても、動かずに固定されます。
- scroll・・・スクロールにともなって動いていきます。
気になっている方もいると思いますが実はbackground-attachmentのデモは実行しています。
画面の右下をご覧ください。
たまに記事で登場させている「お母さんの画像」がついてきていますね。
このお母さんの画像をbodyタグに背景として設定して、background-attachmentにfixedを指定しています。
なのでスクロールをしても、このお母さんはどこまでもついていきます。
ちなみにコードはこちら
|
1 2 3 4 5 6 |
body { background-image:url(http://60pablog.com/wp-content/uploads/2016/08/512913.png); background-repeat: no-repeat; background-position:bottom right; background-attachment:fixed; } |
こんな感じでbackground-attachmentを使用すればスクロールされた際に、背景画像がとどまるか付いてくるかを指定することができちゃいます。
その他のbackgroundプロパティ
他にもbackgroundプロパティには新しく追加されたものがいくつかあります。
- background-size・・・背景の画像サイズの指定
- background-origin・・・背景の基準位置の指定
- background-clip・・・背景の適用範囲の指定
- background-break・・・インライン要素の背景画像の繰り返し方法を指定
このうちbackground-sizeは使用する場面が多いです。
こちらはbackground-sizeだけで1記事書ける内容なので、別の機会に解説していこうと思います。
backgroundの一括指定
そんな面倒くさがりさんのために朗報！backgroundは紹介したbackground系プロパティの値を一括に指定できちゃいます！
backgroundプロパティはいままで紹介してきたbackground-colorやbackground-positionなどを一括で指定することができます。
実際にやってみましょう。
backgroundの一括指定
一括指定しない場合
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
CSS #bgno1 { background-color:gold; background-image:url(http://60pablog.com/wp-content/uploads/2016/08/A3.png); background-repeat:no-repeat; background-position:top right; background-size:20%; width:100%; height:200px; } HTML <div id="bgno1"></div> |
結果
一括指定した場合
コード
|
1 2 3 4 5 6 7 8 9 10 |
CSS #bgy1 { background:gold url(http://60pablog.com/wp-content/uploads/2016/08/A3.png) no-repeat top right; background-size:20%; width:100$; height:200px; } HTML <div id="bgy1"></div> |
結果
こんな感じでbackground１つだけで値を複数指定することができます。指定する順番もバラバラでOK。
こちらの方が圧倒的に楽でコードも短く済みますね。
ちなみに指定できるbackground系プロパティは以下の5つです。
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
まとめ
以上がcssのbackgroundプロパティについてでした。
なかなか奥深いプロパティですね。
覚えることも多いようには見えますが、実際はそこまで難しいことはなく、一度自分でやってしまえばすぐにできるようになりますよ。
それに最近は背景でいろいろな個性を出しているサイトも多くみられますので、将来的にそういうオシャレなデザインをしてみた方はぜひとも今回のbackgroundプロパティを覚えておきましょう。
質問や意見がありましたらお気軽にツイッターの方へどうぞ。
ユトピのツイッター
@yutopi60pa