iPhoneで見るとフォームの枠画像がはみ出る

フォームの画像がはみ出てしまう事件が発生

本サイトのメールセミナー申し込みフォームをiPhone対応に改修している最中に、枠画像がはみ出てしまう問題が発生した。

このブログで使用しているWPのテーマはレスポンシブ対応しているので、背景画像も自動的にiPhone対応してくれると思っていたのに・・・

解説すると、この枠画像は次の３つに分けて実装している。

• form-top
• form-middle
• form-bottom

また、HTMLコードとCSSは内容はこのように記述した。

HTML

<div id="form-top"></div>
	<div id="form-middle">
    	<form>
　　　　　　・
　　　　　　・
　　　　　　・
       </form>
	</div>
<div id="form-bottom"></div>

CSS

#form-top {
    background-image: url('images/step_form_top.png');
    max-width: 100%;
    width: 320px;
    height: 75px;
}

#form-middle {
    background: url('images/step_form_middle.png') repeat-y;
    max-width: 100%;
    height: auto;
    width: 320px;
}

#form-bottom {
    background-image: url('images/step_form_bottom.png');
    max-width: 100%;
    width: 320px;
    height: 16px;
}

こんな時はググる事にしよう。なになに、背景画像を拡大縮小させるには、background-size: cover;を使えばいいのか！では早速。

あれ、なぜだか背景にグラデーションがかかってしまった。色まで変わってるし‥‥

background-size: cover;について調べてみよう。リファレンスによると、

CSS3ではbackground-sizeプロパティによって背景画像の表示サイズが指定できる。

ふむふむ。表示サイズが指定できるのか。coverはどういう指定なのだろうか？再びリファレンスへ。

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

背景領域を完全に覆う？ぜんぜん覆ってないよ（涙）

もしかしたら、#form-middleでしていている画像は320×1のサイズだ。repeat-yが効いていないからこんなふうになってしまったのかも。だったら、画像のサイズを指定してみよう。

background-size: cover;をbackground-size: 100% 100%;に書き換えてみよう。

おお！上手くいったようだ。

完成後のCSS

#form-top {
    background-image: url('images/step_form_top.png');
    max-width: 100%;
    width: 320px;
    height: 75px;
    background-size: 100% 75px;
}

#form-middle {
    background: url('images/step_form_middle.png') repeat-y;
    max-width: 100%;
    height: auto;
    width: 320px;
    background-size: 100% 100%;
}

#form-bottom {
    background-image: url('images/step_form_bottom.png');
    max-width: 100%;
    width: 320px;
    height: 16px;
    background-size: 100% 16px;
}

執筆者：カニ
先日、冷凍食品のチキンナゲットとからあげ、ミートボールを合計8kg購入した。
冷凍庫に入れようとしたら、一袋だけ入らなかった。
5250円以上の購入で送料無料につられて、つい買いすぎてしまったようだ。
ﾔﾚﾔﾚ ┐(´ｰ｀)┌ ﾏｲｯﾀﾈ