開発チームブログ
box要素を画面中央に配置
- 投稿日
- 2009年08月17日
- カテゴリ
- 開発チームブログ
お盆ももう終わり。
ようやく8月に入って夏らしくなりましたが、北海道の夏は短い...。
ご存じの方も多いかもしれませんが、北海道の夏休みは暖かい地域と違って、25日間しかありません。
今年はだいたい20日前後には夏休み終了のようです。
そろそろ半泣きになった子供たちがたまりにたまった宿題に手をつけ始めるころですね。
（そういう私も、夏休みの宿題のごとくこのブログを書いているのですが...）
さて、今回は「box要素を画面中央に配置」する方法を書いてみたいと思います。
タイトルだけだとピンとこない感じがしますが、画面中央に上下左右センタリングするというものです。
<table>タグを使ってレイアウトを組んでいた時代は、<td>タグにalignやvalignを指定することで、
そのセルの中の要素を上下左右のセンタリングが可能でしたが、
xhtmlでは原則として<table>は表以外の使い方は好ましくありませんので、使用できません。
となると、他の方法で指定しなければならないのですが、
左右はともかく、上下のセンタリングを指定するcss(<table>タグでいうところのvalign)がないので、
どうにか方法を考えないといけません。
というわけで、下のソース。
// HTMLソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<body>
<div id="main">
<img src="image/main.jpg" width="600" height="300" />
</div>
</body>
// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
#main {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 300px;
margin-top: -150px;
margin-left: -300px;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
すごく簡単にするために最小限のソースしか書いていませんが、
“main”というdivに幅600px×高さ300pxの画像を1枚表示します。
cssなしだと、ブラウザの左上に画像が表示されるだけです。
これをcssでブラウザの上下左右それぞれ中央に合わせてみます。
まず、div要素“main”の幅と高さをwidthとheightを使って固定します。
次にpositionに絶対配置指定(absolute)し、topとleftにそれぞれ50%と指定します。
こうすることで、ブラウザウィンドウに対して上下左右50%の位置にmainが移動します。
これで「画面中央に配置」が完了します.......と言いたいところですが、
このままだと、“main”の左上がウィンドウの中心に合ってしまい、画像は中央に表示されません。
なので、最後にmargin-topにネガティブなマージン-150px、margin-leftに-300pxを追加します。
これで、“main”の幅の半分が左にずれ、高さの半分も同様に上にずれるので、
“main”の中心がウィンドウの中心と重なります。
この方法だと、“main”の幅、高さが決まっていないといけない制約がつきますが、
cssでの上下センタリングを実現できます。
業種別インタビュー
業種別ブログ
開発チームプロフィール
開発チーム
team Developers
LULER WEB CREATIONS 所属
(SE / WEBデザイナー / コーダ-)
Comment
開発チーム@ブログでは、SE/プログラマーの山口とコーダー/イラストレーターの齋藤が主に記事を更新しております。WEBコンテンツ開発にまつわる情報やネットワーク/サーバ管理に関する情報など業界ポッドでもかなりマニアックなスタッフブログです。同業者の方や本業界に興味のある方はどうぞ。
