CSSのbackgroundプロパティで背景の表示方法を指定する

生徒

WEBページの背景が思うように設定できないです

先生

CSSのbackgroundプロパティの使い方を説明します

WEBページの背景はCSSのbackgroundプロパティで指定

backgroundに関する主なプロパティ

background-attachmentは背景の固定方法を指定

あわせて読みたい

CSSのbackground-attachmentで背景の固定方法を指定する WEBページの背景が思うように固定できないです CSSのbackground-attachmentで背景を固定する方法を説明します WEBページの背景の固定について WEBページをスクロールし…

background-colorで背景の色を指定

色の名前で指定

原色大辞典

WEB色見本 原色大辞典 – HTMLカラーコード 色の名前とカラーコードが一目でわかるWEB色見本

16進のコードで指定する

赤(Red)緑(Green)青(Blue)の色の三原色の値をそれぞれ16進コード2桁(00〜FF)で設定して色を指定します。

// 赤色
background-color: #ff0000;
// 緑色
background-color: #00ff00;
// 青色
background-color: #0000ff;

使用したい色のカラーコードを調べるには以下のようなサイトが便利です。

HTML Color Codes

HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.

RGB値で指定する

色を指定する

rgb({赤の値}, {緑の値}, {青の値})の形で、赤緑青の各色ごとに0～255の値を指定します。

//赤色
color = rgb(255, 0, 0);
//白色
color = rgb(255, 255, 255);
//黒色
color = rgb(0, 0, 0);

色と透明度を指定する

rgba({赤の値}, {緑の値}, {青の値}, {透明度の値})の形で4番目で透明度を、0 （完全に透明）から 1.0 （完全に不透明）の値で指定します。

//4番目で透明度をしないと透明度は1（完全に不透明）
color = rgb(255, 255, 255);
//赤色で透明度50%
color = rgb(255, 0, 0, 0.5);

HSL値で指定する

hsl()関数は、色の「色相(Hue)」「彩度(Saturation)」「輝度（Lightness)」の3要素の値で色を指定します。

MDN Web Docs

色選択ツール – CSS: カスケーディングスタイルシート | MDN このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 CSS で対応し…

色を指定する

hsl({色相の値}, {彩度の値}, {輝度の値})の形で、赤緑青の各色ごとに0～255の値を指定します。

hsl({色相の値}, {緑の値}, {青の値})

色と透明度を指定する

hsla()関数では、4番目に透明度の値を指定することもできます。

hsla({赤の値}, {緑の値}, {青の値}, {透明度の値})

HSLのメリットとしては、色相を固定してトーンを変えた色を作りやすいなどがあります。

特別なキーワードで指定する

background-image

background-imageプロパティは、背景画像のURLを指定します。

background-clip

background-clipプロパティは、背景画像を表示する範囲を指定します。

border-box、padding-box、content-box

ブロック要素の領域には以下があります。

種類	説明
border-box	要素の境界線（border）の外側の線までを含む領域
padding-box	要素の境界線より内側の領域
content-box	要素のパディングよりも内側の領域

background-clipで指定した領域に関わらず、背景は要素の枠線外側の左上角が起点で描画されます。起点を変えたい場合、background-originプロパティで別に指定します。

background-clip: border-box;

背景は、要素の枠線（border）の外側の線より内側に描画されます。

背景は、枠線よりも下に描かれるので、枠線が点線や透過などでない場合は枠線に隠れて見えません。

background-clip: padding-box;

背景は要素の枠線（border）の内側の線より内側に描画されます。

パディングの領域にも背景が表示されます。

background-clip: content-box;

背景は要素のパディングを考慮した領域の内側に描画されます。

background-clip: text;

-webkit-background-clip: text; color: transparent;などと一緒に指定することで、文字の内側に背景画像を透過して表示します。

background-origin

背景を描画する起点を指定します。

border-box

border-boxを指定すると、枠線外側の左上角が起点になります。

padding-box

padding-boxを指定すると、枠線の内側の左上角が起点になります。

content-box

content-boxを指定すると、パディング領域の内側の左上角が起点になります。

background-position

背景画像の初期位置を設定します。

background-originプロパティで指定した位置が基準で、そこからの位置をbackground-positionプロパティで指定します。

background-repeat

background-repeatプロパティは、背景画像を繰り返す方法を指定します。

no-repeat

背景画像を

repaet

background-repeat: repeat;は、背景画像を隙間なく上下繰り返し並べます。はみ出る部分に付いては切り捨てられます。

repeat-x

背景画像を水平方向にのみ繰り返し並べます。

repeat-y

背景画像を垂直方向にのみ繰り返し並べます。

round

背景画像が切り取らずに隙間なく並ぶサイズに調整されて並びます。

背景画像のサイズの縦横比が変わります。

space

背景画像が4辺に接する形で均等に並びます。

background-size

背景画像の大きさを数値またはキーワードで指定します。

数値で指定

サイズを指定

指定されたサイズになるよう画像を拡大縮小します。

パーセンテージで指定

指定された割合になるよう拡大縮小します。

キーワードで指定

contain

画像を切り取ったり、縦横比を崩したりせずにすむ範囲で最大限の大きさで画像を表示します。余白ができる場合は、画像を余白に並べます。

background-repeat プロパティでno-repeat が指定されている場合は、画像は1個だけ表示されて余白はそのまま残ります。

cover

画像の縦横比は維持して、背景全体を覆うサイズに拡大または縮小します。はみ出る部分は切り取られます。

auto

背景画像の本来の比率が維持されるように、対応する方向に拡大縮小します。