スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。
これはどのように修正すれば良いのでしょうか。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>
よろしくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>そのような問題は起こりませでした。
それ以上は、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では問題なく、アンドロイドでのみ混在の問題が起こります。
もしご存知でしたら教えていただければありがたく思います。
よろしくお願い致します。
No.1
- 回答日時:
示されたCSSやHTMLのソースでは原因はわかりませんが、内容の大きさはpadding辺の内側です。
巾が縮まりすぎるブロックに、固定巾のパディングやマージンが設定されているため内容巾が狭くなる(widthのデフォルトはauto)のではないかと。
たとえば、親コンテナブロックが、width:100%となっていて、その内側の<p></p>にマージンが固定で指定(たとえばmargin-left:200px)されていると、親ブロックの巾が200pxになると、<p></p>の巾はゼロになってしまいます。
しかし、
>PCではいろんなブラウザで問題なく表示されています。
もし予測が正しければ、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">
<!--
div.section p{
_text-indent:1em;
_margin:0 1em;
_line-height:1.6em;
}
-->
_</style>
_<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;background-color:gray;}
div.header,div.article,div.footer{
_width:80%;margin:0 auto;/* センター配置IE5,非対応 */
_min-width:640px;
_max-width:900px;
_border:solid 1px rgb(255,200,200);background-color:rgb(255,200,200);
}
div.article{
_position:relative;
_background-color:lime;border-color:lime;
}
div.article div.section img{
_float:left;
_margin: 5px;
_border:1px solid gray;
_background-color:white;
}
div.article div.section{
_margin-left:32%;margin-bottom:200px;/* 見本のため */
_clear:left;/* clearがこのブロック内で使える */
}
div.article div.contentTable{
_position:absolute;
_top:0;left:0;width:30%;height:100%;
_background-color:aqua;border-color:aqua;
}
div.footer{background-color:yellow;border-color:yellow;}
-->
_</style>
この回答への補足
ご回答誠にありがとうございます。
もし予測が正しければ、PCでもウィンドウ巾を狭くすると同じ症状になるはずとのことでしたが、そのような問題は起こりませでした。
パディングやマージンもそんなに大きな固定幅のものもなく、段組のずれもありません。
上段一枠,中段二枠,下段一枠の一般的な配置です。
他にも考えられるような原因がお分かりでしたらよろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
safariでの横並びリスト(List...
-
画像と一緒にスライドするリン...
-
widthやheightの数値に単位(px...
-
hpビルダー 複数の表の罫線を...
-
<div>と<div>の間の10px程の...
-
ディスプレイのサイズに合わせ...
-
html5 2段組で行頭を揃える方法
-
divで囲まれたpaddingの指定を...
-
cssで投稿した画像を中央に表示...
-
embed タグを用いると表示が遅い
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報