- 締切済み
スマホ、横向きで背景リピートするとずれる
スマホ版サイトをviewport640pxで制作しています。 例えば、四角い背景を入れたい時に、「ブロック要素の上と下に画像を入れて、その間は細長い画像を背景としてリピートさせる」 みたいなことをされる方は多いと思うのですが、これをやると、スマホ（iPhone5Sで確認）を横向きにしたときに、 つなぎ目が1pxくらい、微妙にずれてしまって困っています。 色々と検証してみると、どうやらボックスにマージンを取ると発生する現象のようです。 ボックスをセンター寄せにしたいので、margin:0 auto;とか、margin:0 20px;とか書くと、リピートした背景が微妙に左にずれてしまいます。 ボックスサイズは600px、画像サイズもすべて600pxです。 画像の縮小率の問題かと思い、縦向きの320px、横向き480px の約数（？）の12pxで書き出してみたりしたのですが解決せず。。 そもそも、スマホサイトでこんな指定はなかなかされないかと思いますが、 今回はデザイン上、どうしても間の背景をリピートする方法を取りたく。 原因をご存知の方いらっしゃいましたらご教授いただけると幸いです。 <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=640" /> </head> <body> <style type="text/css"> html, body, div { margin:0; padding:0; } img#top { vertical-align:bottom; } img#bottom { vertical-align:top; } #wrap { width:600px; margin:0 20px;/*これを取るとずれない*/ } #wrap>div { background:url(middle.gif) repeat-y center center; } </style> <div id="wrap"> <img src="top.gif" alt="" id="top"> <div> hogehoge </div> <img src="bottom.gif" alt="" id="bottom"> </div> </body> </html>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLが不正だとそうなる・・・という単純な理由です。 body直下にはブロック要素しか入らない <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> ↑ブロック要素とスクリプトだけ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.1 ) いきなりimg要素を入れたら、ブラウザのDOM解釈時に匿名ブロックがおかれてしまう。 1) style要素は<head></head>内に 2) id="wrap"、id="bottom"はないでしょう。 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 (例) <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文</h2> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> [HTML5]だと、「文書をよりよく構造化するために、要素が新しく追加され( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」たので、 <body> <header> <h1>タイトル</h1> </header> <section> <h2>本文</h2> </section> <footer> <h2>文書情報</h2> </footer> </body> となるべきところ <head> ・・・【中略】・・・ <style type="text/css" media="screen"> html,body{margin:0;padding:0;} div.header,div.header,div.section{width:630px;margin:0 auto;padding:5px;} div.header{height:100px;background:url(top.gif) div.section{min-height:200px;background:url(middle.gif) repeat-y center center;} div.footer{height:100px;background:url(bottom.gif);} </style> </head> ★コンテンツでない画像は背景 将来画像を書き換えるときスタイルシートを外部ファイルにしておけばそれだけ変えれば済む。 HTMLには文書構造しか書いてないのでメンテナンスが楽。デザインの自由度も高くなる。 不正なHTMLによる匿名ブロックはしばしば悩ませます。 ⇒横並びdivで一部の初期高さがずれる理由について - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8620878.html ) スタイルシートを書く前に、Lintなどで文法チェックしてからスタイルを書き始めましょう。
お礼
お返事が遅くなりましたm(__)m 詳しいご回答ありがとうございます！ 基礎的なことが理解できておらずお恥ずかしい限りです。。 不正なマークアップでこういった事が起こるのですね。 まだお教えいただいた方法を試せておりませんが、時間を見て検証してみます！ 取り急ぎお礼まで。