CSSで背景を彩ろう

今回は背景に色を付けたり、画像を設定したりします
背景が変わることで、Webサイトの印象が大きく変わります。文字の読みやすさに注意しながら、背景を選んでいきましょう

今回の記事

背景に色を付けよう「background-color」プロパティ
背景に画像を設置しよう「background-image」プロパティ
- 背景画像の繰り返し表示「background-repeat」プロパティ
- 背景画像の大きさを指定「background-size」プロパティ
- 背景画像の位置指定「background-position」プロパティ
- 背景関連プロパティをまとめて指定「backgroundプロパティ」
上級者編?!背景画像のカスタマイズ
- 背景画像にブレンドモードで色を重ねる
- 背景をグラデーションカラーにする
- 背景画像にブレンドモードでグラデーションカラーを重ね合わせる
写真素材、背景画像をダウンロードできるオススメWebサイト

背景に色を付けよう「background-color」プロパティ

背景に色を付けるには、**「background-color」**プロパティを使います。色の指定方法は文字に色をつけるときと同じく、カラーコードや、色の名前を書きます。

文字の色の付け方はこちらを参考にしてください
CSSで華やかなサイトにしたい②～文字や文章の装飾、Webフォントの使い方～
文字に色を付けてみよう「colorプロパティ」

主な値

指定方法	説明
カラーコード	「#(ハッシュ)」で始まる3桁もしくは6桁のカラーコード指定
色の名前	「red」「blue」などの決められた色の指定
RGB値	「rgb」から書き始め、赤、緑、青の値を「,(カンマ)」で区切って指定。透明度も含める場合は「rgba」から書き始め、赤、緑、青、透明度の値を「,(カンマ)」で区切って指定。透明度は0~1の間で記録する。

ページ全体の背景に色を付けるなら＜body＞タグに対して指定します。

HTML

   <h1>猫の好きな事</h1>
   <h2>毛づくろいをすることが好き</h2>
   <p>毛づくろいの目的はいくつかありますが、舌にある無数の突起をブラシ代わりにして、体を清潔にすることが大半。
    猫は、起きている時間の30〜50％を毛づくろいに費やすほどキレイ好きなんです。　 
   </p>

ページ全体に色付け：CSS

body{
    background-color: pink;
}

またタグや、クラスごとに背景色を設定することもできます。

ページ全体に色付け：CSS

h1{
    background-color: rgb(255, 183, 195);
}
h2{
    background-color:#fc5ba1 ;
}
p{
    background-color:#ff3845 ;   
}

背景に画像を設置しよう「background-image」プロパティ

background-imageプロパティで、要素の背景に画像を設置します。画像がちゃんと読み込まれなかったときのことも考え、背景画像と同時に同じような色合いの背景色も指定すると良いでしょう。

主な値

指定方法	説明
url	画像ファイルの指定
none	背景画像を設定しない

「url」に続いて丸かっこ()内に画像のパスを記述します。CSSファイルから見た画像の位置を書きましょう。

ファイルパスについてはこちらを参考にしてください
HTMLの基本的な書き方をマスターしよう-ファイルパスの指定

背景画像：CSS

body{
    background-color: whitesmoke;
    background-image: url(../img/bg.png);
}

ページ全体に背景が設定されます。

背景画像の繰り返し表示「background-repeat」プロパティ

CSSのデフォルトの設定では背景画像を縦と横に繰り返し表示し、画面いっぱいに画像を敷き詰めます。これをどの方向に繰り返すか、または繰り返さないかをbackground-repeatプロパティで設定できます。

主な値

指定方法	説明
repeat	縦・横ともに繰り返して表示
repeat-x	横方向に繰り返して表示
repeat-y	縦方向に繰り返して表示
no-repeat	繰り返さない

例えば先ほど背景に設定した画像は以下の模様の画像を繰り返して作ることができます

「repeat-x」で横一列に画像を並べてみます。

背景横一列繰り返し：CSS

body{
    background-image: url(../img/jade.jpg);
    background-repeat: repeat-x;
}

「repeat-y」で縦一列に画像を並べてみます。

背景縦一列繰り返し：CSS

body{
    background-image: url(../img/jade.jpg);
    background-repeat: repeat-y;
}

repeatで設定すれば、模様を繰り返して背景画像を作ることができますね

背景画像の大きさを指定「background-size」プロパティ

background-sizeプロパティで背景サイズを指定します。元の画像の比率を維持したまま要素に当てはめたり、指定したサイズに引き延ばしたりもできます。

主な値

指定方法	説明
数値	数値に「px」や「rem」、「%」などの単位をつける
キーワード	「cover」、「contain」で指定

「cover」を使うと、画像の縦横比を保持したまま、表示領域をうめつくすように背景画像を表示できます。表示領域より画面が大きい場合は画面が切れます。

例：こちらの画像を背景画像として設定してみます

背景画像大きさ：CSS

