• 締切済み
  • すぐに回答を!

IEでWEBサイトのデザインが崩れる

先日初めてWordpressのテーマを自作してWEB上にアップしました。 Firefoxでアップしたサイトを確認したところ無事表示されていたのですが、手持ちのIE9で確認したところデザインが崩れていました。。。 HTML,CSSともに初心者で、どうすればIEでレイアウトがちゃんと表示されるのかわからず困っています。 ここを直すとちゃんと表示されるよ~的なことを教えていただけるとありがたいです。 問題のサイト→http://webseisaku-idea.net/

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数516
  • ありがとう数0

みんなの回答

  • 回答No.1
  • pop1001
  • ベストアンサー率35% (19/54)

まず、 •余白にはmarginではなく、paddingを使用する。 •floatの使いすぎに注意。 •overflow: hiddenは背景が見えてもおかしくないように。 上記3点を確認して下さい。 次に、 条件付きコメントを使用し、<html>にクラスを与えます。これは巧い方法で、且つvalidエラーもありません。 <!--[if IE 9 ]> <html class="ie9"> <![endif]--> そして最後に1点、 サイトが左配置になっていたので中央配置にするのはどうでしょうか? HTML 1.<div class="main"> 2. <div> 3. <h2>ブロックレベル要素をセンタリング</h2> 4. <p>ブロックレベル要素</p> 5. </div> 6.</div> CSS 1..main { 2. width: 100%; 3. border: 1px solid #000; 4.} 5..main div { 6. width: 80%; 7. border: 1px solid #FF0000; 8. margin: 0 auto; 9.} センターリングしたい要素に「margin: 0 auto;」と指定するのが正しい方法です。 ※上記ソースでborderを使っているのは分かりやすくする為だけです。 サイト全体を中央配置にする方法↓ HTML 1.<body> 2.<div id="wrapper"> 3.<h1>サイト全体を中央に配置にする</h1> 4.<p>サイト全体を中央に配置にする為のテキスト</p> 5.<!--/ #wrapper--></div> 6.</body> CSS 1.body { 2. text-align: center; 3.} 4.div#wrapper { 5. width: 800px; 6. margin: 0 auto; 7. text-align: left; 8. border: 1px solid #FF0000; 9.} 健闘を祈る!

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • IEでのみ表示がおかしい

    wordpressにてサイトを制作中です。 あるプラグインを導入して、そのプラグインのCSSを触っているとなぜかトップページのみレイアウトが崩れました。プラグインを導入していたのはサイドバーで、表示がおかしくなったのはサイドバーのこのプラグインの真下の項目と、プラグインとは関係の無いトップページの項目です。 プラグインを削除してもダメ、IEをアンインストールしてもダメ、Firefox、safariでは問題なく表示されています。 おかしくなったのは、query_postにて新着を表示している「新着情報」欄が続けて2つ表示されてしまっているのと、もう一つは横並びにCSSでレイアウトしていたのがガタガタになっています。これもquery_postにてカスタムポストタイプを表示しています。 Wordprerssに関わらず、IEでのみレイアウトが崩れる といった事例に対して他に可能性のあることはないでしょうか。 とても困っています。よろしくお願い致します。

    • ベストアンサー
    • CSS
  • CSSによるIEとFirefoxで表示されるデザインが異なる

    CSSを使ってwebデザインしたときに、 IEとFirefoxで表示されるデザインが異なってきます。 (Operaもしかり) 一般的にこのような違いをなくすために、 どのようにして工夫されているのでしょうか? ブラウザごとの違いは仕方ないのでしょうか?

    • ベストアンサー
    • HTML
  • IEとファイヤーフォックスでのレイアウト違い

    外部CSSにてレイアウト組んだのですがIE7とファイヤーフォックスで微妙に違うレイアウトになってしまいます。。 IEですとメインフラッシュの横に1px程度の白い空白ができてしまいます。 正しくはファイヤーフォックスのように空白がない というようにIEでも表示させたいのですが・・・・。 どなたかお力添えいただけると幸です。。 http://studio-evah.com/test/ cssは http://studio-evah.com/test/css/css.css です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • WordPressのオリジナルデザインの仕方

    WordPressをはじめたばかりの初心者です。 よろしくお願いしますm(_ _)m 最近初めてWordPressをサーバーにインストールしたばかりで、テーマもデフォルトのものを使っています。 これからオリジナルなサイトにしたいと思っており、デザインを自分の思うように変更できたらいいと考えています。 しかし、HTMLとCSSは使えるのですが、PHPは全く触れたことがないのでWordPressの画面出力の仕組みなどに関して全くわかりません・・・。 WordPress経験者の方で、PHPの構造や編集の仕方などが詳しく書かれているオススメなサイトや書籍があれば教えていただけましたら幸いです。 みなさんどうぞよろしくお願いしますm(_ _)m

    • ベストアンサー
    • CSS
  • 制作したwebサイトのブラウザチェックについて

    Windows7でIE9・Firefox・Clome XPでIE8・Firefox・Clome 上記のブラウザチェックで、外観の崩れや表示の異常の無い様に確認しているのですが、この方法で最新のWin8+IE10などでも問題なく表示されると思っていいでしょうか? 今のWin7のIE9をIE10にバージョンアップしてしまうと、IE9のチェックが出来なくなるのでやっていません。IE9も結構バグが多いと聞きますので。 趣味のサイトではなく、ビジネスのサイト制作をやっていますので、制作現場のプロの方のご意見をお伺いしたいです。 よろしくお願いいたします。

  • IEとFireFox

    今、個人でホームページを運営しているのですが今まで自分がIEを 使っていたためすべてIEでレイアウトの確認などをしていたのですが 先日友人(Firefox使用)からレイアウトが変といわれ、自らFirefoxを 使用して確認したところ、だいぶIEとはレイアウトが異なっていました 今回は、特に<textarea>の長さなどが違うのですが両方ともでちゃんと 表示できる(テーブルタグないに入れているので長さが同じになるように) タグはないのでしょうか? もし、無理なのだとしたらやはりシェアが多いIEであうように作ったほうが 無難なのでしょうか?

  • MTでデザイン(レイアウト)が崩れた時って?

    最近MT3.3からブログを始めた者です。 有名なサイトさんなどを参考にしながらCSSやHTMLなどを弄っています(デフォルトのテンプレは使っていません)。 ある時、ふと自ブログをブラウザで確認してみると、3カラムのデザインの右カラムだけが左カラムの下に下がっていました。 (FirefoxとIEで確認しており、IEでだけ崩れているようです) 途中、細かくブラウザ確認すれば良かったのですが、それを忘れていて今になって気付いた・・と言う訳です(泣) ちょっと調べてみましたら、"どうやらIEだけはちょっと規格が違う?ので、IEでだけ崩れるのは珍しくはないらしい"・・と言う事までは分かりました。 しかし、このまま放置しているのもどうかと思うので、できれば修正したいと考えております。 そこで、お分かりになる方に質問です。 もし、あなた様がこのような状態でレイアウトが崩れてしまったとしたら、まず真っ先に疑うとしたらどの部分だと思われますか? 非常に抽象的な質問で申し訳ないのですが、『自分だったら・・・』で教えてくださると有難いです。 【実際にサイトを見ないと分からない】、【カスタマイズ内容による】と言われるのを承知で質問しております。 尚、参考にさせて戴いているサイトさんでは、そう言った質問に当てはまるFAQ等は用意されてないようですし (それらが理解できる前提で紹介しているのでしょうから、当然ですね) 一応、検索を掛けてみたのですが、探し切れませんでしたのでこちらで伺いました。 CSS、HTMLの知識がなく、分かりにくい質問で本末転倒かも知れないのですが、どうか宜しくお願い致します。

  • dreamweaverで作ったHPがIE表示だと崩れます

    お世話になります。 dreamweaverでホームページを作っています。 環境はMac OS10.4、dreamweaver MX2004、 確認をsafari、firefoxで行っていました。 MacにはIEが入っていません。 アップしたHPを見ると、safari、firefoxでキチンと表示されていた CSSが、IEでは思いっきり崩れてしまいました。 原因も良く分からなくって、困っています。 例えば、583ピクセル幅の文字アンダーラインが、800ピクセルの テーブル枠を大幅に超えてしまう。 オレンジの太字設定の文字が赤字で水色の破線アンダーラインが 入ってしまう。 などなど。IEはまだまだユーザーが多いようですし、 何とか直したいのですが…。 原因はCSSの何がいけなかったのでしょうか? ※Dreamweaverにてレイアウトを組んでいます。 そのためコードはまったく理解していません。 コード表示されてもチンプンカンプンのため、 DW上での操作方法を教えて頂けると助かります。 アドバイスよろしくお願いします。

  • 異なるIEのバージョン確認

    タイトル通りなのですが何を使っていますか? 私は、IE9をインストールしておりその他のバージョンの確認にはIETesterを使っているのですが、jsを使っているサイトだとよくクラッシュしタブの復元を行っても全く確認はできない状態です。 調べたところIE9の開発者ツールで、ブラウザーモードとドキュメントモードというのが使えるようで試してみました。 IE8にも対応する角丸のCSSを作成し見てみると次の結果となりました。 ・普通にIE9→角丸 ・ブラウザーモードがIE8でドキュメントモードがIE9→角丸 ・ブラウザーモードがIE7でドキュメントモードがIE9→角丸 ここまではいいのですがドキュメントモードをIE9以外にするとブラウザーモードを何にしても角丸では表示されません。 初めて使ってこの結果となり正しい動作なのかもわからない状況ですがきちんと確認できる方法はないものかと思い質問させていただきました。 Microsoft Expression Web SuperPreviewも使ってみましたがトライアル期間が過ぎているせいか画像でしか確認できず、FireFoxのIEタブも試してみましたが表示されたりされなかったりと不安定でいまいち信用できない感じです・・・ IEの自動アップデートも始まるようなのでせめてIE8まではきちんと確認できればいいのですが。

    • ベストアンサー
    • HTML
  • IE6の互換モードはIE5.5と同じ?

    CSSでレイアウトをしています。 一番気になるのはIE5.5以前のブラウザでの表示です。 そこで疑問なんですが、IE6での互換モードはIE5.5とまったく同じレンダリングになるのでしょうか? 手元にIE5.5がないため表示確認が出来ずに困っています。 IE5.5がインストールされているPCを見つけてくる以外に表示確認する方法を伝授してください。 というか、皆さんはどうやって確認しているのでしょうか。。。 よろしくお願いします。

    • ベストアンサー
    • HTML