デザインスタジオフェニックススタッフブログ制作ブログ【CSS】background-sizeの記述順に注意しないとiOS7でまずいことになる件ツイート今日から待ちに待ったジョジョの奇妙な冒険第3部のアニメ放送開始です。静岡市では放送しないんですけどね!ちくしょう!制作部の錦織です。background-sizeは、指定した背景画像のサイズや比率を指定できるCSSプロパティです。プロパティの特性上、スマートフォン用のページを制作する際に、よく使用します。この前(といっても結構前か)、実機iPhone(iOS6)で動作確認をしていたら、background-sizeの指定が効いていない部分がありました。CSSの記述の仕方にも問題なさそうなのに、なぜ?しかもiOS6では表示されているのに...。反映されない場合がある模様です。下記のようにbackground-sizeプロパティの後ろに、backgroundプロパティが使われてると、background-sizeで指定してた値が初期値(auto)に戻ってしまいます。100px;}つまり、後で指定してあげれば良いです。backgroundプロパティのショートハンドで書いてもうまくいかないっぽいので、注意してください。スマートフォンのOS別の実機検証はなかなか手間が掛かって大変ですが、このように、大きく表示方法が変わってしまうような影響を与えてくることもあるので、まだ使われている範囲のOSや機種は、きちんと検証していきたいですね。【CSS】background:(none);に気をつけようIE8/IE9.jsをIE6/IE7にて読み込んだ際にスタイルが適用されなくなる事態Three.jsでShadowMapViewerWEB戦国時代の天下統一を目指す、静岡市のホームページ制作会社デザインスタジオフェニックスのスタッフブログです。