CSSCSSのbackgroudはこれで完璧!見栄えが劇的に変わる手法sato2018/10/92019/7/7みなさんこんにちは!フリーランスプログラマーのsatoです。WEBサイトのイメージを決める背景、みなさんいい感じに設定できていますか?イメージ通りの背景設定ができない...そもそも背景ってどう設定するんだろう...という悩みを持っている人も多いと思います。今回は、CSSで背景設定の際に使用するbackgroudについて見ていきましょう。前半でbackgroud関連のプロパティ一式を見ていきます。後半では背景設定の際によく使う手法をまとめておきました。backgroudを使いこなせれば、サイトの見た目が劇的に変わります。使いこなせるように学んでみてください。まとめ関連プロパティを一式紹介!まずはbackground関係のプロパティを一式見てみましょう。背景画像を表示する領域の指定9個もあるんですね!とはいえ、目的別に大きく分けると3種類しかありません。background・・・一式まとめて設定background-color・・・背景色の指定background-image(とその関連プロパティ)・・・画像の設定こう見ると簡単ですね!今回はこの3種類に分けて、使い方を見ていきましょう。画像や色をまとめて設定するのならbackgroundを使用しましょう。[origin];このように、スペース区切りで他のプロパティに該当する要素を入力することで、まとめて設定が行えます。bodyに対して背景色と画像をまとめて設定するなら以下の通りです。#9999bb;}一行でかけて便利ですね!しかし可読性の面を考えた時に、あまりに長くなりそうな場合は、各要素個別で書いたほうが良いかと思います。背景色を設定!「background-color」background-colorでは背景色の設定が行えます。[color];colorの指定方法に幾つかの方法があります。*/よく使われるのはこの4種類でしょうか。16進数などがわからない初心者はRGB形式の色指定が、わかりやすいのではないでしょうか。赤(Red)・緑(Green)・青(Blue)のRGBです。それぞれの色の強さを、0〜255で指定すれば簡単に色合いを調整できますよ!背景に画像を設定!それ以外のbackground-image関係のプロパティは、背景に画像を指定した際の挙動に関するものです。こちらは、長くなるため、別記事としてまとめました。綺麗にまとめていますので、ぜひ参考にしてみてください。見栄えが劇的に変わる手法たち!ここからは初心者向けに、背景の設定時に、見栄えをよくすることができるテクニックをまとめておきました。参考にしてみてください。グラデーションで彩ろう!実は、背景に指定できる色は単色だけではありません。linear-gradientプロパティを活用すればグラデーションをかけることも可能なのです。グラデーションをかけると見栄えがよくなりますね!画像の上にかけたりすると、とてもおしゃれになりますよ!こちらの記事でまとめていますので、参考にしてみてください。強調枠を作ろう!背景色と枠を組み合わせれば、以下のような強調枠が簡単に作れます!ぜひ活用してみましょう。*/}角枠の丸め方・borderについてわからない人は、以下の記事で学んでみてください。2018年11月27日サイト全体の背景として設定するには?サイト全体の背景画像に、画像を活用するとおしゃれなサイトが作れます。こんな画像を...こんな風に繰り返し表示させれば、ギザギザ背景のサイトも作れます。以下の記事で、画像をループさせて表示する方法や、ループさせるための画像作成の話などをまとめておきました。参考にしてみてください。2019年7月7日まとめいかがでしたか。今回は、背景設定を行うbackgroundについて見てきました。おしゃれなサイトを作るためには欠かせない機能です。今回の内容を活用して、理想のサイトを開発してみましょう!お役に立てたのなら幸いです。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人sato学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。