httpsでのレイアウト崩れを防ぐ方法

前へ 次へ
このQ&Aのポイント
  • httpsでのレイアウト崩れを防ぐ方法について教えてください。
  • httpsで表示すると画面の幅が異なり、レイアウトが崩れてしまいます。Firefoxで問題が発生しているようですが、解決方法はありますか？
  • XREAのレンタルサーバを利用しており、httpsは共用サーバを使用しています。htmlの引用を添付します。httpsで画像やスタイルを指定する場合も共用サーバを経由しています。
回答を見る
  • ベストアンサー

https://でのレイアウト崩れをさける方法

htmlを作成したものをhttp://で表示する時と、https://で表示する時とで 画面の幅がことなってしまいます。このためhttps://の時にレイアウトが 崩れてしまいます。 試したところFirefox3.5.5では起き、IE7では起きないようです。 Firefoxでこの問題を避ける方法はないでしょうか。 レンタルサーバは XREA で、httpsは共用サーバを利用しています。 以下にhtmlを引用します。https://の時には imgやstyleで指定する画像も共用サーバを経由しました。 --(http://のときのhtml------------------------------------------------ <?xml version="1.0" encoding="EUC-JP"?> <!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" xml:lang="ja" lang="ja" > <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="robots" content="noindex" /> <meta name="description" content="デスクリプション" /> <meta name="keywords" content="キーワード" /> <title>タイトル</title> <link rel="stylesheet" type="text/css" media="all" href="http://test.com/style.css" /> </head> <body style="background-image:url('http://test.com/images/body_back.jpg');"> <div id="body-box" class="block-center"> <font color='red'><b>(TEST環境)</b></font>　携帯サイト <div id="header-box" style="background-image:url('http://test.com/images/topbar.png');"> </div> <div id="menu-box"> <div id="menu-box-bg"> <div class="menu-top"><a href="http://test.com/">トップ</a></div> </div> </div> <div id="contents-box" style="float:right;width:546px;border-top:1px solid #553333;border-left:1px solid #553333;background-color:#fffefe;"><div style="margin:10px;padding:100px 100px;border:1px solid #888888;"> ああああああああああああああああああああ </div></div> <div id="footer" style="clear:both;border-top:1px solid #37001e;"> フッター </div> </div> <div id="footer-link" align="center" > 携帯サイト </div></body> </html> --------------------------------------------------------------------

画像を拡大する
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • sakage6
  • ベストアンサー率100% (1/1)
回答No.1

menu-boxにはfloat:left;が指定されていますか？ 現在menu-boxの次にcontents-boxを書かれていますが、menu-boxより前にcontents-boxを書くとどうでしょうか。

fire--
質問者

お礼

その後、自己解決しました。 Firefox3.0.8では発生せず、では銀行などのhttpsになっている画面を Forefox3.5.5とIEで較べても問題なし。 そこで、SSL化の仕方に問題があるかと考えて、 XREAの共用SSLサーバをss1.xrea.comに変更したら問題が消えました。 なんで起きていたのか仕組み上の説明はついてませんが、 この質問を閉じさせていただきます。 お手数掛けました。どうも、ありがとうございます。

fire--
質問者

補足

コメントありがとうございます。 float:left;はstyle sheetに記入しています。 contents-boxを先に書くと、 contents-boxが上になり、menu-boxが下になります。 更に調べてみました。 上の画像でも判るとおり、httpsのほうでは画面の幅が狭くなって います。これはFirefox以外では起きていません。 どうも幅を狭くするのにpixel数が再計算されていて、その際に おそらく全体の幅よりmenu-box＋contents-boxが 1pixel大きくなってしまったようです。 下のより簡単なhtmlでもhttpsでアクセスすると、 Firefoxのみ幅が狭くなってしまいます。 -------(ここから)--------------------------------------------------- <?xml version="1.0" encoding="EUC-JP"?> <!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" xml:lang="ja" lang="ja" > <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta http-equiv="Content-Language" content="ja" /> <title>タイトル</title> </head> <body> <div style="margin:0px auto 0px auto;background-color:#880000;width:800px;height:100px;"> </div> </body> </html> -------(ここまで)---------------------------------------------------

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

関連するQ&A

  • CSSでのセンタリング

    いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!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=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。

    • ベストアンサー
    • HTML
  • css初心者です。プラウザの表示について

    以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • floatをfooterに指定すると正しく表示ができない。

    floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!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=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • DreamWeaverでのスタイルシート適用後のプレビューについて

    最近やっとDreamWeaverを購入してテーブルからCSSデザインに 乗り換えようと奮闘中のものです。 外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 HTMLのほうに、 <!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" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが 適用されません。 デザインビューでは適用されているのですが、、、 何が原因なのでしょうか?

  • cssに関して

    <!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=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box { height: 100px; width: 700px; border: 1px solid #996600; } .comment { height: 50px; width: 300px; float: left; margin-top: 10px; border: 1px solid #993366; } --> </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。 しかし疑問が残ります。 本来はboxにpadding-top:10pxとすべきなんでしょうか。 それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px） ある程度経験のある方か、お詳しい方にご判断願いたいと思います。 なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・） よろしくお願いします。

    • ベストアンサー
    • HTML
  • ブラウザ枠を超えず表示する方法

    CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> </div> </body> </html> === test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？ むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？ お願いします。

    • ベストアンサー
    • HTML
  • フォントと文字サイズの指定方法

    HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレHTMLを変更しないといけなくなりました。 以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> 　　＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> 　　＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • floatがうまくいきません。

    以下のスタイルシートに設定したのですが、 #content　の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }

    • 締切済み
    • CSS
  • 枠線でメイン部分を囲み、フッターを一番下にもってくるには？

    <!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
  • DreamWeaverでテーブルをCSSにした場合にずれます。

    DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する