【15-1】background関連のプロパティ(1/4)

ボックスモデル に関係するプロパティを margin, padding, border と見てきましたが、今回から background です。
background は要素の背景色背景画像背景グラデーションを指定します。
背景画像の場合はその繰り返しかた、位置、サイズなども指定できます。

background は下の右側の図のように、borderの範囲までできるのがデフォルトです。
ただし background-clipプロパティを使って、この範囲をpaddingまでや、コンテンツボックスまでに狭めることも可能です。

デフォルトの背景の範囲をこのサンプルで確認してみましょう。
borderを白の半透明にしています。
ちゃんとborderの下まで背景色がありますね。

p#smp0 {
	background-color:#adeefe;  /*背景色を指定しています*/
	border:10px solid rgba(255,255,255,.5);} /*borderを白の半透明に*/

background は昔からあるプロパティですが、CSS3から新しい値やプロパティが追加されたりして、盛りだくさんなので記事を5回に分けます。

【15-1】background関連のプロパティ(1/4) ←今日はココ
backgroundのプロパティと値の一覧/background-color/background-image/background-repeat/background-attachment
【15-2】background関連のプロパティ(2/4 background-position)
background-position
【15-3】background関連のプロパティ(3/4 background-size)
background-size
【15-4】background関連のプロパティ(4/4 clip と origin)
background-clip/background-origin
【15-5】backgroundのショートハンド まとめ
たくさんあるbackgroundのプロパティを一括でまとめられます
本日のINDEX
  1. backgroundのプロパティと値の一覧
  2. background-colorプロパティ
  3. background-imageプロパティ
    1. 複数の画像を「,(カンマ)」で区切って指定
    2. 背景グラデーションを指定するのもコレ
  4. background-repeatプロパティ
    1. 画像を複数使った場合の background-repeat の指定は?
  5. background-attachmentプロパティ
    1. 画像を複数使った場合の background-attachment の指定は?

backgroundのプロパティと値の一覧

まずは background関連の全プロパティと値の一覧です。

プロパティ 概要
background-color 背景の色 CSSの色指定(カラーネーム、RGB(16進数,10進数)、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
デフォルトはborder-box
background ショートハンド
プロパティ
値を半角スペースで区切てまとめる。
sizeはpositionとセットで「position/size」という順番でスラッシュで区切って。originはclipの前。それ以外は順不同

これらのプロパティを上から順番に紹介していきます。今回は1〜4番目までね。

background-colorプロパティ

background-colorプロパティは、要素の背景色を指定します。

background-color の値
CSSの色指定 カラーネーム、RGB(16進数,10進数)、HSLなどのCSSの色指定で。
CSSの色指定については、
【8】CSSの「色」と「透明度」の指定
  [14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)
に詳しく書いていますのでご覧ください。
transparent デフォルト。透明。rgba(0,0,0,0)と同じ。
background-color を指定していなければ背景色は透明になります
currentColor 文字色(colorプロパティで指定された色)
値の継承 なし 適用できる要素 全部

サンプルで色指定やキーワード値を確認してみます。
5番目の transparent は透明色(デフォルト)、6番目の currentColor は文字色です。

background-color: #fff5ee

background-color: darkkhaki;

background-color: rgba(156,100,210,0.5)

background-color: hsla(181, 100%, 45%, 0.2)

background-color: transparent

background-color: currentColor

<div id="smp2">
<p>background-color: #fff5ee;</p>
<p>background-color: darkkhaki;</p>
<p>background-color: rgba(156,100,210,0.5);</p>
<p>background-color: hsla(181, 100%, 45%, 0.2);</p>
<p>background-color: transparent;</p>
<p>background-color: currentColor;</p>
</div>
div#smp2 {margin:0;}
div#smp2 p {margin:1em 0; padding:0.3em 1em; background-color:#fff5ee;}
div#smp2 p:nth-child(2) {background-color:darkkhaki;}
div#smp2 p:nth-child(3) {background-color:rgba(156,100,210,0.5);}
div#smp2 p:nth-child(4) {background-color:hsla(181, 100%, 45%, 0.2);}
div#smp2 p:nth-child(5) {background-color:transparent;}
div#smp2 p:nth-child(6) {background-color:currentColor;}

キーワード currentColor はその要素の文字色。サンプルでは6番目の指定。文字色は #666 です。
文字色と背景色が同じなので、文字が読めなくなるけど、この値って使い道はあるんだろうか? まいっか(笑)

ちなみに、サンプルで「p:nth-child(2)」というセレクタを使っていますが、これは「2番目のp要素」をセレクタにする という擬似クラスです。
詳しくは【3】id とか classって何?(セレクタの「種類」を知っておこう)をご覧ください。

background-imageプロパティ

background-imageプロパティは、背景に画像グラデーションを指定したいときに使います。

background-image の値
none デフォルト。背景画像無し
background-image を指定していなければ画像やグラデーションは無しになります
url("画像のURL") 画像のURLを指定します
linear-gradient()
radial-gradient()
グラデーションの指定を ()内に書きます
linear-gradientは線形、radial-gradientは円形グラデーションです
値の継承 なし 適用できる要素 全部

背景画像を指定する場合は、画像のURLを指定します。相対でも絶対パスでもOK。
サンプルを見てみましょう。

background-image:url(images/bg01.jpg)
<div id="smp3">
background-image:url(images/bg01.jpg)
</div>
div#smp3 {
	margin:0;
	padding:2em;
	background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/bg01.jpg);}

