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

前回に引き続き backgroundについて
今回は background-clipbackground-origin について詳しく見てみましょう。

本日のINDEX
  1. clip は範囲、origin は基点
  2. background-clipプロパティ
    1. 画像を複数使った場合の background-clip の指定は?
  3. background-originプロパティ
    1. 画像を複数使った場合の background-origin の指定は?
  4. background-size: cover との関係

backgroundについての記事は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のプロパティを一括でまとめられます

clip は範囲、origin は基点

background-clipbackground-origin の値は同じで「border-box」「padding-box」「content-box」という3つのキーワードだけです。
では、background-clip と background-origin の違いはなんでしょう?

background-clipは、色も画像も どこまで塗る(貼る)かの 範囲 を決めます。

デフォルトはborder-box。要素のボーダーの範囲まで背景が塗られます。
padding-box
で、要素のpaddingの範囲まで背景が塗られます。
content-boxでは、背景は要素のコンテンツの範囲まで狭められます。

background-originは、画像をどこから始めるかの 基点 を決めます。

border-boxは、要素のボーダーの境界が画像を貼付ける基点になります。
デフォルトはpadding-boxで、要素のpaddingの境界が基点になります。
content-boxでは、背景は要素のコンテンツの境界が基点になって画像が貼付けられます。

さて、ざっと概要がわかったところで、いつものようにサンプルで確認してみよう。

background-clipプロパティ

background-clipは、色も画像も、どこまで塗る(貼る)かの 範囲 を決めます。

この background-clipは、ほかの background 関連のプロパティと違って、唯一 背景色にも効くんです。範囲なので。他のは色は関係ないけど。これ重要。

背景色(background-color)だけのサンプルです。色をつける範囲を変えられますね。

border-box(デフォ)

padding-box

content-box

background-clipの値は3つのキーワードだけです。

background-clip の値
border-box デフォルト値。ボーダーの範囲まで背景が塗られます。
padding-box paddingの範囲まで。
content-box コンテントの範囲まで。
値の継承 なし 適用できる要素 全部

次に background-clip の画像を使ったサンプルを見てみましょう。
画像の場合は「background-origin」の値も関わり合ってくるので、ちっと複雑ですが、じっくり見てください。

サンプルの画像2つは、上の画像は no-repeat、下は repeat にしています。

↓この最初のサンプルは、border-box のはずなのに 上になってる画像(赤い花)の表示は padding-box ですね。
 これは background-originのデフォルト値が絡んでいます。詳しくはこちら

border-box(デフォ)

padding-box

content-box

<div id="smp2">
<p>border-box</p>
<p>padding-box</p>
<p>content-box</p>
</div>
div#smp2 {margin:0; padding:0;}
div#smp2 p {
    border:10px dashed rgba(0,0,0,0.2); /*ボーダーの指定*/
	padding:10px;  /*パディングの指定*/
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif); /*2つの画像*/
	background-repeat:no-repeat,repeat} /*上の画像はno-repeat、下はrepeatに*/
div#smp2 p:nth-child(1) {background-clip:border-box;}
div#smp2 p:nth-child(2) {background-clip:padding-box;}
div#smp2 p:nth-child(3) {background-clip:content-box;}

一番最初のサンプルについて
下の画像(repeatしているグリッド画像)はボーダーの背景にも貼られていますが、赤い花の画像はpaddingから貼られていますね。
これは background-origin(画像を置く基点)のデフォルトが padding-box だからです。
下のグリッド画像も background-origin は同じく padding-box なのですが、リピートされているので、上側や左側のボーダーの下にも画像があるんです。

3番目のサンプルをよく見ると、赤い花の画像の左と上部が少しトリミングされています。
これも background-origin のデフォルトが padding-box だから起きている現象です。
画像が貼られる基点は padding の左上の角ですが、表示の範囲は content 部分なので、左と上が欠けているんですね。

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

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

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

ただし、background-clipは、ほかの background関連のプロパティと違って 背景色にも効くので「背景色の指定をどうするか」がポイントですね。

背景色は、一番最後の画像の background-clip の指定と一緒になります。
背景色だけは個別に指定できないんですね。画像は1つずつバラバラに指定できるけど。

