- ベストアンサー
IEとFireFoxでCSSの見た目をそろえたい
- CSSの素人が2カラムスタイルのデザインを作る際に、IEとFireFoxで見た目が違う問題に直面しています。
- 足し算は正しく行っているが、どこを修正すればいいのか分からない。
- 問題のコードはHTMLとCSSがあり、要素の幅や背景色などが設定されています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )に書かれているように、 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.』 なのです。 スタイルシートを導入する前にHTMLをきちんと書けるようにならないと、必ずそのような問題で悩まされることになります。 必要ないので、詳しい説明は省きますから、おいおい学んでください。 [原因] IEは長く独自仕様でユーザーを囲い込んでいたため、ウェブ標準とは異なる解釈をする古いIE用の互換モードを持っています。IEであっても標準モードで動作するようにHTMLを記述すれば、多くの問題は解決します。IEがウェブ標準に方針変更をしたことから、互換モードに対する対応は不要になるでしょう。 [対策] HTMLをIEであっても標準モードで動作するDOCTYPEで作成しましょう。いくつかのDOCTYPEがありますが、HTML5の勧告が近いことを考えると、HTML4.01strictで記述するほうが良いでしょう。 すなわち、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と言う記述が良いでしょう。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) [HTML4.01strict] 1999年のHTML4.01の勧告以来!!!「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」とされてきました。 HTML4.01strictでは、文書構造をHTMLで記述し、その文書構造に基づいてプレゼンテーションをスタイルシートで指定することになりました。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ★DIVは、HTM5では原則として使わなくなります。その理由はHTML5では「文書構造を示すために新しい要素が追加された」からです。HTML4.01では、 ・ヘッダ,本文,フッタをもつような完結した記事は、<div class="article"></div> ・文書のヘッダにあたる部分は<div class="header"></div> ・本文は<div class="section"></div> ・ナビゲーションは<div class="nav"></div> のようにマークアップしなければなりませんでしたが!!HTML5では<heade><section><nav>などが導入されます。 ⇒新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 当然ですが、wrapperとかcontainer、kaijyo、mainのようなclass名ID名は、？？？です。 【サンプル】 こんな簡単なHTMLとスタイルシートで実現できるはずです。それでいてリキッドデザインですから、スマホのような小さなディスプレイでも超幅広ディスプレイでも利用できるはずです。 サイズ計算なんてほとんどしなくて良いですし、ブラウザ間の表示誤差も考えなくて良い。(ＩＥ６以前は除く) ・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA入力(右上)で、チェック済みのHTML4.01strict + CSS2.1です。 ・<div class="section"></div>→<section></section>などとするだけでHTML5になります。 class名やid名をつける参考に ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header,div.section,div.footer{ width:90%;min-width:640px;max-width:1000px;/* 幅を固定したけりゃwidth:960px; */ margin:0 auto; padding:5px 10px; } div.section{ position:relative; min-height:300px; } div.section h2,div.section div.section{ margin-right:260px;/* 右側をあけておく */ } div.section div.section{ width:auto;min-width:0;/* 上書きして */ } div.section div.nav{ position:absolute; width:260px; height:100%; right:0;top:0; } /* ここまで・・以下は分かりやすいように色づけ */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.section div.section{background-color:silver;} div.section div.nav{background-color:lime;} div.footer{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>ブロック配置にfloatを使用していないので、記事内でfloatやclearが自在に使える。</p> ＿＿＿<p>HTMLは誰(googleなどの機械も)が読んでも構造が分かる。書くのも楽・・。当然スタイルシートも簡単になる。</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>トップ</li> ＿＿＿＿<li>著書</li> ＿＿＿＿<li>自己紹介</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
- metametamu
- ベストアンサー率51% (153/295)
とりあえずDOCTYPE宣言を指定するのが先ではないかと。 xhtml1.0 strictが個人的にはオススメです。 その後でバグつぶしですね。方法は http://adp.daa.jp/web.html 気のせいでなければkaijyoというclassを与えられているdiv要素の中身は空白ではないですか？ もしそうであればクリアするだけのための要素は不要なので、html的にはこっちで書く方がいいかと。 ■元ソース <div class="kaijyo"></div> <div class="footer"> ↓ ■修正後 <div class="footer kaijyo">
お礼
DOCTYPEを変えるだけで正しく動くなんてびっくりです。 今までは呪文のように書いていただけでした。 ありがとうございます。