ここで使っている画像 bg01.jpg はコレ。

background-color(背景色)も指定しています(CSSの4行目)が、background-image で画像を指定すると、レイヤー構造的に背景色の上に画像が乗っかるカタチになります。背景色は、必ず一番下に敷かれるってこと。

複数の画像を「,(カンマ)」で区切って指定

CSS3から、background-image複数の画像を指定できるようになりました。
画像のURLを「,(カンマ)」で区切って指定します。
このとき書き順に注意が必要です。先に書いた画像が上に乗ります。
例えば background-image: url(images/A.png), url(images/B.png), url(images/C.jpg) と書いたなら、A.png が1番上、その後 B.pngC.jpg の順番です。

複数の画像を背景に指定
<div id="smp3-1">
複数の画像を背景に指定
</div>
div#smp3-1 {
	margin:0;
	padding:2em;
	background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/bg02.png),url(images/bg01.jpg);}

ここでも背景色 background-color は、一番下に敷かれてますね。見えてないから。
背景に複数の画像を使うなら、CSS3に対応していない古いブラウザのために、background-color も指定しておこう。じゃないとまっ白ののっぺらぼうな背景になるから。

bg02.png はこちらです。

背景グラデーションを指定するのもコレ

CSS3から、background-image で背景にグラデーションも指定できるようになりました。
グラデーションは、CSSでは「固有のサイズを持たない画像」として扱われるのだそうです。
(参考:gradient - CSS | MDN

グラデーションの指定については、こちらで詳しく取り上げていますのでご覧ください。
線形グラデーション:[13-3] サイト背景にCSS3で線形グラデーションをつけよう (CSS使用)
円形グラデーション:[18-4] CSS3で、円形(放射)グラデーションを作ろう (radial-gradient)

サンプルです。

線形グラデーションを背景に指定
<div id="smp3-2">
線形グラデーションを背景に指定
</div>
div#smp3-2 {
	margin:0;
	padding:2em;
	background-color:#9c0;  /*背景色も指定しています*/
    background-image:linear-gradient(#ff9, #9c0);

ここでも背景色 background-color は、グラデーションより下ですね(見えてないから)。
背景にグラデーションを使う場合、CSS3に対応していない古いブラウザで見ている人のために、background-color も指定しておくように。じゃないとまっ白ののっぺらぼうな背景になるから。

background-repeatプロパティ

background-repeatプロパティは、背景に画像を指定したときの、画像の繰り返しかた(repeat = リピート)を指定します。
値はキーワードだけ。CSS3から新しく「space」「round」というキーワードが加わりました。

background-repeat の値
repeat デフォルト。縦横(x, y軸とも)に繰り返します
background-repeat を指定していなければ、画像は横方向・縦方向ともに繰り返します
repeat-x x方向(横)にだけ繰り返す
repeat-y y方向(縦)にだけ繰り返す
no-repeat 繰り返さない。画像を1個だけ表示します
space 領域内にピッタリ収まるようにスペースを空けて調整しながら、縦横(x, y軸とも)に繰り返す
round 領域内にピッタリ収まるようにサイズ調整しながら、縦横(x, y軸とも)に繰り返す
値の継承 なし 適用できる要素 全部

サンプルでキーワードを順に見てみましょう。使用している画像はコレ です。

background-repeat: repeat 縦横に繰り返します

background-repeat: repeat-x x方向(横)にだけ繰り返します

background-repeat: repeat-y y方向(縦)にだけ繰り返します

background-repeat: no-repeat 繰り返し無し

<div id="smp4">
<p>background-repeat: repeat 縦横に繰り返します</p>
<p>background-repeat: repeat-x x方向(横)にだけ繰り返します</p>
<p>background-repeat: repeat-y y方向(縦)にだけ繰り返します</p>
<p>background-repeat: no-repeat 繰り返し無し</p>
</div>
div#smp4 {margin:0;}
div#smp4 p {
	margin:1em 0;
    padding:2em;
    background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/bg03.gif)} /*背景画像を指定しています*/
