• 締切済み

iPadのSafariでサイトが右側にはみ出る

いつもご丁寧な回答をありがとうございます。 iPad2を利用しています。 　通常、iPadやiPhoneのSafariでは、ウェブサイトの横幅が、機種によって最適化され、ちょうど良い解像度になります（横スクロールする必要がない）。 　しかし、私が自作しているサイトでは、なぜか右側がはみ出てしまい、すべて表示させるには、フリックしたり、ピンチインする必要が生じます。 　簡略したコードは次の通りですが、何が問題でしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> </head> <body style="background-image : url(cg/interface/hoge.gif);background-repeat : repeat-x;margin-top : 0px;margin-bottom : 0px;margin-left: 12px;margin-right : 12px;"> <div style="width:1200px;border:1px solid;">左右にマージンが空いて欲しい</div> </body> </html> div要素のwidth指定が大きすぎることが原因でしょうか。しかし、通常はそれでも最適化（縮小）されると思うのです。 ご回答、どうぞよろしくお願いいたします。

  • Chown
  • お礼率95% (481/505)
  • CSS
  • 回答数1
  • ありがとう数2

みんなの回答

  • too_bad
  • ベストアンサー率53% (70/130)
回答No.1

max-widthやmin-widthを使用すれば解決できると思われます。 http://www.css-lecture.com/log/css/038.html しかしその前に、根本的な部分から改善していきましょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML　4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> </head> <body style="background: url(cg/interface/hoge.gif) repeat-x;margin: 0 12px"> <div style="max-width:1200px; min-width: 640px; border: 1px solid;">左右にマージンが空いて欲しい</div> </body> </html> 本当はこうじゃないほうが良いのですが・・・ とりあえずはということで。

Chown
質問者

お礼

年末のお忙しいときにありがとうございます。 なるほど、そういう方法もあるのですね。参考になります。 今回作っているサイトはこのようなものです。（テキストは、ネットから適当にコピーしたダミーです） http://0843.co.jp/aclub/momentary/2013test/ これをiPadで見ると、何故かテキスト右側にマージンが空かず、フリックすると画面全体が左右に動いてしまいます。（上部の青空の背景は、水平方向に繰り返しています） Yahoo!のように、左右にマージンを空けつつ、スクロールは縦方向だけに固定したいのですがどうしたら良いでしょうか。 教えてください。

Chown
質問者

補足

