（つくば：カエル）
スタイルシートでボックスを画面中央に配置
ちょうどこの技術を教えることになったので、メモ。
ボックスを画面中央に配置したい時、横は簡単にできるけど、
縦はどうする?!と昔悩みましたね。。
（テーブルレイアウトなら簡単にできるのに、と）
横幅と縦幅が決まっているデザイン（ログイン画面）などに重宝します。
【サンプル】
ボックスを画面中央に配置したい時、横は簡単にできるけど、
縦はどうする?!と昔悩みましたね。。
（テーブルレイアウトなら簡単にできるのに、と）
横幅と縦幅が決まっているデザイン（ログイン画面）などに重宝します。
【サンプル】
body
#container
【HTMLソース】
【CSSソース】
CSSの下記部分で、containerボックスの左頂点を画面中央になるように配置し、
下記部分で、containerボックスの中心を画面中央になるように移動しています。
今回のcontainerボックスは横300ピクセル、縦140ピクセル。
横300÷2＝150ピクセルなので左に-150ピクセル、
縦140÷2＝70なので上に-70ピクセル、といった計算になります。
上記まででも画面中央に配置されていますが、ウインドウサイズが#containerボックスより小さくなると左上が切れて表示されなくなってしまいます。
min-widthとmin-heightを加えて、ウインドウサイズが#containerボックスより小さくなった場合は、スクロールバーが出るようになります。
ただ、IE6ではmin-widthとmin-heightが実装されていないので、
IE6でmin-widthなどが使えるようになるJavaScript「minmax.js」を導入。
HTMLに追加するだけでIE6でもスタイルが使えるようになります。
<body>
<div id="container">
内容
</div>
<script type="text/javascript" src="minmax.js"></script>
</body>
【CSSソース】
html {
height: 100%;
overflow-y: scroll;
}
body {
position: relative;
height: 100%;
min-width: 320px;
min-height: 160px;
}
#container {
margin: -70px 0 0 -150px;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 140px;
overflow: hidden;
}CSSの下記部分で、containerボックスの左頂点を画面中央になるように配置し、
#container {
position: absolute;
top: 50%;
left: 50%;
}下記部分で、containerボックスの中心を画面中央になるように移動しています。
#container {
margin: -70px 0 0 -150px;
}今回のcontainerボックスは横300ピクセル、縦140ピクセル。
横300÷2＝150ピクセルなので左に-150ピクセル、
縦140÷2＝70なので上に-70ピクセル、といった計算になります。
上記まででも画面中央に配置されていますが、ウインドウサイズが#containerボックスより小さくなると左上が切れて表示されなくなってしまいます。
min-widthとmin-heightを加えて、ウインドウサイズが#containerボックスより小さくなった場合は、スクロールバーが出るようになります。
html {
height: 100%;
overflow-y: scroll;
}
body {
position: relative;
height: 100%;
min-width: 320px;
min-height: 160px;
}
ただ、IE6ではmin-widthとmin-heightが実装されていないので、
IE6でmin-widthなどが使えるようになるJavaScript「minmax.js」を導入。
<script type="text/javascript" src="minmax.js"></script>
HTMLに追加するだけでIE6でもスタイルが使えるようになります。
IEでiframeのボーダーが消えない
スタイルシートでボックスを中央に配置
Firefoxで携帯サイトをシミュレートするアドオン
IEで画像の下に意図しないマージン（余白）が出る
JavaScriptがいらないGoogleマップ API
Shift_JISのページでGoogle マップ API
スタイルシートでボックスを中央に配置
Firefoxで携帯サイトをシミュレートするアドオン
IEで画像の下に意図しないマージン（余白）が出る
JavaScriptがいらないGoogleマップ API
Shift_JISのページでGoogle マップ API
（つくば：カエル）
comments
焦りました；
普通に表示されたようで何よりです。