電子書籍の厳選無料作品が豊富！

中央寄せ

解決済

  • 質問者：flash0
  • 質問日時：
  • 回答数：2件

ie6でmargin:0 autoで中央寄せできないバグがありましたが
ie7では中央寄せできるようになったのでしょうか？

よろしくお願いします

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　バグと言うより、IE6当時まだCSS2が未確定でした。

IEは、元々MicrosoftにとってOSを販売すための手段でしかなく、ウェブの仕様が変わってもIEのユーザーのために修正していくという手法が取られていません。
　IE7だと、CSS2に相当対応はされていますが、完全ではありません。また、過去にIE用に作られたページを当時の仕様どおりに見せるための互換モードが標準でした。IE8以降はウェブ標準がデフォルトになりましたが、その場合も互換モードが使えます。
　その切り替えは、DOCTYPE宣言で行われますので、DOCTYPEを正しく書いて、かつHTMLをstrictで記述すれば、IE6以降なら配置に関しては期待通り--ウェブ標準--に表示されます。
　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )
★IE6でも、標準モードだと中央に配置されます。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
＞ie7では中央寄せできるようになったのでしょうか？
　IE6を含め作者次第です。
1) HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　でチェック(右上のDATAから)
　DOCTYPEを標準モードで動作するように正しく書く
2) スタイルシートをきちんと書く
　W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　　この二つで、配置に関しては差はでなくなるでしょう。
[サンプル]
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　でチェック済みのHTML4.01strict + CSS2.1です。
　IE6は、(static以外の)親コンテナブロックのサイズを参照できませんから、nav(ナビゲーションの高さが指定されない)
　IE6はmin-heightの指定が利かない

★タブは＿に置換してあるので戻す。
<!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">
<!--
html,body{margin:0;padding:0;background-color:gray;}
div.header,div.section,div.footer{
width:80%;min-width:630px;max-width:900px;
margin:0 auto;
padding:5px 10px;
}
div.section{
min-height:200px;
position:relative;
}
div.section div.nav{
position:absolute;
right:0;top:0;
width:20%;height:100%;
}
div.section h2,div.section p{
line-height:1.8em;
margin:0 21% 0 0;
}
/* 分かりやすいよう色づけ */
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section h2,div.section p{background-color:rgb(255,255,180);}
div.section div.nav{background-color:silver;}
div.footer{background-color:lime;}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>
＿＿＿ie6でmargin:0 autoで中央寄せできないバグがありましたが、ie7では中央寄せできるようになったのでしょうか？
＿＿</p>
＿＿<p>
＿＿＿よろしくお願いします
＿＿</p>
＿＿<p>
＿＿＿ie6でmargin:0 autoで中央寄せできないバグがありましたが、ie7では中央寄せできるようになったのでしょうか？
＿＿</p>
＿＿<p>
＿＿＿よろしくお願いします
＿＿</p>
＿＿<div class="nav">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li>第一章</li>
＿＿＿＿<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>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます
<!DOCTYPE html>
HTML5を使うときはie6、ie7でmargin: auto;で中央寄せできますか？

通報する
お礼日時：2013/10/23 11:01

No.2

  • 回答者： ORUKA1951
  • 回答日時：

No.1です。


＞HTML5を使うときはie6、ie7でmargin: auto;で中央寄せできますか？
　えっ!!。HTML5を使う時点で、IE6,IE7,(IE8)は切り捨ててますから・・・考慮しません。
　スマホやIE9以降、および他のモダンブラウザ、firefox,Opera,Chromeをターゲットに絞ります。
　HTML5で書いてIE6,7,8はターゲットブラウザでないので、質問自体が矛盾しています。(javascriptを使って対処は出来ますが、javascriptを無効にしていたら崩れます。)

{HTML5のサンプル]・・かならず、試すこと
★タブは＿に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<style media="screen">
<!--
html,body{margin:0;padding:0;background-color:gray;}
p{text-indent:1em;}
header,section,footer{
width:80%;min-width:630px;max-width:900px;
margin:0 auto;
padding:5px 10px;
}
h1,h2,h3,p{
margin:0;line-height:1.8em;
}
section{
min-height:200px;
position:relative;
}
section section{
width:auto;min-width:0;
margin:0 auto;
padding:0;
min-height:0;
}
section nav{
position:absolute;
right:0;top:0;
width:20%;height:100%;
}
section section,section h2{
margin:0 22% 0 0;
}
/* 分かりやすいよう色づけ */
header{background-color:aqua;}
section{background-color:white;}
section h2,section p,section h3{background-color:rgb(255,255,180);}
section nav{background-color:silver;}
footer{background-color:lime;}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</header>
＿<section>
＿＿<h2>見出し</h2>
＿＿<section>
＿＿＿<h3>質問</h3>
＿＿＿<p>
＿＿＿＿ie6でmargin:0 autoで中央寄せできないバグがありましたが、ie7では中央寄せできるようになったのでしょうか？
＿＿＿</p>
＿＿＿<p>
＿＿＿よろしくお願いします
＿＿</section>
＿＿<section>
＿＿＿<h3>回答</h3>
＿＿＿<p>
＿＿＿＿IE8以前は、HTML5の新しい要素を理解できませんから、それらをターゲットにするときはHTML5は使用しません。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿また、DIVは原則として使えなくなりますし。
＿＿＿</p>
＿＿</section>
＿＿<nav>
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li>第一章</li>
＿＿＿＿<li>第二章</li>
＿＿＿＿<li>第三章</li>
＿＿＿＿<li>第四章</li>
＿＿＿</ol>
＿＿</nav>
＿</section>
＿<footer>
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました
勉強になりました

通報する
お礼日時：2013/10/23 23:55

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報