REDLINE MAGAZINE | jQueryでボックスを上下左右中央に簡単配置

jQueryでボックスを上下左右中央に簡単配置

ボックスを上下左右の中央に配置したレイアウトにしたい時の話。もちろんjQueryというかjavascriptを使わなくてもCSSだけでそんな風にしたい場合なんかのやり方もあるのだけれど。そんな場合はCSS HappyLifeさんのこちらの記事がオススメです。

>>ボックスを上下左右画面中央に｜CSS HappyLife

今回はjQuery Center pluginを使ってみる

先述の通り、CSSでもこうすればできるといった手法がいろいろあるわけだけど、jQueryのプラグインで秒殺できますよーというプラグイン「jQuery Center plugin」を使ってみます。

>>Plugins | jQuery Plugins

※プラグインなので当然jQuery本体も必要になります。
jQuery本体はこちら辺りからダウンロード。

親に対して、上下左右を中央パターン、左右だけ中央パターン、上下だけ中央パターンの３パターンがサクっと使えます。それぞれのソースはこんな感じ。

// 上下左右中央
$("class名とかid名とか").center();
//左右だけ中央
$("class名とかid名とか").center({
	vertical: false
});
//上下だけ中央
$("class名とかid名とか").center({
	horizontal: false
});

３パターンあるんだけど、左右だけ中央パターンに関してはCSSでmargin:0 auto;で十分だと個人的には思う。

サンプル・その1

>>サンプル01　３パターン配置してみます。

親ボックスが水色の背景のボックス。赤枠黄色のボックスがこのプラグインで配置してる部分。水色ボックスに対して黄色ボックスがどこにあるっていう風に見てください。

【jQueryとプラグインの読み込み部分】
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.center.js"></script>

【配置３パターンの指定】
<script type="text/javascript">
<!--
$(document).ready(function() {
	$("#box1").center();
	$("#box2").center({
		vertical: false
	});
	$("#box3").center({
		horizontal: false
	});
}); 
-->
</script>

【CSS部分】
<style type="text/css"><!--
.sample{
	width:100%;
	height:300px;
	background:#9cf;
	border:1px solid #666;
	margin-bottom:15px;
	}
#box1,#box2,#box3{
	width:300px;
	height:150px;
	background:#ffc;
	border:1px solid #f00;
	} 
--></style>

【HTML部分】
<div class="sample">
<div id="box1">
#box1<br />
ここ親ボックスの中で上下左右の中央にしてます。</div>
</div>
<div class="sample">
<div id="box2">
#box2<br />
ここ親ボックスの中で左右だけ中央にしてます。</div>
</div>
<div class="sample">
<div id="box3">
#box3<br />
ここ親ボックスの中で上下だけ中央にしてます。</div>
</div>

サンプル・その2

続きまして画面全体の上下左右にボックスおきたい場合。一番上に書いたCSS HappyLifeさんのページにも書かれてた様に、404ページとか、ログイン画面とか、内容が少ないページなどちょっとしたキャンペーンページみたいな用途で使えそうなやつです。

>>サンプル02　画面の上下左右に配置

ソースはサンプル1とほとんど同じなんですが、こっちはCSSの方でhtmlとbodyに対して以下を加えます。

html,body{
	height:100%;
	overflow-y:hidden;
	}

ここのheight:100%;は必ずhtmlとbodyの両方に。片方だけだとうまくいかない。

overflow-y:hidden;についてはheight:100%;を指定するとスクロールバーが出るので、それを消すためのおまけというか・・・だいたい上下左右の中央に配置したいボックスは高さもそんなにに高くないものだろう＝スクロールバーいらんだろ、という想定で入れただけです。スクロールバーが出ててもいいやという場合、それ以外の気になる事項（ディスプレイ小さくてスクロールしなきゃ見れない人いたらどうすんのよ！とか）がある場合、こんな記述はいらないです。

ブラウザのステータスバーの部分の高さも含めての上下中央だからちょっと下に下がってるのが気になりつつも、結構使える場面多いかもなーと思いました。

※もちろんブラウザのJSが無効の際は効果なしとなるので、この辺りに関して、コンテンツ自体が表示されないわけではないけど、内容的な不都合が出るようなら使えない。そんな時はやっぱりCSSで！

2008年10月22日 22:08 | Red | パーマリンク