div#smp4 p:nth-child(2) {background-repeat: repeat-x;}
div#smp4 p:nth-child(3) {background-repeat: repeat-y;}
div#smp4 p:nth-child(4) {background-repeat: no-repeat;}
/*最初の background-repeat: repeat は特に指定していません。デフォなので*/

CSS3から新しいキーワード「space」「round」が加わりました。
spaceは、領域内にピッタリ収まるようにスペースを空けて調整され、
roundは、領域内にピッタリ収まるようにサイズ調整される。
はずなのですが、サンプルを見てみましょう。

background-repeat: space

background-repeat: round

<div id="smp4">
<p>background-repeat: space</p>
<p>background-repeat: round</p>
</div>
div#smp4_2 {margin:0;}
div#smp4_2 p {
	margin:1em 0;
    padding:2em;
    background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/03.gif)} /*背景画像を指定しています*/
div#smp4_2 p:nth-child(1) {background-repeat: space;}
div#smp4_2 p:nth-child(2) {background-repeat: round;}

どうでしょう? Chrome(ver.46), Opera(ver.25)は対応しているようです。Firefox(ver.42)では、両方ともデフォルトの repeat の表示でした。(2016年1月記)

画像を複数使った場合の background-repeat の指定は?

画像を複数使った場合の background-sizeの指定は、それぞれの画像の繰り返しかたをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じく、上になる画像から指定します。

上の画像はno-repeat、下はrepeat
<div id="smp4_3">
複数の画像を背景に指定
</div>
div#smp4_3 {
	margin:0;
	padding:3em 2em;
	background-color:#fff5ee;
	background-image:url(images/bg02.png),url(images/bg03.gif);
    background-repeat:no-repeat, repeat;}

background-attachmentプロパティ

background-attachmentプロパティは、スクロール時の背景画像の挙動を指定します。
attachment は吸着って意味。背景領域への画像のくっつきかたってことです。

background-repeat の値
fixed 描画領域に対して背景画像をそのままの位置で固定
scroll デフォルト。背景画像を一緒にスクロールさせる
background-attachment を指定していなければ、通常どおり背景画像も一緒にスクロールします
local 子要素に指定すると背景画像がテキストと一緒にスクロールする
値の継承 なし 適用できる要素 全部

サンプルを見てください。

background-attachment: fixed 固定




background-attachment: scroll スクロール




background-attachment: local ローカル




まず、このページ全体をスクロールしてみてください。
fixedは、テキストだけ動いて、背景画像はブラウザウィンドウに固定されている状態です。
scrolllocalの背景画像は、他の要素と同じようにテキストも背景画像も一緒に動きます。

では次に、小さいスクロールバー3個をそれぞれ動かしてみてください。
fixedは、ブラウザによって挙動が違うようで、FirefoxとOperaでは、ここでも背景画像は固定されテキストしか動きません。Chromeではテキストと背景画像が逆の向きにスクロールするようです。fixedが子要素の時はブラウザによって挙動が違うようでやっかいですね。

