column

ITコラム

colmun_main4787

プログラミングノウハウ

2017.04.26

CSS【 background 】7~背景に関するショートハンドプロパティ

background-colorプロパティやbackground-sizeプロパティなど、背景に関するプロパティは数多くありますが、backgroundプロパティで、それらの指定をまとめて行うことができます。
今回は、backgroundプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1~背景プロパティの種類とbackground-color
CSS【 background 】2~background-imageでレイヤーやグラデーションも
CSS【 background 】3~background-repeat、background-attachment
CSS【 background 】4~background-position
CSS【 background 】5~background-size
CSS【 background 】6~background-clip、background-origin
CSS【 background 】7~背景に関するショートハンドプロパティ(本ページ)

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. backgroundプロパティ

backgroundプロパティは、背景に関する各プロパティの指定をまとめて行うことができるショートハンドプロパティです。

backgroundプロパティで指定できるプロパティは、次の通りです。

background-color 背景の色を指定するプロパティ
値:CSSの色指定(カラーネーム、RGB、HSL)、transparent(透明)、currentColor(文字色)
デフォルト値:transparent(透明)
background-image 背景画像を指定するプロパティ
値:url(“画像のURL”)
デフォルト値:none(背景画像なし)
background-repeat 画像の繰り返し方法を指定するプロパティ
値:repeat-x、repeat-y、repeat、no-repeat、space、round
デフォルト値:repeat
background-attachment スクロール時の背景画像の挙動を指定するプロパティ
値:fixed、scroll、local
デフォルト値:scroll
background-position 画像表示位置を指定するプロパティ
値:数値(pxやemなどの単位を付ける)、%、top、right、bottom、left、center
デフォルト値:0 0
background-size 画像表示サイズを指定するプロパティ
値:数値(pxやemなどの単位を付ける)、%、auto、contain、cover
デフォルト値:auto
background-clip 背景の範囲を指定するプロパティ
値:border-box、padding-box、content-box
デフォルト値:border-box
background-origin 画像配置の基準位置を指定するプロパティ
値:border-box、padding-box、content-box
デフォルト値:padding-box
background ショートハンドプロパティ
指定したい値を半角スペースで区切って指定する
sizeはpositionとセットでposition/sizeという順番でスラッシュで区切って指定する
originはclipの前に指定する
上記以外の指定は順不同

▲目次へ戻る

2. sizeとposition、originとclip

backgroundプロパティは、ほとんどの内容については、指定したい値を、順番を気にせずに、半角スペースで区切って指定すればOKですが、次の2点だけ、特別なルールがあります。

• sizeを指定する場合は、必ずpositionとセットで、「position/size」という形で指定します。
 (positionは、単独で指定できます。)

• originとclipを両方指定する場合は、「origin clip」の順番に指定します。
 (どちらか1つのみ指定する場合は、両方が同じ値となります。)

sizeとpositionは、他のプロパティと違って複数の値を半角スペース区切りで指定できるため、このルールがないと、何の値かをブラウザが認識できなくなるので、上記のルール(position/size)が存在します。

originとclipは、値がどちらも3つのキーワード(border-box、padding-box、content-box)のみのため、このルールがないと、どのプロパティに対する値かをブラウザが認識できなくなるので、上記のルール(origin clip の順に指定)が存在します。

▲目次へ戻る

3. 背景画像を複数指定

各プロパティで指定した背景は、レイヤー構造となります。
画像やグラデーションを複数指定する場合は、上から順に画像が重なり、background-colorプロパティで指定した背景色は一番下のレイヤーとなります。

backgroundプロパティで画像等を複数指定する場合は、レイヤーごとにカンマ(,)で区切って指定し、最後のレイヤーだけbackground-colorを指定します。

次の3つの画像を、上から順に、上(img1.jpg)、中(img2.jpg)、下(img3.jpg)の順に重ねてみます。


上:ヨット(img1.jpg)
中:カモメ(img2.jpg)
下:模様(img3.jpg)

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
	margin:0;
	padding:2em;
	color:#FFF;
	font-weight:bold;
	height:15em;
	border-top: solid 25px rgba(255,255,255,.5);
	background:
	url(img/img1.jpg) no-repeat right 5px top 5px/auto padding-box border-box,
	url(img/img2.jpg) repeat-x -20px 5px/40px 40px border-box,
	url(img/img3.jpg) 0 0/15px border-box #FFD9D9;}

<!-- HTMLファイル -->
<div id="sample">
上:ヨット(img1.jpg)
中:カモメ(img2.jpg)
下:模様(img3.jpg)
</div>

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