自作ＨＰのレイアウトがセンターにきません！＞＜。。

解決済

質問者：hiromitsu418
質問日時：2014/06/14 06:48
回答数：2件

サイトのレイアウト構成は、『ヘッダー・２段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか２段組みのとろだけ、センターにきません。

また、３つの構成に上下に隙間が出来てしまいます。

誰かどこがオカシイのか教えてください。

下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか？

ご回答お待ちしております。

　【XHTML】
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<title>　Ｌｉｓｔ　</title>

<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<div class="box_header">
</div>

<hr />

<div class="box_a">
</div>

<div class="box_b">
</div>

<hr />

<div class="box_footer">
</div>

</body>

</html>

　【CSS】
@charset "shift_jis";

body {
background-color: #ffffff;
margin-left: auto; margin-right: auto;
font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","ＭＳＰゴシック",;
}

hr {height: 1px;
width: 100%;
background-color: #000000; }

div.box_header { background-color: #ff0000;
width: 1200px;
height: 200px;
margin-left: auto; margin-right: auto; }

div.box_a { background-color: #808080;
float: left;
width: 800px;
height: 2000px;
margin-left: auto; margin-right: auto; }

div.box_b { background-color: #0000ff;
float: left;
width: 400px;
height: 2000px;
margin-left: auto; margin-right: auto; }

div.box_footer { background-color: #008000;
clear: left;
width: 1200px;
height: 200px;
margin-left: auto; margin-right: auto; }

通報する

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

質問の本文を隠す

回答 (2件)

No.2

回答者： ORUKA1951
回答日時：2014/06/14 12:02

すべて基本からやり直しされたほうがよかろうかと・・

HTML4.01の勧告(1999年)以来
・transitinal
　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・class="box_header"など
　DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　これ現実には理解されなくて「HTML5では、文書をよりよく構造化するために、新しい追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h …
ents )」、すなわちclass="header"とかclass="section"としなさいということ。
　今回は左に置くつもりのbox_leftを右や下に置きたくなったら困る。
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )とは、そういう意味
　上記をまずしっかり読んでおくこと。

[例]
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で検証済みのHTML4.01strict + CSS2.1
★タブは＿に置換してあるので戻す。
★サイズはスマホ用の640px～1000pxまで可変です。900pxを越すと中央配置
　floatは使っていないため、重要な内容を先に書けます。ナビゲーションは
　右だろうが左だろうが後だろうが、ページの最上部だろうが自由に変更できます。
★スタイルシートもHTLも誰でもわかりやすい。

<!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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="nav">
＿＿＿<h3>ナビゲーション</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/Blog">ブログ</a></li>
＿＿＿＿<li><a href="/contact">問合せ</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.3ベストアンサー

回答者： nana_coco
回答日時：2014/06/14 12:15

こんにちは。

全体をDIVでくくる方法もありますが、とりあえずbox_aとbox_bをDIV(box_ab)でくくれば真ん中にはなると思います。

<div class="box_ab">
<div class="box_a">
</div>
<div class="box_b">
</div>
</div>

【CSS】
.box_ab {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}

ちなみに、No2さんのご回答もごもっともだと思います。

この回答への補足

大変お手数ですが、私のXHTMLとCSS全部をコピペして、修正するところだけ直して頂けないでしょうか・・・＞＜
よく分かりません？

ちなみに、
市販の本に記載されている
『段組み』の章で

float: left;
とか
clear: both;
とか
margin-left: auto; margin-right: auto;
は関係ないんですか？？？

どういう事なんでしょう？

教えてください　＞＜