REDLINE MAGAZINE | jQueryでボックスを上下左右中央に簡単配置REDLINE MAGAZINEトップページへ

すべてのエントリを見る

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

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

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

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

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

>>Plugins | jQuery Plugins

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

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

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

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

サンプル・その1

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

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

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

【配置3パターンの指定】
<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で!

<< jQueryでnの倍数だけに何か処理する(追記有) | スペースは嫌、class付けるのも嫌な時用(追記有) >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/200

jQueryでボックスを上下左右中央に簡単配置 へのトラックバック一覧

» jQueryを使用してボックスを上下左右中央に配置する 送信元 Ys DESIGN
ボックスの中にイメージ画像などを配置する場合、どのようなサイズの画像が入っても「上下左右中央に画像を配置したい」という時があります。どうすれば実現するので...
Trackback time : 2009.03.15

コメント (4)

RedLine Magazine管理人様、初めまして。
ミラクルと申します。

「jQueryでボックスを上下左右中央に配置」という記事、大変参考になりました。
どうすれば実現するのか悩んでいたので、助かりました。
ありがとうございました。m(_ _)m

また、参考にさせて頂くこともあるかもしれませんが、その際はどうぞよろしくお願いいたします。
それでは、失礼いたします。

>ミラクルさん
コメント、トラックバックありがとうございました。
JS無効だったら意味ないけど、まぁ内容が消える事もないし、変にCSSでトリッキーな事するよりも気が楽というか・・・使いやすいスクリプトですよね(n' ω 'n)

こんにちは。
私も、意外と便利なプラグインだなぁ、などと思っていたのですが、これどうも、paddingとborderがある場合は左右のセンタリングが正しくないようです。なぜか上下は正しい…。
ためしに
padding:10px 50px;
などと差を付けてみると分かりやすいです。

で、ソースを見てみたら、やはり左右だけ計算していないみたいです。
なんでしょうね??何か理由があるんでしょうかね?
そんなの作者に直接聞けと言われそうですが、作者のページを覗いたら、ポルトガル語?だったもので…^^;

で、理由など調べたり面倒だったんで、勝手に直してしまいました。ついでにソースが非常に冗長的だったのでコンパクトに。

$.fn.center = function(params) {
op = $.extend({vertical: true, horizontal: true}, params);
return this.each(function(){
var self = $(this);
var cssProp = {position: 'absolute'};
if(op.vertical) {
cssProp.height = self.height() + 'px';
cssProp.top = '50%';
cssProp.marginTop = '-' + (self.outerHeight() / 2) + 'px';
}
if(op.horizontal) {
cssProp.width = self.width() + 'px';
cssProp.left = '50%';
cssProp.marginLeft = '-' + (self.outerWidth() / 2) + 'px';
}
if(self.parent().css('position') == 'static')
self.parent().css('position', 'relative');
self.css(cssProp);
});
};

>entZさん
コメントありがとうございました。
そういった挙動をしているの、ぜんぜん気付いてませんでした(;´Д`)
ソースの手直しもありがとうございました!
感謝感謝ですヾ(*・∀・)ノ"




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。