こういうサイトを目指しています。 http://www.zakzak.co.jp/entertainment/ent-news/news/20121229/enn1212292314006-n1.htm iPadで見ると、左右にマージンが空きます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • Firefoxで、tableに指定したmargin-leftがスクロールバーで×（ソース記載にて長文です）

    HTMLにて質問してましたが、回答ありませんでしたので、カテゴリを変えて質問させていただきます。 bodyをmargin、paddingともに0にして、tableを配置してmargin-left:15pxを指定したのですが、スクロールバーが出た時にFireFox2.0でずれます（他、IE6、safari3は問題無）。 どうも、marginがきかなくなるようですが、原因がお分かりになれば教えていただけないでしょうか？ また、回避策は何かあるでしょうか？ divに設定したmarginは問題無です。 tableをdivで括って、marginはdivに設定すれば問題ありません。でも、できればシンプルにbodyの直下にtable配置したいと思っているのですが…。 どうぞよろしくお願いします！ 以下にサンプルソースを記述します↓ ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テーブル</title> <style> <!-- body{ margin:0; padding:0; } --> </style> </head> <body> <div style="width:500px; background-color:#00FF00; margin-left:14px;">div</div> <table width="500" border="0" cellspacing="0" cellpadding="0" style="margin-left:14px;"> <tr> <td bgcolor="#0099FF">テーブル</td> </tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • 【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・

    IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。 CSSで２つのBOX（outboxとinbox）と定義します。 outboxの定義の中にinboxを配置します。 outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。 ソースは以下です。 test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>test page</title> <style type="text/css"> <!-- .outbox { margin-top:100px; margin-left:auto; margin-right:auto; width:449px; height:270px; background-image:url("test.gif"); background-repeat:no-repeat; } p.inputbox { margin-top:120px; margin-left:110px; } --> </style> </head> <body> <div class="outbox"> <p class="inputbox">aa</p> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 枠線でメイン部分を囲み、フッターを一番下にもってくるには？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>

    • ベストアンサー
    • HTML
  • Safariで画像が出ません！

    WinXPにてHPを作っています。 WinではIE7、IE6、NN7、FireFox、Opera MacではIE、FireFox、Opera、Safari で動作・レイアウトの確認をしています。 何故かSafariのみ、以下のタグを入れたページの背景画像が出ず真っ白な画面になってしまいます。 どこに間違いがあるのかさっぱりわからないんです… ご存知の方、教えて頂けるとありがたいです！！ 宜しくお願い致します。 タグ一覧↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <BASE target="_parent"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Imagetoolbar" content="no"> <meta name="robots" content="noindex, nofollow,noarchive"> <meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW, NOARCHIVE"> <TITLE>top</TITLE> <STYLE type="text/css"> <!-- BODY{ background-color : black; background-image : url("＊＊＊＊.gif"); background-repeat : no-repeat; background-position:25% 0%; } --> </STYLE> </HEAD> </HTML>

    • 締切済み
    • CSS
  • safariでのリキッドデザイン

    ウインドウ幅によって横幅可変のページを作ろうとしているのですが、floatを使用して配置したボックスの列の右側がSafariで表示した場合奇麗に揃いません。 Firefoxでは奇麗に揃うのですが、Safariのバグでしょうか？ ちなみに下記のようなHTMLとなります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>名称未設定</title> <style type = "text/css"> <!-- *{ margin:0px; padding:0px; } body{ margin:10px; } #wrapper{ width:100%; } #head{ background-color:#EEEEEE; width:100%; } #days div{ background-color:#EEEEEE; float:left; text-align:center; width:20%; } --> </style> </head> <body> <div id="wrapper"> <div id="head"> ほげほげ </div> <div id="days"> <div>1<br>月</div> <div>2<br>火</div> <div>3<br>水</div> <div>4<br>木</div> <div>5<br>金</div> </div> </div> </body> </html> ほげほげのボックスの右側と、floatで並べたボックスの右側が揃いません。Safariのバージョンは4.0.4です。 エクセルのような表を作ろうと思っているのですが、横幅固定だと一つ一つのボックスが狭くなってしまうので、大きなディスプレイでは広く表示できるようにしたいのです。 なにか対処法をご存知な方、ご助力いただけると幸いです。よろしくお願いいたします。

  • スタイルシートで上手く段組が出来ません。

    スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m

  • Operaでズレない方法をご指導下さい

    IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>

  • ボックスの高さを揃える、について

    こんばんは。 私は今CSSでHPを作っているのですが、左側にメニュー画像、右側に 内容、といった風にしたいのですが、左側だけに壁紙を貼り付けようと しているのですが、上手く出来ません。 左側のボックスにmin-heightを付けたりしたのですが、それですと右のページの長さが変わると意味が無くなってしまいます・・・。 何処が間違っていましたら、ご指摘お願いします。 HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css.css"　type="text/css"> <title>あ/title> </head> <body> <div id="wrapper"> <div id="layout"> <div id="side"> <img src="menu.gif" usemap="#map1" alt="menu"> <map name="map1"> (ここは略させて頂きます)</map> </div> <div id="main"> <div class="sample1"> <img src="webtitle2.gif" alt="title"> </div> </div> </div> </div> </body> </html> CSS部 * {margin: 0px; 　padding: 0px;} #wrapper {padding: 0px;} #layout {width: 850px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed;} #side {float:left; width: 150px; margin-left:0px; margin-top:0px;} #main { float:right; width: 700px;} div.sample1{background-color: transparent; margin:10px; text-align:left; color:#282828; font-size:13px;}

    • ベストアンサー
    • HTML
  • <css> ボックスの隙間について

    お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜htmlソース＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> 　<div id="boxA"> 　</div> 　<div id="boxB"> 　</div> </body> </html> よろしくお願いします。

  • ３つのボックスを１つとして中央揃えするとき

    詳細は下記のページソースを見ることになりますが、私はdivで指定している #header,#sidemenu,#infoのボックスを１つのボックスとして中央揃えをしたいと思ってます。しかしなかなか上手くいかないのでどなたかご教授お願いします。 一応上記３つのボックスを新たにdivタグ（id指定）で囲んでセンタリングしてみましたがネスケとFirefoxは表示が変わらず、IEは#headerのボックスだけがセンタリングされてしまいました(HTML+CSSでのレイアウト) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Top Page</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } #box { text-align: center; margin-left: auto; margin-right: auto; } #header { width: 800px; height: 100px; color: #ffffff; background-color: #ccffff; } #sidemenu { width: 300px; height: 500px; color: #ffffff; background-color: #87ceeb; float: left; } #info { width: 500px; height: 500px; color: #ffffff; background-color: #0000ff; float: left; } --> </style> </head> <body> <div id="header"> </div> <div id="sidemenu"> </div> <div id="info"> </div> </body> </html>

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する