CSS・CSSリファレンス・WEB}やぁ、結構お腹が弱いユトピ(@yutopi60pa)だよ。みなさんはWEBサイトをもっとオシャレにしてみたくないですかね?そりゃもちろんですよね。まとめbackgroundとは?cssプロパティである「background」は指定した場所の背景を設定することができます。背景には色や画像の設定をすることができます。サイト全体の背景を宇宙の画像にしたり、一部の背景の色を変えたりだとかが可能です。それでは早速やってみましょう。背景は宇宙の画像だよ!こんな感じ背景の設定をすることができます!画像を設定する場合は画像のあるパスを「url()」の中に指定してあげれば表示されます!他にbackgroundには様々な機能があります!その機能を紹介しますね!backgroundの関連プロパティbackgroundには色や画像の設定を細かく決めることができます。画像の位置や、大きさ、繰り返しの設定もできます。やり方は以下のプロパティを設定していきます。background-color、background-imagebackground-color、background-imageはそれぞれ色と画像の設定をすることができます。基本的にbackgroundと同じ指定の仕方で問題ありません。背景は宇宙だよ!どちらも先ほどのデモと同じ結果になります。background-repeatbackground-repeatは画像の繰り返しを指定できます。縦への繰り返し、横への繰り返し、または両方の指定が可能です。指定方法は以下4つです。repeat・・・縦、横へ繰り返す。repeat-x・・・横のみへ繰り返す。repeat-y・・・縦のみへ繰り返す。no-repeat・・・繰り返しを無効にする。横の繰り返しの「x」や縦への繰り返しの「y」は、座標をもとに方向を決めている増すので、xやyを使用しています。それでは実際に見てみましょう。背景画像が繰り返さないよ!このように背景の画像が指定したように繰り返します。これってどこでつかうのよ?そんな疑問を持った人に朗報!background-repeatを使ったテクニックをご紹介しましょう!まずこういった画像を用意します。この画像を背景に設定し、繰り返しをすると以下の結果になります。水玉だね!!このように背景画像を繰り返すと模様になるデザインもすることができます。いった画像を自分で製作してもいいですし、フリー素材サイトもあるので、そちらの画像を使ってみるのもいいですね。ヒバナbackground-positionbackground-positionは背景画像が表示される場所の指定をすることができます。bottom;」と指定します。background-positionの指定方法は以下の3つです。80%;・・・背景画像を左から50%、上から80%の位置に配置。30px;・・・背景画像を左から20px、上から30pxの位置に配置。下二つの指定方法が少しイメージしにくいかもしれませんね。どちらも左上が基準になり、左上からx軸またはy軸方向に何%や何pxと指定しています。ちなみに数字が一つだけ指定された場合は、x、yともに同じ数字分動きます。50pxならx、yともに50px分背景画像が移動します。実際にやってみましょう。id="bgpm"></div>結果#bgpmこのような指定方法を使えば背景画像の位置を指定することができます。ちなみに%指定が少しわかりにくい気がしますが、これは背景画像を設定している要素の大きさによって場所が変わっていきます。今回の場合はid名bgppのdivタグが背景画像を設定している要素ですので、その幅と高さに応じて画像の位置を計算しています。%指定した数字をpxに変換する計算式はなかなか複雑で、それだけで1記事書けちゃいます。いまは割愛しますが、使い勝手としては%指定の方が良いです。最近のレスポンシブデザインにも対応でき、ウィンドウの幅が変わっても位置を自動的に計算してくれるので、デザインも崩れず非常に便利です。最初から数値を入れてもどの辺に表示されるかは正確にはわからないので、ブラウザのデベロッパーツールなどを使用して、実際に表示を確認していきながら調整するのが一般的ですね。そちらの方が正確に画像の配置を行えますし。デベロッパーツールの使い方に関してはこちらを参照ください。HTML・CSSスキル上達を”爆速”にするたった1つの方法bckground-attachment最後はbackground-attachmentです。こちらのプロパティの機能は背景画像がスクロールに伴ってついてくるか、固定させるかを指定することができます。fixed・・・スクロールしても、動かずに固定されます。scroll・・・スクロールにともなって動いていきます。気になっている方もいると思いますが実はbackground-attachmentのデモは実行しています。画面の右下をご覧ください。記事で登場させている「お母さんの画像」がついてきていますね。このお母さんの画像をbodyタグに背景として設定して、background-attachmentにfixedを指定しています。スクロールをしても、このお母さんはどこまでもついていきます。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プロパティはいままで紹介してきたbackground-colorやbackground-positionなどを一括で指定することができます。実際にやってみましょう。id="bgy1"></div>結果#bgy1こんな感じでbackground1つだけで値を複数指定することができます。指定する順番もバラバラでOK。こちらの方が圧倒的に楽でコードも短く済みますね。ちなみに指定できるbackground系プロパティは以下の5つです。background-colorbackground-imagebackground-repeatbackground-positionbackground-attachmentまとめ以上がcssのbackgroundプロパティについてでした。奥深いプロパティですね。覚えることも多いようには見えますが、実際はそこまで難しいことはなく、一度自分でやってしまえばすぐにできるようになりますよ。それに最近は背景でいろいろな個性を出しているサイトも多くみられますので、将来的にそういうオシャレなデザインをしてみた方はぜひとも今回のbackgroundプロパティを覚えておきましょう。質問や意見がありましたらお気軽にツイッターの方へどうぞ。コメントをキャンセルメールアドレスが公開されることはありません。