[初心者用]CSSで背景(background)要素の変更の仕方を徹底解説

あらすじ

ウェブサイト制作やホームページ制作において、ページの背景は非常に重要な要素の一つです。
 
ページの背景が見づらいだけで、ユーザーがページを離脱してしまう可能性だってありますし、逆に見やすければアクセス数も上がることだってあります。

そこで、今回はそんな背景を装飾する際に利用するCSSのプロパティをご紹介していきたいと思います。

そもそもCSSが分からない！といった方はこちらの記事をご覧くださいfa-arrow-circle-down

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。 今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。 具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例 といった項目に分けてご紹介していきます。...

背景色を指定するbackground-colorプロパティ

background-colorプロパティとは、背景色を指定する際に利用するプロパティです。

色の指定方法はcolorプロパティと同じで、色の名前やHEX値などの方法があります。

色の指定方法に関しての詳しい情報はこちらをご覧くださいfa-arrow-circle-down

CSSの色を指定する方法には何がある？HEX値、RGBA値、HSLA値について

2019.9.9

あらすじ みなさんはCSSで色の値を指定する際はどのように指定していますか？ 色の名前で指定する人もいれば、HEX値で指定する人もいると思います。 実はそれ以外にも指定方法はいくつかあリます。 今回はそんな色の指定方法について詳しくご紹介していきたいと思います。 そもそもCSSが分からない！...

実際の記載方法は下記の通りです。

記載方法background-color: green;

背景画像を指定するbackground-imageプロパティ

background-imageプロパティは、背景の画像だったり、グラデーションを反映させることができるプロパティです。

具体的には

の3種類を指定することが出来ます。

url()

urlのあとのカッコ内には、画像のパス(保存先)を記載します。

具体的には

記載方法background-image: url (“画像のパス”)

といった風に記載します。

linear-gradient()

linear-gradientとは直線上にグラデーションを加える際に利用する値です。

()内には方向や色を指定することで、グラデーションを加えたい方向や加えたい色を指定することが出来ます。

記載方法background-color: linear-gradient (to right, red, pink, white);

といった場合は、赤：ピンク：白といった順番で、右方向に向かってグラデーションが加わります。

radial-gradient()

radial-gradientとは円形にグラデーションを加えることのできる値です。

()内には円形の形を指定できるcircle(円)とellipse(楕円形)のどちらかを選ぶことができ、デフォルトではellipse(楕円形)となっています。

また、色を指定することで色のグラデーションもlinear-gradient同様に加えることができます。

記載方法background-color: radial-gradient (circle, red, pink, white);

の場合だと、円の形をし、円の中心から赤、ピンク、白と外に向かっていくグラデーションの背景を表します。

背景画像の固定の有無を指定するbackground-attachmentプロパティ

background-attachmentプロパティとは、背景の画像をスクロールした際に、スクロールに合わせて画像を移動させたり、固定させたりを選択することが出来ます。

基本的には

の2つがよく使われています。

fixed

fixedとは画面をスクロールしても画像の配置は変わることがないようにする際に指定する値です。

記載方法background-attachment: fixed;

scroll

scrollとはスクロールに合わせて画像も移動するように配置したい時に指定する値です。

記載方法background-attachment: scroll;

背景画像の位置を指定するbackground-positionプロパティ

background-positionでは背景画像の位置を正確に指定することができます。

指定方法は

といったものがあります。

方向(top, bottom, right, left, center)

方向はtop(上)、 bottom(下)、right(右)、left(左)、center(中央)の5つの内から組み合わせて指定することができます。

例えば、right topであれば右上に位置し、left bottomであれば左下となります。

また、leftやright、topといった、一単語での指定の場合は、自動的に

と、2つ目の値がcenterとなります。

長さ(px, %)

長さではpx(ピクセル)や%(パーセント)を使用することができます。

左上をスタート地点とし、そこからの長さを指定することができます。

記載方法background-position: 10px (横) 10px (縦);

記載方法background-position: 50% (横) 70% (縦);

と、一つ目の値は左上から横に10px, 縦に10pxとなり、二つ目の値は左上から横に50%、縦に50%となります。

また、指定した初めの値は横の値になり、次の値は縦の値になります。

背景画像の繰り返し表示を指定するbackground-repeatプロパティ

background-repeatプロパティでは、背景画像の繰り返しを指定することができます。

主に、

といった要素を指定することができます。

repeat

このrepeatとは、その名の通り背景画像をリピートさせたい時に使用する値です。

デフォルトではこのrepeatが指定されています。

記載方法background-repeat: repeat;

no-repeat

このno-repeatとは背景画像を繰り返し表示させたくない際に使用します。

記載方法background-repeat: no-repeat;

repeat-x

repeat-xは背景画像を横に繰り返し表示させたい際に指定する要素です。

記載方法background-repeat: repeat-x;

repeat-y

repeat-yは背景画像を縦に繰り返し表示させたい際に指定する要素です。

記載方法background-repeat: repeat-y;

space

spaceを指定すると、画像は繰り返し表示され、画像と画像の間には均等にスペースができるよう配置されます。

記載方法background-repeat: space;

round

roundでは、spaceと同様に繰り返し表示されますが、画像と画像の隙間にはスペースはなく、びっしりと画像を配置することができます。

記載方法background-repeat: round;

背景画像のサイズを指定するbackground-sizeプロパティ

背景画像のサイズを指定する方法には主に以下の方法があります。

それぞれについて詳しく見ていきます。

auto

autoはデフォルトの値となり、画像の元サイズを維持したまま表示させたい際に使用します。

記載方法background-size: auto;

長さ(px, %)

画像のサイズはpx(ピクセル)と%(パーセント)で指定することができます。

記載方法background-position: 10px (横) 10px (縦);

記載方法background-position: 50% (横) 70% (縦);

contain

containとは日本語に訳すと含めるという意味になります。

この要素は画像が全て表示されるようにサイズ調整してくれる値となります。

記載方法background-position: contain;

cover

coverとは画面いっぱいに画像を表示する際の値です。

画像サイズがもともと小さいと、拡大した際に画像が荒くなるのが特徴です。

記載方法background-size: cover;

まとめ

いかがだったでしょうか。

背景の装飾だけでも色々な種類があるのをお分かりいただけたかと思います。

すベてを使いこなせるようになる必要はありませんが、一つでも覚えておくと便利ですので、ぜひ活用してみてください。