次のscrollですが、背景画像が固定されてスクロールしなくなってます。これはscrollが子要素のときに起こる現象です。子要素にscrollを指定するとfixedのような挙動になります。

新しいlocalは、子要素に指定すると背景画像はテキストと一緒にちゃんとスクロールします。
ちゃんとスクロールすると便利な時もあります。スクロールさせたコラムとかで、ロゴやタイトルを背景画像で配置するなどしたら、固定で残っていたら困るもんね。そんなときには local で。

値の使い方のまとめです。
サイト全体の背景画像を固定したいときはfixedを使う。
(attachmentを指定しなければスクロール。scrollがデフォルト値なので)
サイト内の子要素にスクロールバーを出す場合、背景画像もスクロールさせたければlocalを使う。
(attachmentを指定しなければ背景画像は固定。scrollがデフォルト値で子要素の時は固定だから)

<div id="smp5">
<p>background-attachment: <b>fixed</b> 固定<br><br><br><br><br></p>
<p>background-attachment: <b>scroll</b> スクロール<br><br><br><br><br></p>
<p>background-attachment: <b>local</b> ローカル<br><br><br><br><br></p>
</div>
div#smp5 {margin:0;}
div#smp5 p {
	margin:1em 0;
    padding:2em;
    height:1.8em;  /*スクロールさせたいので高さ指定しています*/
    overflow-y:scroll;  /*スクロールバーを表示しています*/
    background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/03.gif)} /*背景画像を指定しています*/
div#smp5 p:nth-child(1) {background-attachment:fixed;}
div#smp5 p:nth-child(2) {background-attachment:scroll;}
div#smp5 p:nth-child(3) {background-attachment:local;}

*メモ*
background-attachment: fixed を使って、Webページ全面に背景を固定し、background-size: cover で背景画像をウィンドウサイズにフィットさせる指定は、PCブラウザなら何も問題ないのですが、iOS Safari だと background-attachment: fixed が効かない問題が起きます。
これを解決するために、スマホの場合だけ擬似要素「::before」でブロック要素を作って背景を指定する方法があります。
こちら↓に詳しいソースを書いておきましたので、見てみてください。
background-attachment: fixed がスマホで効かない問題は ::before で解決! | *Web Design 覚え書き*

画像を複数使った場合の background-attachment の指定は?

画像を複数使った場合の background-attachmentの指定は、 それぞれの画像のアタッチメントをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じく、上になっている画像から指定します。

サンプルを見てみましょう。

background-attachment: scroll,fixed




background-attachment: local,scroll




background-attachment: scroll,scroll




background-attachment: local,local




<div id="smp5_2">
<p>background-attachment: <b>scroll,fixed</b><br><br><br><br><br></p>
<p>background-attachment: <b>local,scroll</b><br><br><br><br><br></p>
<p>background-attachment: <b>scroll,scroll</b><br><br><br><br><br></p>
<p>background-attachment: <b>local,local</b><br><br><br><br><br></p>
</div>
div#smp5_2 {margin:0;}
div#smp5_2 p {margin:1em 0; padding:2em; height:1.8em; background-color:#fff5ee;
	overflow-y:scroll;
	background-image:url(images/bg02.png), url(images/bg03.gif);
	background-repeat:no-repeat, repeat;}  /*上の画像だけno-repeat*/
div#smp5_2 p:nth-child(1) {background-attachment:scroll,fixed;}
div#smp5_2 p:nth-child(2) {background-attachment:local,scroll;}
div#smp5_2 p:nth-child(3) {background-attachment:scroll,scroll;}
div#smp5_2 p:nth-child(4) {background-attachment:local,local;}

fixed ならサイト全体では固定になり、子要素ではブラウザによって違う。
scroll ならサイト全体ではスクロールし、子要素では固定。
子要素の中でも背景をスクロールさせたければ local を使う。ってことです。

次回予告

次回は background-position について。
background-position は、背景画像の表示位置を指定します。
キーワードで簡単に指定したり、マイナスの数値で位置指定することもできます。
複数の画像を別々に位置指定することも可能です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.