- 締切済み
レイアウトがズレル
お世話になります。 スタイルシートの勉強中ですが、以下のようなソースを書くものの、左右のサイドメニュー部、メイン部にズレが生じてしまいます。 （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）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
互換表示にしないこと!!鉄則です。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 互換表示は、ブラウザごとに異なる仕様であった(特に古い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-html401j/conform.html#h-4.1 )」 さて、本題ですが、下記のように記述すると良いはずです。説明はスペースが無駄なので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"> <!-- div.header,div.section,div.footer{ width:80%;min-width:480px;max-width:900px; margin:0 auto; } h1,h2,h3,p{margin:0 10px;line-height:1.6em;} p{text-indent:1em;} div.section{position:relative;min-height:400px;} div.section h2{display:none;} div.section div.section{ min-height:0; min-width:0; margin-left:162px;width:auto; border: 1px solid #C0C0C0; } div.section div.nav{ font-size:0.9em; position:absolute; top:0;left:0; width:160px;height:100%; border: 1px solid #C0C0C0; } div.nav ul{margin:0 2px;} --> ＿</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-html401j/intro/intro.html#h-2.4.1">構造とプレゼンテーションの分離</a></q>が叫ばれながら文書構造を示す要素が不足していたために、<q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4">id属性及び class属性と併用することで、文書に構造を付加する</a></q>とされていましたが、これは理解されたとは言いがたく、<div id="outline">、<div id="main">のように、idやclass名が文書構造ではなく、プレゼンテーションのために使われていました。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿HTML5では、この反省から、文書構造を明確にするために、文書構造を示す要素が追加されました。⇒<a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements">3.1. 新しい要素</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>段落</p>(pはparagraph(段落)を示す要素)でマークアップするようにしましょう。日本語のように文字の大きいフォントで段落を字下げで示す場合は、スタイルシートで行の高さやtext-indentを指定します。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿folatは、本来画像の周囲にテキストを回りこませる目的のプロパティで、この様な段組には適していません。⇒9.5 浮動体（Floats）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats ) ＿＿＿</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-html401j/cover.html">HTML 4.01仕様書[邦訳]</a></li> ＿＿＿＿<li><a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/">HTML5 における HTML4 からの変更点</a></li> ＿＿＿＿<li><a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html">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>
- blue-goheimochi
- ベストアンサー率72% (39/54)
#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タグを追加してみてください。
お礼
blue-goheimochi様 こんにちは。質問投稿後、早速のアドバイスをあろがとうございます。 また、こちらからのご挨拶が遅れましたことをお詫び申し上げます。 的確なアドバイスの感謝いたします。 ありがとうございました！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ORUKA1951様 こんにちは。ご親切なのアドバイスをありがとうございます。 また、こちらからのご挨拶が遅れましたことをお詫び申し上げます。 DOCTYPEの指定など、これまでまったく気にしていなかった事でしたが、とても意味あることなのですね。 長文でのアドバイスに感謝いたします。ありがとうございました！