- ベストアンサー
ブラウザによってCSSレイアウトが崩れる
個人でサイトを運営しています。ビルダー等のソフトを使わず、ＨＴＭＬタグ打ちで作っています（独学です）。テーブルでページをレイアウトするのは好ましくないと言われているので、最近になってＣＳＳでレイアウトするようになりました。 普段ブラウザはＩＥ６を使用していて、一つ一つレイアウトを確認しながら作り上げたのです。しかし、Ｆｘを導入して確認してみると、レイアウトが無茶苦茶に崩れてしまいました。両方で崩れないように調整できたと思ったんですが、次にＩＥ７を導入して確認すると、また大きく崩れるようになってしまいました。これは単に自分のミスなのか（widthやheight、margin、paddingなどで間違いがある）、それともブラウザによって微妙なズレが生じるのは仕方のないことなのか、よくわかりません。どなたかご教授お願いします。
- exangel
- お礼率85% (12/14)
- ブラウザ
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。私も独学で勉強している者です。 そうしたレイアウトの崩れは、exangelさんのミスという場合もあるかもしれませんが 恐らく『それぞれのブラウザ毎による、CSSの解釈の違い』という面が多いと思われます。 exangelさんが仰る「ブラウザによって微妙なズレが生じるのは仕方のないこと」に当たるかと。 私が聞いたところによると、特にIEはCSSに関して独自の解釈をする部分が多いらしいのです。 しかし他のブラウザ（Ｆｘ・opera）は、IEに比べてCSSを忠実に表現する事が多いらしいです。 なのでmonyo28さんが仰るように、Ｆｘ・opera・NNなどで確認して 崩れていなければ、exangelさんのミスは少ないという用に判断してよろしいのではないでしょうか。 とはいえブラウザのシェアという点からIEへの対応も大事かと思われますので javascriptなどでの外部CSS振り分け、CSSハック等で、IE用の対応をしていくのが良いかと思います。 （ここは私も勉強中なので、詳しくは他の回答者様等お願い致します） ちなみにIE7はCSSに関してかなり改善（？）されていると聞きます。 まだ私は使った事がないので分かりませんが… なのでIE7とIE6で見え方が違うのは当然なのかも知れませんね。。。 最後に、WindowsとMacの場合では、同じ名前のブラウザ・バージョンで あっても、見え方が違ってくることがあります。 このように全ブラウザで自分の思い通りに表示させる事は結構大変な作業になると思います。 個人サイトなのでしたら、どれだけ多くのユーザーに満足してもらうか どれだけ手間をかけてもいいか等、サイトの性質とも相談しながら お決めになってはいかがでしょうか？
その他の回答 (2)
- matchasoft
- ベストアンサー率54% (20/37)
IE6は後方互換モードと標準準拠モードの2種類あり、普通は後方互換モードになっています。 この場合、IE以外の標準に準拠したブラウザと見え方が違ってしまいます。 IEを標準準拠モードにすれば少しはマシになりますよ。 モードの切り替えはDOCTYPEで行います。
お礼
DOCTYPEは盲点でした。みなさんの意見を参考に、また頑張ってみます。ありがとうございます。
- monyo28
- ベストアンサー率9% (4/41)
Ｆｘ・operaなどの非ＩＥブラウザ向けに作り 後でＩＥで確認がいいと思います cssのみのデザインの参考にどうぞ http://css.poromeria.com/ http://www.csszengarden.com/tr/japanese/
お礼
どうやらそのようですね。サイトも参考になります。ありがとうございました。
関連するQ&A
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- CSSでのレイアウトについて
HTML、CSS超初心者なのですが CSSでレイアウトを組むと ブラウザを縮小したりしたときに レイアウトがぐちゃぐちゃになります paddingやmarginはpxで指定してるのですが それがいけないのでしょうか？ ｜ ｜ ｜あああ｜ ｜ ｜ こういうレイアウトの物が ブラウザを小さくすると ｜｜ ｜｜あああ ｜｜ とボーダーがちいさくなって 中の文字がはみ出してしまいます どうぞよろしくお願いします
- 締切済み
- HTML
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- HTML
- どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。
ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSのレイアウトについて
CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }
- 締切済み
- CSS
- 【CSS】IE6で印刷時にレイアウトが崩れる
大変困っています。 印刷を前提に作ったページではないのですが、 クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。 そこで、IE6とFirefoxで確認したところ、 Firefoxではレイアウトが崩れずきちんと印刷されますが、 IE6では2カラムの右側（メイン部分）が消えてしまっています。 （IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。） 何か問題があれば、ご指摘お願い致します。 <div id="container" class="clearfix"> <div id="siteSub"> ああああああ </div> <div id="siteMain"> いいいいいい </div> </div> ■CSS-------------------------------- div#container{ width: 950px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } div#siteSub{ margin: 0px; padding: 0px; width: 230px; display: block; float: left; } div#siteMain{ padding: 0px; float: left; width: 710px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } 右側のメイン部分が消えてしまっているので、 大雑把にレイアウト部分だけ書いてみました。 siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。 linkの部分は media="all"としています。 <link rel="stylesheet" type="text/css" href="css/import.css" media="all"> また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。
- 締切済み
- HTML
- CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう
CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更（縮小）すると右側のBOXがすべて左側の下に回り込んでしまいます。 できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。 色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。 また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか？ frameとかだと*で対応するみたいなんですが・・・ ひとまず、周り込を回避する方法が優先です。 どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }
- ベストアンサー
- HTML
- CSSのレイアウト指定だけが無効に。
CSSでデザインを始めたばかりの初心者です。 Mac環境で制作しておりますが、WIN環境に限り、レイアウト指定がうまく反映されません。（MacではIEとsafariで確認済み。） というか、レイアウトの記述部分だけ、無効になっているような印象です。 文字・リンク・imageの指定はきちんと反映されています。 現象が起きているページは下記です。 http://www.artbox-int.co.jp/seek/foragent/illust_a.html CSSの問題の部分です。 /*レイアウト*/ .head { border-width:0px; } .mainhead { width:200px; height:45px; margin-top:15px; margin-left:15px; border-width:0px; } .menu { width:250px; height:45px; margin-top:-42px; margin-left:230px; border-width:0px; } .select { margin-top:-25px; margin-left:35px; border-width:0px; } .table { margin-left:15px; margin-top:15px; width:480px; height:180px; border-color:#D9D9D9; border-width:1px; border-left-width:5px; border-style:solid; background-color:#FFFFFF; } .image { margin-top:15px; margin-left:15px; border-width:0px; } .Artistname { margin-top:-148px; margin-left:180px; width:200px; height:45px; border-width:0px; } .history { margin-top:-31px; margin-left:180px; width:280px; height:100px; border-width:0px; overflow:auto; } .other { margin-left:180px; width:280px; height:30px; border-width:0px; } どうぞよろしくご教授お願い致します。
- ベストアンサー
- CSS
- CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。
はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{ margin:0px; padding:0px; } #formbox{ width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。
- ベストアンサー
- HTML
お礼
ためになります。個人の趣味でやってるサイトなのに、神経使い過ぎてしまいます笑。かといってソフトに頼るのも何だかなあと思ってしまうんですよね。ありがとうございました。