body{
    background-image: url(../img/bg-palmtree.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    height: 100vh;
}

要素サイズいっぱいに画面が広がりますが、画像の下部分が切れます。

「contain」では、画像の縦横比を保持したまま、画像すべて表示されるように表示できます。表示領域のほうが画像より大きい場合は余白ができます。

背景画像大きさ：CSS

body{
    background-image: url(../img/bg-palmtree.jpg);
    background-repeat:no-repeat;
    background-size: contain;
    height: 100vh;
}

画像がすべて表示されましたが、右側に余白ができました。

背景画像の位置指定「background-position」プロパティ

background-positionプロパティで背景画像を表示する開始位置を指定します。基本的に横方向、縦方向の順にスペースで区切って記述します。デフォルトでは左上(left top)が表示開始位置です。

主な値

指定方法	説明
数値	数値に「px」や「rem」、「%」などの単位をつける
キーワード	横方向は「left(左)」、「center(中央)」、「right(右)」、縦方向は「top(上)」「center(中央)」「bottom(下)」

表示する位置が画面の四隅なら、キーワードで指定すると良いでしょう。

背景画像の位置：CSS

body{
    background-image: url(../img/jade.jpg);
    background-repeat:no-repeat;
    background-position: center top;
}

画面の上部、真ん中に表示しました。

背景画像の位置：CSS

body{
    background-image: url(../img/jade.jpg);
    background-repeat:no-repeat;
    background-position: 30px 80px;
}

画面の左から30px、上から80pxの位置に表示しました。

背景関連プロパティをまとめて指定「backgroundプロパティ」

backgroundプロパティを使えば、背景色や、背景画像、サイズ、繰り返し表示など、背景に関するすべての値を一括で設定できます。すべてのプロパティを指定する必要はありません。指定していないものは初期値が適応されます。

一括指定できるプロパティ

background-clip
background-origin
background-size
background-color
background-position
background-attachment
background-image
background-repeat

「background-size」の値は「background-position」の直後に「/(スラッシュ)」で区切る必要があります。

一括指定：CSS

body{
    background: aliceblue url(../img/bg-palmtree.jpg) no-repeat 
    center bottom/cover;
    height: 100vh;
}

上級者編?!背景画像のカスタマイズ

背景画像に少し手を加えてカスタマイズしてみましょう
色を重ねたり、グラデーションカラーなどを使って、背景画像を華やかにしていきたいと思います。

背景画像にブレンドモードで色を重ねる

複数の画像や色を様々な手法で重ね合わせ、独特の効果を生み出す機能を**「描画モード(ブレインモード)」**といいます。
background-blend-modeプロパティを使い、値に加えたい効果の名前を指定すれば利用できます。

主な値

値	ブレインモード
multiply	乗算
screen	スクリーン
overlay	オーバーレイ
darken	暗く
lighten	明るく
color-dodge	覆い焼きカラー
color-burn	焼きこみカラー
hard-light	ハードライト
soft-light	ソフトライト」
difference	差の絶対値
exclusion	除外
hue	色相
saturation	彩度
color	カラー
luminosity	輝度

1つ例を見てみましょう。今回はメインカラーである青を全面に、明るい色合いで表示したかったので、「hard-light」の値を使いました。

ブレインモード、ハードライト：CSS

body{
    background-image: url(../img/bg-palmtree.jpg);
    background-color: #0bd;
    background-position: center bottom;
    background-size: cover;
    background-blend-mode: hard-light;
    height: 100vh;
}

爽やかな印象になりましたね

背景をグラデーションカラーにする

テーマカラーをうまく取り入れて美しいグラデーションを実施しましょう。グラデーションはbackground-imageプロパティに**「linear-gradient」**の値を使い、カンマ「,」で区切って異なる色を指定します。直線上に伸びるグラデーションではなく、円形のグラデーションを実施するには、「radial-gradient」を使います。

主な値

値	グラデーションの形状
linear-gradient	線形グラデーション
radial-gradient	円形グラデーション

例：#c9ffbf(明るい黄緑)から#ffafbd(明るいピンク)へのグラデーションです。

グラデーションカラー：CSS

body{
    background-image: linear-gradient(#c9ffbf,#ffafbd);
    min-height: 100vh;
}

背景画像にブレンドモードでグラデーションカラーを重ね合わせる

背景画像にグラデーションカラーを重ね合わせることもできます。「background-blend-mode」でブレンドモードを指定するところは変わりませんが、background-imageプロパティで背景画像とグラデーションカラーをカンマ「,」で区切って両方指定するところがポイントです。

ブレンドモードでグラデーションカラー：CSS

body{
    background-image: url(../img/bg-palmtree.jpg),linear-gradient(#c9ffbf,#ffafbd);
    background-blend-mode: luminosity;
    background-position: center bottom;
    background-size: cover;
    background-blend-mode: hard-light;
    height: 100vh;
}

写真素材、背景画像をダウンロードできるオススメWebサイト

背景画像にお勧めな画像がダウンロードできるオススメサイトです。以下のサイトは気軽に使える無料版です。

The Pattern Library

上の例で利用した模様の画像はこちらのサイトから使いました。背景用パターンが無料でダウンロードできます。可愛らしいものからユニークなものがあります。

StockSnap.io

上の例で使用したヤシの木の風景画像はこちらのサイトから使いました。著作権制限のない、パブリックドメインの写真を集めたWebサイトです。海外のサイトで、おしゃれなデザインが多く、クオリティが高いものが多いです。

参考文献

Mana著、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、SBクリエイティブ株式会社、2019年