48.実は色々出来る。backgroundプロパティ②　～そんなこともできたのか！～

backgroundプロパティ使いこなしています。

って言ってみたいですね。

昨日に引き続き、やっていきます。

昨日の記事は以下から

47.実は色々出来る。backgroundプロパティ～多様な背景指定でデザインの幅を広げる～ - web制作のしおり

各プロパティを確認する

background-clip

clipは「背景をどこまで表示するか」を指定するプロパティです。

デフォルト値はborder-boxで、これは背景がボーダーを含めた外側の辺まで背景を表示します。(実線では見えませんが、点線にすると確認できます)

その他には

padding-box　パディングの外側、ボーダーの内側まで表示する
content-box　表示内容に合わせた矩形に表示する（インライン要素の背景的な）
text　テキストの形で、背景を切り取って表示。（背景画像を切り絵のようにして文字を書いてるイメージ）

があります。

textなんて全く知らなかったです。これは面白いですね。

background-attachment

attachmentは背景画像の固定とスクロールに関するプロパティです。

デフォルト値はscrollで、背景画像は要素に対して固定されます。

普段使っている背景画像の動きですね。

ページ全体をスクロールしても要素が固定されていれば、動きません。

その他には

fixed　ページをスクロールしても背景は動かない。ずっと同じ位置に画像が表示されるイメージです。
local　一見scrollと同じに見えますが、要素内でスクロール出来る場合背景がスクロールします。

背景固定して、スクロールしてテキストだけ読んでいくデザインは見かけますね。

あれはfixedで実現していたということなんですね。今後使う機会がありそうです。

background-repeat

repeatプロパティも割りとおなじみではないでしょうか。

概ね、no-repeatで使っているのでは？

見ていきましょう。

デフォルト値は repeatです。

これは背景画像を繰り返してタイルのように配置していきます。

その他には

repeat-x　背景画像を横方向にのみ繰り返して表示します。
repeat-y　背景画像を縦方向にのみ繰り返して表示します。
space　縦横両方に収まる最大数を配置して、等間隔に配置。サイズ調整はされず隙間ができる。
round　縦横両方に収まる最大数を配置して、等間隔に配置。隙間ができないようにサイズ調整されます。
no-repeat　繰り返さずに、１回だけ表示されます。

background-size

sizeプロパティ、こちらもよくcontainでお世話になっています。

背景画像のサイズ指定に関するプロパティですね。（そのままですね。

設定次第で、画像が引き伸ばされたり、縦横比を維持したりします。

デフォルト値はauto autoです。

何がオートなんでしょう。

sizeプロパティはキーワードを指定したり、値の場合は２つまで指定できたりします。

因みに値は1番目の値で背景の幅を、２番目の値で背景の高さを指定します。

主なプロパティは

contain　縦横比を維持したまま、配置された場所で背景画像が全体表示できる最大サイズになる。ただし、画像サイズが配置場所より小さい場合は画像が連続配置される。
cover　配置された場所に隙間がないよう最大サイズになる。配置場所と画像の縦横比が異なる場合は、はみ出した分の画像が切り取られる。
auto　基本は元の縦横比を維持して配置され、はみ出したら切り取られ、足りない部分は連続する
数値等　数値をpxやパーセントで指定ます。２つの値を指定する場合、縦横比は維持されません。片方をautoにした場合は縦横比が維持されます。またパーセントしていは配置した領域の幅、高さの割合で指定されます。

ショートハンドで書いてみる

ここまでたくさんのbackground関連プロパティをみてきました。

１つずつ指定するのではなく、１つのプロパティに対して複数の値を指定することができるショートハンドと呼ばれる仕組みを使って簡単に書くことができます。

background : ～～～;としているこのbackgroundがショートハンドだったのです。

例えばこんな形

background : #666 url(./test.png ) no-repeat 0% 25% fixed / cover;

です。

これをいきなりまとめて書かれると何が何やらですが、

今までを振り返ればおのずと見えてきますね。

左から色、画像url、繰り返し、配置箇所、固定、サイズ

他にも指定方法はあるようです。

よく使う設定はスニペットに登録したいですね。

今日のまとめ

背景１つとっても様々な指定ができる
ショートハンドでまとめて指定ができる

backgroundプロパティについて、いろいろと試してきました。

普段使わない値を指定して動きを確認するのも面白いですね。

では、また。