- ベストアンサー
Android端末でのブラウザ表示において、レイアウトが崩れる原因と解決方法について
- Android端末の一部のブラウザで、特定のレイアウトが崩れる現象が発生しています。
- ブラウザの解釈により、要素のwidthが異なる値になることが原因で、レイアウトが崩れます。
- この問題を解決するためには、CSSの指定方法を工夫し、正しく要素の幅を設定する必要があります。
- taka451213
- お礼率86% (46/53)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
一度仕様書の計算値の部分などを読み返してみましょう。 ⇒4.3 値の種類（Values） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#values ) ⇒8. ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html ) ⇒9. 視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html ) ブロックが抱合親コンテナブロックのサイズを参照するのはstatic以外の直近の親ブロックです。 あくまでpadding辺の内側がサイズです。サイズを指定するときpaddingは要注意 故意に背景色と同色のborderを書いておく 段組にはfloatを使うな!!--解釈の違いで崩れます。 下記サンプルは、後方互換も考慮してあるので、少し煩雑です。スマホだけなら、もっと簡単になるのですが。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )のDATAでチェック済みのHTML4.01strictとCSS2.1です。 ★タブは＿に置換してある。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル0</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- /* Layout Design */ html,body{margin:0;padding:0;} h1,h2,h3,h4,p,ol{margin:0 1em;line-height:1.8em;} div.header,div.section,div.footer{width:80%;min-width:480px;max-width:1000px;margin:0 auto;} div.section{position:relative;} div.section div.section{width:auto;min-width:0;min-height:0;min-height:200px;} div.section h2,div.section p,div.section div.section{margin-left:20%;} div.section div.section p{margin: 0 1em;} div.section div.contentTable{width:20%;position:absolute;top:0;left:0%;height:100%;font-size:0.9em;} div.section div.contentTable ol{margin:0 0.2em;padding-left:2em;} /* Color scheme */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:lime;} div.section div.section{background-color:white;} div.footer{background-color:fuchsia;} div.section div.contentTable{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここに自由な長さの文章を入れてみる</p> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>ここに文章</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>ここに文章</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Products">Products</a></li> ＿＿＿＿<li><a href="/Contact">Contact</a></li> ＿＿＿＿<li><a href="/Profile">Proflle</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ORUKA1951様 ご回答ありがとうございます。 実は、この件に関しまして自己解決していたのですが、誰も回答して下さらなかったため、質問を締め切る事ができませんでした・・・。 divやpなどのblock要素内に、テキストのみが存在する場合に、この事象が発生します。 brタグなどが含まれた場合は、親のblock要素のサイズまで広がります。 なぜか、該当のdiv（この場合はchild）にbackground-colorを指定する事により、親の要素のサイズまで拡張されました。 かなり情報が少なかったのですが、同様の前例があったため解決できました。 この度はありがとうございました。