サンプルです。
画像はすべて no-repeat、画像を置く基点(background-origin)は border-box にしています。

padding-box, border-box

content-box, padding-box

border-box, content-box

div#smp2_1 {margin:0; padding:0;}
div#smp2_1 p {
	border:10px dashed rgba(0,0,0,0.2);
	padding:10px;
	background-color:#ddd;
    background-origin:border-box;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像は両方ともno-repeatにしています*/
div#smp2_1 p:nth-child(1) {background-clip:padding-box,border-box}
div#smp2_1 p:nth-child(2) {background-clip:content-box,padding-box}
div#smp2_1 p:nth-child(3) {background-clip:border-box,content-box}

background-originプロパティ

background-originは、画像をどこから始めるかの 基点 を決めます。
値は、background-clipと同じ3つのキーワードだけです。

background-origin の値
border-box ボーダーの境界が基点になります。
padding-box デフォルト値。paddingの境界が基点になります。
content-box コンテントの境界が基点になります。
値の継承 なし 適用できる要素 全部

background-origin のサンプルです。
画像は2つ指定して、上の画像は no-repeat、下は repeat に指定しています。
リピートしている画像も、基点が微妙に変わっているのがわかります。

border-box

padding-box(デフォ)

content-box

<div id="smp3">
<p>border-box</p>
<p>padding-box</p>
<p>content-box</p>
</div>
div#smp3 {margin:0; padding:0;}
div#smp3 p {
    border:10px dashed rgba(0,0,0,0.2);  /*ボーダーの指定*/
	padding:10px;  /*パディングの指定*/
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif); /*2つの画像*/
	background-repeat:no-repeat,repeat;} /*上の画像はno-repeat、下はrepeatに*/
div#smp3 p:nth-child(1) {background-origin:border-box;}
div#smp3 p:nth-child(2) {background-origin:padding-box;}
div#smp3 p:nth-child(3) {background-origin:content-box;}

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

background-origin値を「,(カンマ)」で区切って複数の画像を別々に指定することができます。

サンプルで見てみましょう。画像は両方ともno-repeatにしています。

padding-box,border-box

content-box,padding-box

border-box,content-box

div#smp3_1 {margin:0; padding:0;}
div#smp3_1 p {
	border:10px dashed rgba(0,0,0,0.2);
	padding:10px;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像は両方ともno-repeatにしています*/
div#smp3_1 p:nth-child(1) {background-origin:padding-box,border-box;}
div#smp3_1 p:nth-child(2) {background-origin:content-box,padding-box;}
div#smp3_1 p:nth-child(3) {background-origin:border-box,content-box;}

background-size: cover との関係

最後に、ちょっと気になっていることをメモっておきます。
background-size: coverbackground-origin の組み合わせると、
cover して余ったほう(下のサンプルでは画像の左右)が、そのまま padding や border の背景に表示されてしまうんです。上下は background-origin の指定どおりになるのにね。
これは background-clip がデフォルトの border-box だから...? じゃあなんで上下は効いてるんだろう。

background-origin: border-box
これはまとも

background-origin: padding-box
左右がはみ出てる

background-origin: content-box
左右がはみ出てる

background-size:coverbackground-origin を同時に指定する時は、 background-originと同じ値のbackground-clipも指定する必要があるようです。これでうまくいきます。

-origin も -clip も border-box

-origin も -clip も padding-box

-origin も -clip も content-box

div#smp4 {margin:0; padding:0;}
div#smp4 p {
	border:10px dashed rgba(0,0,0,0.2);
	padding:10px;
	background-color:#ddd;
	background-image:url(images/bg05.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover}
div#smp4 p:nth-child(1) {background-origin:border-box; background-clip:border-box}
div#smp4 p:nth-child(2) {background-origin:padding-box; background-clip:padding-box}
div#smp4 p:nth-child(3) {background-origin:content-box; background-clip:content-box}

次回予告

次回は、これまで見てきた background関連のプロパティを一括でまとめるショートハンドプロパティ「background」について。
画像が複数でも、グラデーションと画像の組み合わせでも、全部一本にまとめることができます。

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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.