スマホ画面で長い文章が、左端に短い幅で片寄る。

締切済

質問者：gerberared
質問日時：2011/12/29 16:23
回答数：2件

スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。
これはどのように修正すれば良いのでしょうか。PCではいろんなブラウザで問題なく表示されています。

#header {
width:100%;
background:#cccc99;
}
#container {
width:950px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#col1 {
width:740px;
float:left;
margin-left:20px;
background:#383838;
}
#col2 {
width:190px;
float:left;
}
#footer {
clear:left;
width:100%;
border-top:1px solid #8f8472;
}

左側にメニュー（190px）を配置したレイアウトです。
h1,h2,P,liタグなど、とにかく長い文章の部分だけ、画面幅ではなく、短い幅で折り返され
左側に片寄っています。下記のxxxxxxxxの部分もそのようになります。

ul.abc {
list-style:none;
width:100%;
margin: 0;
padding: 0;
}
ul.abc li {
float:left;
margin-right:1em;
padding: 0;
}
ul.abc a {
float:left;
line-height:85px;
}
ul.abc img {
float:left;
margin-right:.5em;
vertical-align:middle;
}

<ul class="abc">
<li><a href="..." target="_blank"><img src="..." width="115" height="85" alt=""/><img src="..." height="1px" width="1px" border="0">
xxxxxxxxxxxxxxxxxxxxx</a></li>
</ul><div style="clear: left;"></div>

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2012/01/04 09:59

＞そのような問題は起こりませでした。

　それ以上は、HTML,CSSの詳細を見ないと判断できません。firefox+Firebug ( https://addons.mozilla.jp/firefox/details/1843 )+FireMobileSimulator ( https://addons.mozilla.jp/firefox/details/8519 )でもつかって解析してください。
　原因は、そのテキストの入っているブロックの巾の設定だと思います。先に示したソースでは起こらないのではないかと思います。

　あわせてHTML自体の構造もチェックすること。HTMLが正しく解析できないとCSSが期待通り適用されません。またCSSの文法チェックも必要
<div style="clear: left;"></div>のようなデザインのための空の要素は使うべきではありませんし・・
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　「CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ( http://jigsaw.w3.org/css-validator/#validate_by_ … )」

この回答への補足

ご回答ありがとうございました。

ul.abc li {
float:left;
margin-right:1em;
padding: 0;
}
上記の部分についてのみですが、
display: block;
white-space: nowrap;
を追加することでどうやら対処できたようです。

いろいろと検証してみたのですが、よくわからず、結局header,footerはwidth:100%;　で、containerや、その中身をpxで固定しているために,

・header,footerが320px、
・containerの画像を横並びにしている部分、display: block;
white-space: nowrap;の部分などが950px、
・その他の通常の文章の部分が320px

となって混在がおきてしまっているのかなあと思うのですが、これはもうリキッドタイプのレイアウトでないともう対処ができないということになりますか。
ちなみにiphonでは問題なく、アンドロイドでのみ混在の問題が起こります。
もしご存知でしたら教えていただければありがたく思います。
よろしくお願い致します。

補足日時：2012/01/08 22:39

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2011/12/30 19:29

　示されたCSSやHTMLのソースでは原因はわかりませんが、内容の大きさはpadding辺の内側です。

巾が縮まりすぎるブロックに、固定巾のパディングやマージンが設定されているため内容巾が狭くなる(widthのデフォルトはauto)のではないかと。
　たとえば、親コンテナブロックが、width:100%となっていて、その内側の<p></p>にマージンが固定で指定(たとえばmargin-left:200px)されていると、親ブロックの巾が200pxになると、<p></p>の巾はゼロになってしまいます。

しかし、
＞PCではいろんなブラウザで問題なく表示されています。
　もし予測が正しければ、ＰＣでもウィンドウ巾を狭くすると同じ症状になるはずです。

　スマートフォンやi-padで表示させるためには基本的に固定巾で作成することはありません。リキッドスタイルにした上で、最小幅を指定することが多いでしょう。

header,container,footerが書かれているCSSからだけの判断ですが、画面は上段一枠,中段二枠,下段一枠の一般的な配置だと想定してお答えします。(違っていたら、下記を参考にしてください。)

★floatによる段組について( http://oshiete.goo.ne.jp/qa/7079628.html#a3 )
★HTML5での段組( http://oshiete.goo.ne.jp/qa/7169929.html )
★DIVの崩れを防ぐには( http://oshiete.goo.ne.jp/qa/7069085.html )
なども参考にしてください。

★★HTMLをどのように書かれているか情報がないため、「DIVの崩れを防ぐには( http://oshiete.goo.ne.jp/qa/7069085.html )」のHTML(二段組)で示してあります。
　i-phone,i-pad対応にするには、CSS部分を下記のものに変えて試すほうが良いでしょう。また、段組は印刷時には適用されません。
　なお、＿はタブに戻してください。

＿<style type="text/css">

＿</style>
＿<style type="text/css" media="screen">

＿</style>

この回答への補足

ご回答誠にありがとうございます。

もし予測が正しければ、ＰＣでもウィンドウ巾を狭くすると同じ症状になるはずとのことでしたが、そのような問題は起こりませでした。
パディングやマージンもそんなに大きな固定幅のものもなく、段組のずれもありません。
上段一枠,中段二枠,下段一枠の一般的な配置です。

他にも考えられるような原因がお分かりでしたらよろしくお願い致します。

補足日時：2011/12/31 16:23

通報する