「CSSでページを常に中央に表示させて、拡大縮小しても崩れないようにする。」の編集履歴（バックアップ）一覧に戻る
拡大縮小したときに、左上が常に基準点としておかれ、整形がずれるってことがあります。そんな中で常に中央にし、拡大や縮小したとき、ディスプレイの解像度がかわったときにでも中央揃えする方法を書いていきたいと思います。
~
~
#contents
~
~
----
*表示1
**通常
#image(width=600,001.jpg)
~
~
**拡大
#image(width=600,002.jpg)
~
~
このようではなく以下のようにしたい。
*表示2
**通常
#image(width=600,003.jpg)
~
~
**拡大
#image(width=600,004.jpg)
~
~
のようにしたいのです。
*コード
**HTML部
HTMLは共通でいいです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>常に中央揃え</title>
</head>
<body>
<header></header>
<div id="wrapper"></div>
</body>
</html>
**表示1のCSS
通常の記述
header{
width: 1000px;
height: 400px;
background: #F00;
margin: 0 auto;
}
#wrapper{
width:1600px;
height: 1200px;
background: #0F0;
margin:0 auto;
background: url(1600.png);
}
この方法だと、&color(red){拡大縮小や解像度が小さいときに下側wrapperがずれます。}
**表示2のCSS
基準点を常に中央に設定させるためにbodyタグに、position:absoluteを指定し、最大の長さの半分のところを左側マージンをとってマイナスをつけるようにします。
body{
position:absolute;
left: 50%;
margin-left: -1000px;
width: 2000px;
background: #e3e3e3;
}
header{
width: 1000px;
height: 400px;
background: #F00;
margin: 0 auto;
}
#wrapper{
width:1600px;
height: 1200px;
background: #0F0;
margin:0 auto;
background: url(1600.png);
}
すると拡大しても
#image(width=600,004.jpg)
のようになります。
