background-(image|size) の深みへようこそ

6,294 views

Published on

CSSイベント「Back to Basics」http://peatix.com/event/105960 で話した、background-image と background-size について解説したスライドです。

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,294
On SlideShare
0
From Embeds
0
Number of Embeds
2,285
Actions
Shares
0
Downloads
9
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

background-(image|size) の深みへようこそ

  1. 1. はじめに この資料はあくまで参考情報です
 正式な文書を読みたい場合は
 http://www.w3.org/TR/ 以下にある
 文書を読んでいただくよう
 お願いします
  2. 2. background- (image|size) の深みへようこそ
  3. 3. 自己紹介 • kubosh(o|0)_? (株式会社グラニ 所属) • Twitter: kubosho_ • GitHub: kubosho • http://blog.kubosho.com
  4. 4. 今日話すこと
  5. 5. background-image と background-size の ブラウザでの挙動から 知る仕様
  6. 6. 以下を参考にした話をします • CSS Backgrounds and Borders Module Level 3
 - http://www.w3.org/TR/css3-background/ • CSS Backgrounds and Borders Module Level 3 (日本語訳)
 - http://www.hcn.zaq.ne.jp/___/WEB/css-backgrounds-ja.html
 - W3C Editor's Draft の日本語訳 • CSS Image Values and Replaced Content Module Level 3
 - http://www.w3.org/TR/css3-images/ • CSS Image Values and Replaced Content Module Level 3 (日本語訳)
 - http://www.hcn.zaq.ne.jp/___/WEB/css-images-ja.html
 - W3C Editor’s Draft の日本語訳
  7. 7. background-image や background-size の のような挙動に 出会ったことはありませんか
  8. 8. 自分はあります
  9. 9. 複数画像のアニメーションを することができない (書き方次第では 何も表示されない)
  10. 10. background ショートハンド プロパティの値に
 background-size の値を含むと 背景に何も表示されない
  11. 11. 具体例
  12. 12. 複数画像のアニメーションを することができない (書き方次第では 何も表示されない)
  13. 13. クロスフェードアニメーション .example  {      width:  400px;      height:  200px;      animation:  crossfade  5s  linear  0s  infinite  alternate;   }   @keyframes  crossfade  {      0%  {          background-­‐image:  url("images/foo.png");      }      100%  {          background-­‐image:  url("images/bar.png");      }   }  
  14. 14. http://jsfiddle.net/ bo5rj0b5/14/
  15. 15. Chrome 46.0.2486.0 dev
  16. 16. Firefox 42.0a2
  17. 17. background ショートハンド プロパティの値に
 background-size の値を含むと 背景に何も表示されない
  18. 18. 以下のように書いたものは .example  {      background-­‐image:  url("images/foo.png");      background-­‐position:  top  left;      background-­‐size:  auto  auto;   }  
  19. 19. こう書くこともできる .example  {      background:  url("images/foo.png")  top  left  /   auto  auto;   }  
  20. 20. https://jsfiddle.net/ 4frxn6uL/
  21. 21. Chrome 46.0.2486.0 dev
  22. 22. Android 4.2.2 Browser
  23. 23. なぜこうなるのか 仕様を読み解いていきます
  24. 24. 複数画像のアニメーションを することができない (書き方次第では 何も表示されない)
  25. 25. そもそも background-image は 仕様上はアニメーションが できない
  26. 26. Firefox の実装が正しい
  27. 27. アニメーションできるプロパティ • background-color • background-position • 単一もしくは複数の値 • background-size • 値に contain, cover, auto を指定している時除く
  28. 28. background ショートハンド プロパティの値に
 background-size の値を含むと 背景に何も表示されない
  29. 29. 仕様の話
  30. 30. 仕様上は background-position の値指定の後に「/」で区切って background-size の値指定が できる
  31. 31. 実装の話
  32. 32. Android 2系では background-size に -webkit- プリフィックスが必要
  33. 33. background ショートハンド プロパティ内に background-size の値を 含めるとスタイル指定が 無効になる
  34. 34. Android 4.3までは background ショートハンド プロパティの値として background-size の値を 内包する記法に対応しないため スタイル指定が無効になる
  35. 35. background-size は background ショートハンド プロパティ内で 指定しないほうが(今は)良い
  36. 36. background-size の安 .example  {      background:  url(“images/foo.png")  top  left  no-­‐ repeat  #fff;      -­‐webkit-­‐background-­‐size:  auto  auto;          background-­‐size:  auto  auto;   }  
  37. 37. プリフィックスは面倒なので Autoprefixer を使うのが良い
  38. 38. 余談
  39. 39. background-* プロパティの 指定を個別でした後に background ショートハンド プロパティを指定した場合 値が上書きされる
  40. 40. https://jsfiddle.net/ 1wfs92e5/3/
  41. 41. より深みへ
  42. 42. background-image
  43. 43. CSS Backgrounds and Borders Module Level 3 より background-image (とその他の背景関連プロパ ティ)の値にカンマ区切りで 複数の値を指定できるように なった
  44. 44. 複数の値を指定するサンプル .example  {      background-­‐image:  url("images/foo.png"),                                          url("images/bar.png");   }  
  45. 45. https://jsfiddle.net/ 1wfs92e5/
  46. 46. background-image は 背景に表示する画像を 指定するだけではない
  47. 47. 背景のレイヤーの数も background-image で 指定された値の数によって 決まる
  48. 48. 背景のレイヤー?
  49. 49. この場合五つのレイヤーがある .example  {      background-­‐image:  url("images/foo.png"),                                          url("images/bar.png"),                                          url("images/baz.png"),                                          url("images/foobar.png"),                                          url(“images/barbaz.png");      /*  background-­‐repeat  の値は五つ指定できる  */      background-­‐repeat:  no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat;   }  
  50. 50. 背景のレイヤーの数によって background-* プロパティの 値を指定できる数が変わる
  51. 51. 背景のレイヤーの数以上に background-* プロパティに 値を指定した場合はどうなる?
  52. 52. .example  {      background-­‐image:  url("images/foo.png"),                                          url("images/bar.png"),                                          url("images/baz.png"),                                          url("images/foobar.png"),                                          url("images/barbaz.png");      background-­‐repeat:  no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat,  no-­‐repeat;   }  
  53. 53. 背景のレイヤーの数以上に background-*プロパティに 値を指定した場合は レイヤーの数以降の 指定が無視される
  54. 54. .example  {      background-­‐image:  url("images/foo.png"),                                          url("images/bar.png"),                                          url("images/baz.png"),                                          url("images/foobar.png"),                                          url("images/barbaz.png");      background-­‐repeat:  no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat,  no-­‐repeat;   }  
  55. 55. .example  {      background-­‐image:  url("images/foo.png"),                                          url("images/bar.png"),                                          url("images/baz.png"),                                          url("images/foobar.png"),                                          url(“images/barbaz.png");   /* 六個目の値は無視されるので、 実質以下のような値指定になる */    background-­‐repeat:  no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat,  no-­‐repeat,                                            no-­‐repeat;   }  
  56. 56. 背景のレイヤーの数より background-*プロパティの 値指定の数が足りない場合は?
  57. 57. .example  {          width:  800px;          height:  800px;          background-­‐image:  url("images/foo.png"),                                              url("images/bar.png"),                                              url("images/baz.png"),                                              url("images/foobar.png");          background-­‐repeat:  repeat-­‐x,  no-­‐repeat;          background-­‐position:  top  0  left  0,                                                    top  200px  left  0,                                                    top  400px  left  0,                                                    top  600px  left  0;   }
  58. 58. それまでに指定した 値の指定が繰り返される
  59. 59. .example  {          width:  800px;          height:  800px;          background-­‐image:  url("images/foo.png"),                                              url("images/bar.png"),                                              url("images/baz.png"),                                              url("images/foobar.png");          background-­‐repeat:  repeat-­‐x,  no-­‐repeat,                                                repeat-­‐x,  no-­‐repeat;          background-­‐position:  top  0  left  0,                                                    top  200px  left  0,                                                    top  400px  left  0,                                                    top  600px  left  0;   }  
  60. 60. https://jsfiddle.net/ 1wfs92e5/4/
  61. 61. 背景のレイヤーは background-image の値で 先に指定したものが上に 後に書いたものほど下に 重なって表示される
  62. 62. background-size
  63. 63. contain, cover, auto という値について
  64. 64. contain
  65. 65. Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. (Google 翻訳) 幅と高さの両方が、背景配 置領域内に収まることができるように、最 大の大きさに、(もしあれば)その固有の 縦横比を維持しながら、画像を拡大縮小。
  66. 66. cover
  67. 67. Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. (Google 翻訳) 最小のサイズに、(もしあ れば)その固有の縦横比を維持しながら、 画像を拡大縮小幅と高さの両方が完全に バックグラウンド配置領域を覆う。
  68. 68. background-size: contain; と指定すると要素内に収まる ように表示される 繰り返し指定がある場合は 繰り返して表示される
  69. 69. background-size: cover; と指定すると画像の大きさに 関係なしに 間なく 要素に収まって表示される
  70. 70. どちらの指定でも アスペクト比は 維持される
  71. 71. auto
  72. 72. background-size の 幅と高さのどちらかに 指定している場合 画像の内在サイズを使って 幅もしくは高さが算出される
  73. 73. 内在サイズ?
  74. 74. 画像などのオブジェクトが 持っている縦・横幅・縦横比 の総称
  75. 75. ラスター形式の画像 (JPEG, GIF, PNG…)は 縦・横幅・縦横比が っている
  76. 76. ベクター形式の画像 (SVG) は 縦横比のみという場合や 縦・横幅のどちらかしかない 場合がある
  77. 77. グラデーションは 内在サイズを持たない
  78. 78. 画像などのオブジェクトが 持っている縦・横幅・縦横比 の総称
  79. 79. というのを覚えておいて ください
  80. 80. 元に戻って background-size の auto 値の話
  81. 81. 画像の内在サイズが ない場合は 100% になる
  82. 82. 幅と高さの両方に 指定されていて 画像の内在サイズが ある場合は それが使われる
  83. 83. 画像の内在サイズが ない場合は contain になる
  84. 84. https://jsfiddle.net/ nkd3bu73/2/
  85. 85. まとめ
  86. 86. W3C の仕様と ブラウザの実装は 一部異なる場合がある
  87. 87. CSS のプロパティと値の 書き方に気を使う
  88. 88. クロスフェードアニメーション .example  {      width:  400px;      height:  200px;      animation:  crossfade  5s  linear  0s  infinite  alternate;   }   @keyframes  crossfade  {      0%  {          background-­‐image:  url("images/foo.png");      }      100%  {          background-­‐image:  url("images/bar.png");      }   }  
  89. 89. Firefox 42.0a2
  90. 90. 変更後 .example  {      width:  400px;      height:  200px;      background-­‐image:  url("images/foo.png");      animation:  crossfade  5s  linear  0s  infinite  alternate;   }   @keyframes  crossfade  {      0%  {          background-­‐image:  url("images/foo.png");      }      100%  {          background-­‐image:  url("images/bar.png");      }   }  
  91. 91. http://jsfiddle.net/ bo5rj0b5/15/
  92. 92. Firefox 42.0a2
  93. 93. とりあえず画像は表示される
  94. 94. クロスフェードしたい場合は?
  95. 95. 擬似要素と opacity を 使う
  96. 96. http://codepen.io/ geckotang/pen/MagNoK? editors=110
  97. 97. background-image は 背景画像を指定する だけではなく 背景のレイヤーの数にも 影響する
  98. 98. background-size の contain, cover は 同じように見えて違うので 使い分け大事
  99. 99. 皆さんも background-image background-size の深みに入りましょう
  100. 100. ありがとうございました https://twitter.com/kubosho_ https://github.com/kubosho
 http://blog.kubosho.com
  101. 101. 画像の引用元一覧 その一 • Cat show: Form | Flickr
 © Tomi Tapio K (CC-BY 2.0)
 https://www.flickr.com/photos/tomitapio/ 4305303148 • Nasty cat ! | Flickr
 © Hannibal Poenaru (CC-BY-SA 2.0)
 https://www.flickr.com/photos/poenaru/ 1304953088/
  102. 102. 画像の引用元一覧 その二 • Cat | Flickr
 © Chris Erwin (CC-BY 2.0)
 https://www.flickr.com/photos/crerwin/ 1089567053/ • Cat | Flickr
 © Martie Swart (CC-BY 2.0)
 https://www.flickr.com/photos/martie1swart/ 6297998606/

×