「CSSでページを常に中央に表示させて、拡大縮小しても崩れないようにする。」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
ブラウザを拡大縮小したときに、左上が常に基準点としておかれ、2つ幅の違う枠組みを作った時に、整形がずれるってことがあります。そんな中で常に中央にし、拡大や縮小したとき、ディスプレイの解像度がかわったときにでも中央揃えする方法をまとめていきたいと思います。6月11日記事
~
~
目次
#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)
のようになります。
ブラウザを拡大縮小したときに、左上が常に基準点としておかれ、2つ幅の違う枠組みを作った時に、整形がずれるってことがあります。そんな中で常に中央にし、拡大や縮小したとき、ディスプレイの解像度がかわったときにでも中央揃えする方法をまとめていきたいと思います。6月11日記事
~
~
目次
#contents
~
~
----
*BEFORE
**表示1通常
上側は1000px下側は1600pxの幅のボックスを並べたいとします。こんな感じ
#image(width=600,001.jpg)
~
~
**表示1拡大
しかし、拡大すると、&color(red){下側1600pxが上のボックスの基準点に合わせようとずれてしまいます。}~
#image(width=600,002.jpg)
~
~
そうではなく、このようではなく以下のようにしたいのです。
~
~
*AFTER
**表示2通常
#image(width=600,003.jpg)
~
~
**表示2拡大
#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;/*headerにwidthやheightを記入するのはあまり好ましくないですがご了承ください。*/
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: -800px; /*1600の半分*/
width: 1600px;
background: #e3e3e3;
}
header{
width: 1000px;/*headerにwidthやheightを記入するのはあまり好ましくないですがご了承ください。*/
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)
のようになります。
