レイアウトがズレル

締切済

質問者：a4_chapp
質問日時：2013/07/18 17:25
回答数：2件

お世話になります。
スタイルシートの勉強中ですが、以下のようなソースを書くものの、左右のサイドメニュー部、メイン部にズレが生じてしまいます。
（XPでIE８を利用していますが、互換表示でもレイアウトが異なる）

何故こうなるのか、アドバイスのほど頂戴出来れば幸いです。
宜しくお願い致します。

#outline{
border: 1px solid #C0C0C0;
width: 804px;
margin: 13px auto 10px auto;
padding: 2px;
}

#main{
margin-top: 0px;
margin-right: 0px;
width:631px;
border: 1px solid #C0C0C0;
padding: 2px;
text-align:left;
float: right;
}

#menu{
margin-left: 0px;
margin-top: 0px;
width:159px;
background: #FFFFFF;
border: 1px solid #C0C0C0;
padding: 2px;
}

<div id="outline">

<div id="main">

メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br>
メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br>
</div>

<div id="menu">

サイドメニューサイドメニュー
</div>

</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2013/07/18 19:33

互換表示にしないこと!!鉄則です。

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　互換表示は、ブラウザごとに異なる仕様であった(特に古いIE)用に作られたページを見る目的、および古いブラウザ用の指定です。
・DOCTYPEを、どのブラウザでもウェブ標準/標準モードで起動するように書いておけば、ブラウザの差はほとんどなくなります。
・作成されているHTMLの書式が分かりませんが、HTML4.01strictでしたら、すべてのブラウザが標準モードで動作するには
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
になります。Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )のDATA入力(右上)を使ってチェック。

　他の仕様もありますが、HTML4.01strictで学ばれたほうが良いでしょう。
・次期HTML5はHTML4.0strictの改訂版であること
・「HTML文書を作る場合には、・【中略】・strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　さて、本題ですが、下記のように記述すると良いはずです。説明はスペースが無駄なのでHTML内に書いておきました。
<!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 rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="section">
＿＿＿<h3>説明</h3>
＿＿＿<p>
＿＿＿＿IE7以上、他のモダンブラウザで同じように表示されるはず(IE7はheight:100%が利かない)。またリキッドデザインですのでスマホでも幅広ディスプレイでも利用に制約はないでしょう。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿HTML4.01では、<q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …構造とプレゼンテーションの分離</a></q>が叫ばれながら文書構造を示す要素が不足していたために、<q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …属性及び class属性と併用することで、文書に構造を付加する</a></q>とされていましたが、これは理解されたとは言いがたく、<div id="outline">、<div id="main">のように、idやclass名が文書構造ではなく、プレゼンテーションのために使われていました。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿HTML5では、この反省から、文書構造を明確にするために、文書構造を示す要素が追加されました。⇒<a href="http://standards.mitsue.co.jp/resources/w3c/TR/h … 新しい要素</a>
＿＿＿</p>
＿＿＿<p>
＿＿＿＿このサンプルでは、文書構造を示すためにclass名にHTML5の新しい要素名を指定し、<em>その使い道もHTML5のそれに合わせてあります</em>から、<div class="header">は<header>に、<div class="section">は<section>に<div class="nav">は<nav>、<div class="footer">は<footer>に、それぞれ書き換えるとHTML5になります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿なお、段落は、<br>必ず<p&gt段落</p>(pはparagraph(段落)を示す要素)でマークアップするようにしましょう。日本語のように文字の大きいフォントで段落を字下げで示す場合は、スタイルシートで行の高さやtext-indentを指定します。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿folatは、本来画像の周囲にテキストを回りこませる目的のプロパティで、この様な段組には適していません。⇒9.5 浮動体（Floats）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
＿＿＿</p>
＿＿＿<p>
＿＿＿＿例えば左右を変更したり、３つ以上の段を並べ変えたり、本文中にfloatさせたい画像が現れたりすると厄介なことになります。絶対配置のほうがデザインの自由度は増しますし、文書構造がデザインに引きずられることもありません。
＿＿＿</p>
＿＿</div>
＿＿<div class="nav" id="contentTable">
＿＿＿<h3>目次</h3>
＿＿＿<ul>
＿＿＿＿<li><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … 4.01仕様書[邦訳]</a></li>
＿＿＿＿<li><a href="http://standards.mitsue.co.jp/resources/w3c/TR/h … における HTML4 からの変更点</a></li>
＿＿＿＿<li><a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … 邦訳</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2013-07-18 18:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ORUKA1951様

こんにちは。ご親切なのアドバイスをありがとうございます。
また、こちらからのご挨拶が遅れましたことをお詫び申し上げます。

DOCTYPEの指定など、これまでまったく気にしていなかった事でしたが、とても意味あることなのですね。

長文でのアドバイスに感謝いたします。ありがとうございました！

通報する

お礼日時：2013/07/21 17:44

No.1

回答者： blue-goheimochi
回答日時：2013/07/18 18:46

#main に指定している float:right; の回り込みの解除が無いからかと思われます。

<div id="outline">

<div id="main">

メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br>
メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br>
</div>

<div id="menu">

サイドメニューサイドメニュー
</div>

<div style="clear: both; visibility: hidden; height: 0;"></div>

</div>

上のように、<div id="menu"> のdivタグの後ろに、
回り込みを解除するdivタグを追加してみてください。