- ベストアンサー
ページ全体を中央に表示する方法
- ページ全体を中央に表示する方法について説明します。
- 指定されたコードを使用してページ全体を中央に表示しようとしましたが、若干左に寄ってしまいます。
- body要素とmain要素のスタイルを修正することで、ページ全体を中央に配置することができます。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
DOCTYPEは正しく書きましたか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ・・これで、「下記のautoに未対応用のセンタリング」の必要はほとんどなくなるはずです。IE7以降は中央に配置されます。 全体を囲む必要は無いですが、もし使用するなら、mainより、articleのほうが適切でしょう。(idやclass名は文書構造を示すために記述します。 文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) が、HTML5を見据えるとHTML5の要素名にしてclassのほうが良いでしょう。 ⇒4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-main-element ) ⇒4.4.2 The article element( http://www.w3.org/TR/html5/sections.html#the-article-element ) 幅は最近のようにスマホや幅広ディスプレイなど様々な利用を考えるとリキッドのほうが楽でしょう。 ★タブは＿に置換してあるので戻す。 <!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;} div.header,div.section,div.footer{ width:70%; min-width:470px;/* スマホ用 */ max-width:900px;/* 幅広ディスプレイ用 */ margin:0 auto;/* 中央配置 */ padding:5px; } div.section{position:relative;}/* 内容の位置基準にするため */ div.section div.section{ min-height:200px; margin:0 0 0 21%;/* 左を空ける */ width:auto;/* 幅指定を戻す */ min-width:0; } div.section h2,div.section p{ margin-left:21%;/* 左を空ける */ } div.section div.section p{ margin-left:0;/* 元に戻す */ } div.section div.contentTable{ position:absolute; /* 以下、position:staticでない直近の親を参照 */ width:20%;height:100%;/* 目次の位置決め */ top:0;left:0; } /* 分かりやすいように色 */ body{background-color:gray;} div.header{background-color:white;} div.section{background-color:lime;} div.footer{background-color:aqua;} div.section div.contentTable{background-color:fuchsia;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div class="section" id="section1"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="section2"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#section1">1章</a></li> ＿＿＿＿<li><a href="#section2">2章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
回答ありがとうございました。