CSSのbackgroudはこれで完璧!見栄えが劇的に変わる手法

みなさんこんにちは!フリーランスプログラマーの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・・・一式まとめて設定
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関係のプロパティは、背景に画像を指定した際の挙動に関するものです。こちらは、長くなるため、別記事としてまとめました。綺麗にまとめていますので、ぜひ参考にしてみてください。

CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説
更新日 : 2019年7月31日

見栄えが劇的に変わる手法たち!

ここからは初心者向けに、背景の設定時に、見栄えをよくすることができるテクニックをまとめておきました。ぜひ参考にしてみてください。

グラデーションで彩ろう!

実は、背景に指定できる色は単色だけではありません。linear-gradientプロパティを活用すればグラデーションをかけることも可能なのです。

gradation1

グラデーションをかけると見栄えがよくなりますね!画像の上にかけたりすると、とてもおしゃれになりますよ!こちらの記事でまとめていますので、参考にしてみてください。

CSSで背景にグラデーションをかける方法を徹底解説
更新日 : 2018年11月27日

強調枠を作ろう!

背景色と枠を組み合わせれば、以下のような強調枠が簡単に作れます!ぜひ活用してみましょう。

.frame {
    width: 300px;               /* 幅指定 */
    height: 100px;              /* 高さ指定 */
    border: dashed 5px #ffa500; /* 枠線指定 */
    background-color: #fff9f4;  /* 背景色指定 */
    border-radius: 10px;        /* 角丸指定 */
}

角枠の丸め方・borderについてわからない人は、以下の記事で学んでみてください。

【CSS入門】borderを使いこなすための3つのステップ
更新日 : 2019年4月30日
CSSのborder-radiusで要素を角丸にする方法
更新日 : 2018年11月27日

サイト全体の背景として設定するには?

サイト全体の背景画像に、画像を活用するとおしゃれなサイトが作れます。例えば、こんな画像を…

こんな風に繰り返し表示させれば、ギザギザ背景のサイトも作れます。

以下の記事で、画像をループさせて表示する方法や、ループさせるための画像作成の話などをまとめておきました。ぜひ参考にしてみてください。

CSSで背景画像の設定する方法|よく使うテクニック5選
更新日 : 2019年7月7日

まとめ

いかがでしたか。今回は、背景設定を行うbackgroundについて見てきました。おしゃれなサイトを作るためには欠かせない機能です。ぜひ今回の内容を活用して、理想のサイトを開発してみましょう!お役に立てたのなら幸いです。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説