CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが
完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。
足し算はあっているはずなのですがどこを修正すればよいのでしょうか?
HTML
<body>
<div id="wrapper">
<div id="container">
<div class="header">
<h1></h1>
</div>
<div class="kaijyo"></div>
<div class="main">
<div></div>
<h2></h2>
<div class="kaijyo"></div>
<div class="line">
<hr>
</div>
</div>
<div class="menu"> </div>
<div class="kaijyo"></div>
<div class="footer">
<p> </p>
</div>
</div>
</div>
</body>
CSS
#wrapper{
text-align:center; /*IE対応*/
}
#container {
width: 980px;
margin-left:auto;
margin-right:auto;
background-color:#CAB59B;
text-align:left;
}
.header{
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color:#6F0011;
color:#000000;
text-align:left;
height:20px;
}
.main{
width: 670px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 15px 10px 15px;
background-color:#E4E4E4;
text-align:left;
}
.menu{
width: 260px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
background-color:#CAB59B;
text-align:left;
}
.footer{
width: 970px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color:#6F0011;
color:#FFFFFF;
text-align:left;
}
.kaijyo{
clear: left;
}
No.2ベストアンサー
- 回答日時:
W3C CSS 検証サービス(
http://jigsaw.w3.org/css-validator/#validate_by_ … )に書かれているように、『メモ: 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-html4 … )」とされてきました。
HTML4.01strictでは、文書構造をHTMLで記述し、その文書構造に基づいてプレゼンテーションをスタイルシートで指定することになりました。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★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/h … )
当然ですが、wrapperとかcontainer、kaijyo、mainのようなclass名ID名は、???です。
【サンプル】
こんな簡単なHTMLとスタイルシートで実現できるはずです。それでいてリキッドデザインですから、スマホのような小さなディスプレイでも超幅広ディスプレイでも利用できるはずです。
サイズ計算なんてほとんどしなくて良いですし、ブラウザ間の表示誤差も考えなくて良い。(IE6以前は除く)
・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>
No.1
- 回答日時:
とりあえず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">
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
<div>と<div>の間の10px程の...
-
CSSで画像を同じ位置に重なり合...
-
font-sizeが効かない
-
HTMLのiframeの入れ子について
-
CSSでボックスのheightが0になる
-
CSSで左に画像、右にテキストを...
-
CSSがなぜかfont-sizeだけ効か...
-
cssで「下よせ」ってどうやって...
-
HTMLで文字が重なって表示されます
-
画像リンクの下に文字を付けた...
-
firefoxのみテーブルのborderが...
-
table周辺の隙間をなくしたい。
-
Firefoxで見るとli要素レイアウ...
-
CSSで謎の空白ができてしまいま...
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報