レイアウト崩れの対処法とは？
- 求人一覧画面と求人詳細画面において、一部のアンドロイド端末でレイアウトが崩れる問題が発生しています。
- 具体的には、オレンジの枠で囲んでいるDIV要素に対して、子供のDIV要素のWIDTHが短くなるため、長い文章が折り返されてしまいます。
- 対策として、最初のdisplayをnoneにし、JavaScriptでload時にblockにする方法があるようですが、効果がない場合もあります。
- ベストアンサー
レイアウト崩れ
閲覧頂きまして、ありがとうございます。 こちらのサイトを作成しているのですが（決して宣伝行為ではありません）、 http://devel.tns-g.jp 求人一覧画面と求人詳細画面において、一部のアンドロイド端末（docomoの富士通と東芝で確認しました）で、レイアウトが崩れてしまいます・・・。 具体的には、オレンジの枠で囲んでいるDIV要素に対して、子供のDIV要素のWIDTHが短くなって、長い文章が勝手に折り返されるような感じです。 PCでは、IE、Firefox共に、正常に表示されております。 また、上記以外のスマートフォン端末においても（全て試したわけではありませんが）、正常に表示されました。 あるHPの対策法で、最初のdisplayをnoneにしておいて、JavaScriptでload時にblockにすればよいような事が書いてありまして、試してみましたがダメでした・・・。 対処法等、お分かりになりましたら、何卒ご教示頂きたく、よろしくお願い申し上げます。
- taka451213
- お礼率86% (46/53)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
困っておられることはよくわかるのですが、これは該当Androidの完全なブラウザバグで、「一部のAndroid」という表現で、対策が施せるような単純な問題ではないと思われます。 そもそも、Androidブラウザでは、デバイス解像度と論理解像度が異なっており、しかもAndroid1.x～4.0までの多岐にわたるバージョンで動作を保証せよ、というのが無理な内容だと言わざるを得ません。 自分も、Android 2.1時代には散々泣かされまして、今は2.2以上＋リファレンス機（Galaxyシリーズ）以外の「見え」は細かいレベルまで保証しません。 HTMLにしても、拝見したところサイズ指定は相対、しかもかなり「入れ子」状態の内容ですし、jQueryMobileなどを使っていてもバグの出やすいAndroidですから、マトモに動作させるのは至難の業ではないでしょうか。
関連するQ&A
- レイアウト崩れ
前回、同じような質問をさせて頂きましたが、質問の意図がわかり辛いのか、回答が付かないので、改めて質問させて頂きます・・・。 <div style="width:80%;" id="parent"> <div style="width:20%; float:left;"> タイトル </div> <div style="width:80%; float:left;" id="wrap"> <div style="padding-right:1em;" id="child"> 内容 </div> </div> </div> とあった場合、一部のアンドロイド端末のブラウザで、表示がおかしくなります・・・。 PCのブラウザで見ると、 parent→728 wrap→583 child→570 というwidthが取得できています。 レイアウトが崩れるブラウザでは、 parent→691 wrap→552 child→293 となってしまいます・・・。 この293という値がどこから来るのか？ 何故block要素（div）なのに、親要素のwidthを継承しないのか？ が謎です・・・。 childを「padding-right:1em」としたいため、width指定するのが難しく、 敢えてdivを二重にしたのですが・・・。 何故こうなるのか、どのように書けば正しく表示されるのか、 ご存知の方がおられましたら、何卒ご教示下さいますよう、お願い致します。
- ベストアンサー
- CSS
- floatでレイアウトした後にcleafixは必ず必要ですか？
いつもお世話になっております。 早速質問ですが、floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 例えば以下のレイアウトでテキストを組んでみたのですが、winXPのIE7、IE6、opera9、FireFox3、では問題なく表示されていました。 それで外枠のBOXの幅が設定されており、float指定した要素の親要素に高さの指定があり、float指定した要素の親要素の下に外枠と同じ幅の画像やdivがあればclearfixを記述しなくてよいのではと考えたのですが、仕事でWEBを制作しないといけない為、確認しておきたくて投稿しました。 ご回答を宜しくお願いします。 〔XHTML〕 <body> <div id="wrapper"> <div id="header"> <div id="header01">AAA</div><div id="header02">BBB</div> </div><!--end header--> <div id="pankuzu">ccc</div> <div>111</div> <div>222</div> </div><!--end wrapper--> </body> 〔css〕 #header{ text-align:left; width: 900px; height:150px; } #header01 { float: left; width: 400px; } #header02 { float: left; width: 450px; height: 150px; } #pankuzu{ width: 900px; height: 20px; background-color:#999; }
- ベストアンサー
- HTML
- ul/liタグでのリスト表示におけるレイアウト崩れについて
ul/liタグでのリスト表示におけるレイアウト崩れについて 現在、タブコントロールの画面を作成しているのですが、 画面のレイアウトが崩れてしまう現象が発生しています。 2日間デバッグしてみたのですが解決しませんでしたので、 現状のHTMLの抜粋をご提示致しますので お手数ですがご助言して頂けないでしょうか。 ■タブコントロール画面について 画面上にタブを新規に作成するボタンがあり、 そのボタンを押下することによりjavascriptで ul/liのコードを動的に作成しています。 (prototype.jsを使用しています。) タブは画面上最大5個まで同時に表示できますが 6個以上になった場合は、タブコントロールの両端に スクロールボタン(「戻る」・「進む」)を表示するようにしています。 また、対象のタブをクリックされた場合には画像で「閉じる」ボタンを 表示するようにして、閉じるボタンを押下した場合はその タブを消去するようにしています。 なお、タブコントロールの完成イメージとしては以下のサイト のようなものを目指しています。http://members.ecnavi.jp/ (タブコントロールの下にパネル部分があり選択されたタブ においては、タブのボトム部分の線が隠れる仕様です。) ■現象の詳細 タブが6個以上になり「戻る」ボタンを表示した際にタブ部分が 「戻る」ボタンの半分程度の高さに浮き上がって表示されてしまいます。 なお、「進む」ボタンに関しても同様です。 ※浮き上がってしまっているタブの枠線下部には線は引かれていません。 □□□□□ □ (実際は、上段の□が高さ半分程度下に下がるイメージです。) #####生成されたHTMLの抜粋##### <div id="myTab"> <ul class="tabs"> <li class="LRButton" style="width: 18px; height: 27px; background-color: rgb(176, 196, 222);"> < </li> <li title="6:1f"><div style="width: 89px; height: 27px; overflow: hidden;" class="ItemIdle"> <div style="width: 69px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div> <div style="float: right; display: none;"> <a href="javascript:void(0);"> <img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close"> </a> </div> </div> </li> <li class="tab-active" title="6:1fffff"> <div style="width: 89px; height: 27px; overflow: hidden;" class="ItemSelected"> <div style="width: 59px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div> <div style="float: right; display: block;"> <a href="javascript:void(0);"><img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close"> </a> </div> </div> </li> </ul> </div> <div class="panel"> <table width="825px" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr>
- 締切済み
- HTML
- CSS：区画のレイアウト1
現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図（CSSによる区画のレイアウト）のようなレイアウトにしたいのですが、Kukaku4_3（class名、色：red）のところで画面のあるとおり、Kukaku4_2（class名、色：navy）から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図（CSSによる区画のレイアウト）のようにするにはどうすればよいでしょうか？ 回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }
- ベストアンサー
- HTML
- floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- ベストアンサー
- CSS
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
- htmlのtableレイアウトについて
こんばんは。訳あってｃｓｓとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとｄｉｖのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何ｐｘかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではｔａｂｌｅ要素にｈｔｍｌでwidth="400" と指定されていたものをｔａｂｌｅタグ内に <TABLE style=" border:0px;padding:0px;margin:0px; ｗｉｄｔｈ:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください！
- 締切済み
- CSS
- 表示倍率を変えるとレイアウトが崩れます。
表示倍率を変えるとレイアウトが崩れます。 現在、Webページの製作練習を行っています。 画面上部にメニューボタンを4つ（223×36）設置しているのですが、 マウスで表示倍率を変えると途端にレイアウトが崩れてしまいます。 スタイルシートは下記のように設定しています。 #container { margin-left:auto; margin-right:auto; width:900px; text-align:center; border:1px solid #ffffff; } #topNavi { width:900px; background:#000000; border-top:1px solid #a3a3a3; border-bottom:1px solid #a3a3a3; } #topNavi div { float:left; margin:0px; height:36px; width:223px; } そして、それぞれの画像の両脇に、border:1px solid #656464; を設定しています。 div#containerで、全体が画面の中央に配置されるように設定し、 div#topNaviではメニューの区切りをわかりやすくするために、 上下にborderを設定しました。 div#topNaviで、メニューを横一列に並べています。 ここでいくつか気になっているのですが、 1.#containe、div#topNaviにそれぞれ設定されているborderですが、width900pxの中に含まれるのでしょうか？ 2.なぜ倍率を変化すると崩れてしまうのか？ 3.何か良い方法はないか？ もしよろしければ、ご教授をお願い致します。
- ベストアンサー
- HTML
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- DreamWeaver8でのフロートを使った時のレイアウト崩れについて
DreamWeaver8を使って、ホームページを作る練習をしているの ですが、たくさんの商品を並べるページで 商品写真を<div>タグでくくり フロートを使って一列に３つの商品が横並びになり 一ページに合計９つの商品を紹介するような段組を作ろうとしました。 #main div.goods { float: left; width: 160px; margin-right: 20px; margin-bottom: 20px; } というようなスタイルをDreamWeaver8を使って目的の<div>タグに 適応させてみたのですがレイアウトが崩れてしまいました。 一列目は綺麗に「商品写真」が３つ並べることができたのですが 二列目の最初に表示される「商品写真」が画面の右側によってしまい 写真が３つ並ぶはずが、２列目には一つしか表示されず それ以降のレイアウトが崩れてしまいました。 <div>タグとフロートを使って、レイアウトを崩さないように うまく商品を並べるにはどうすればいいのでしょうか？ 回答宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
お礼
shockatz様 ご回答ありがとうございます。 実はこの件に関しまして、何とか解決できた次第です。 誰も回答してくださらないので、締め切る事もできませんでした・・・。 当該の（勝手に縮まる）divに対して、background-colorを指定する事により、widthが親の値を継承してくれるようになりました。 この度はお騒がせ致しました・・・。 ありがとうございました。