- ベストアンサー
自作ＨＰのレイアウトがセンターにきません！＞＜
- 自作ＨＰのレイアウトがセンターに配置されない問題が発生しています。
- ２段組みのみがセンターに配置されず、上下に隙間も発生しています。
- XHTMLとCSSのコードを投稿しましたので、ご確認いただけますでしょうか？
- hiromitsu418
- お礼率0% (0/2)
- レンタルサーバ・ASP
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 全体を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さんのご回答もごもっともだと思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すべて基本からやり直しされたほうがよかろうかと・・ HTML4.01の勧告(1999年)以来 ・transitinal HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) ・class="box_header"など DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) これ現実には理解されなくて「HTML5では、文書をよりよく構造化するために、新しい追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elem ents )」、すなわちclass="header"とかclass="section"としなさいということ。 今回は左に置くつもりのbox_leftを右や下に置きたくなったら困る。 ・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )とは、そういう意味 上記をまずしっかり読んでおくこと。 [例] ★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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:90%;/* 一応ウィンドウの90% */ min-width:630px;/* 630px以上は小さくしない */ max-width:1000px;/* 1000pxより大きくしない */ margin:0 auto;padding:5px; } div.section{position:relative;min-height:300px;} div.section div.nav{position:absolute;top:0;left:0;width:200px;height:100%;} div.section h2,div.section p{margin-left:205px;} div.header,div.section{border-bottom:4px lime ridge;} /* 色づけ */ div.header{background-color:aqua;} div.section{background-color:fuchsia;} div.section{background-color::lime;} div.section div.nav{background-color:yellow;} div.footer{background-color:silver;} --> ＿</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>
補足
大変お手数ですが、私のXHTMLとCSS全部をコピペして、修正するところだけ直して頂けないでしょうか・・・＞＜ よく分かりません？ ちなみに、 市販の本に記載されている 『段組み』の章で float: left; とか clear: both; とか margin-left: auto; margin-right: auto; は関係ないんですか？？？ どういう事なんでしょう？ 教えてください ＞＜