jQuery入門講座：要素のセンタリング

要素のセンタリング

サンプル紹介

上下のセンタリングを簡単に

プラグイン「center element plugin」を利用すれば簡単に要素をセンタリングすることができます。左右のセンタリングはcssで簡単にできますが、上下のセンタリングは大変なので、これに頼ってしまうのも良いかもしれません。スマートフォン（iOS,Android）でも動作します。　

左の画像をクリックするとサンプルが開きます。このサンプルでブラウザサイズを変更し、つねにグレーの■がセンタリングされることを確認して下さい。

組み込み

center element plugin著作権：MIT License: ダウンロードサイト：Center element plugin | jQuery Plugins
※リンク先に利用方法が記述されています。

htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。center element pluginに関わらずプラグインはjQueryのリンクより後に記述するようにしましょう。

<script type="text/javascript" src="jquery.center.js"></script>

構文

「center element plugin」プラグインを組み込むと、以下のcenterメソッドが追加されます。

要素のセンタリング返値：jQueryオブジェクト: jQo.center( [オプション] )
・オプションはobjectオブジェクトで設定し、以下のプロパティが利用できます
　・horizontal：falseを設定することで「左右」方向のセンタリングをOFFにできます
　・vertical：falseを設定することで「上下」方向のセンタリングをOFFにできます

解説

最小設定のセンタリング

利用方法は非常にシンプルで以下の様に設定するだけです。セレクタでセンタリングしたい要素を設定し、それに対してcenterメソッドを利用するだけです。センタリングは親要素の座標系に対して行われます。

サンプル（center/01.html）を開いて、body内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素に対してcenterメソッドを利用しているだけです。

$(function(){
	$("div").center();
});

これだけでセレクタで指定したdiv要素をセンタリングすることができます。センタリングは親要素の座標系に対して実行されるため、サンプルではbody要素内でのセンターに配置されます。

上下（左右）のみのセンタリング

centerメソッドには引数にobjectオブジェクトを設定することで、上下方向または左右方向のみにセンタリングできます。サンプル（center/02.html）を開いてbody内の構成はcenter/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、centerメソッドの引数にobjectオブジェクトが設定されています。設定されたobjectオブジェクトにはhorizontalプロパティがfalseに設定されています。その結果、左右方向のセンタリングは行われず上下方向のみのセンタリングとなります。

$(function(){
	$("div").center({horizontal:false});
});

horizontalプロパティの代わりにverticalプロパティをfalseにすると左右方向のみのセンタリングとなります。サンプル（center/02b.html）を開いてbody内の構成はcenter/02.htmlと同じ事を確認してください。

jQueryは以下の様に変更され、verticalプロパティをfalseにしています。その結果、上下方向のセンタリングは行われず左右方向のみのセンタリングとなります。

$(function(){
	$("div").center({vertical:false});
});

center element pluginプラグインは実用的なコンテンツには利用しないかもしれませんが、Flashのスペシャルサイトのような全画面を利用するようなコンテンツでは便利かもしれません。

メソッドチェーンも可能です

centerメソッドはjQueryオブジェクトを返すので、他のjQueryのメソッド同様に後にメソッドを連結することができます。サンプル（center/03.html）を開いて、ほとんどcenter/01.htmlと同じ事を確認して下さい。

異なっているのは以下の様にcenterメソッドの後にcssメソッドを連結してdiv要素の背景色をオレンジに変更している点だけです。結果としてcenter/01.htmlと異なりdiv要素がオレンジ色になります。

$(function(){
	$("div").center().css("background-color", "#f93");
});

メモ

移動アニメ付きのセンタリング

センタリングの処理は意外とシンプルに実現できるので、練習としてサンプルを作成してみました。まずは要素をセンタリングする計算式を紹介します。
以下の様に親要素の値から自分の要素の値を引いた値を2で割った座標になります。

親要素のセンターに配置する計算式: X座標 =（親要素の幅 - 自分の幅）/ 2
Y座標 =（親要素の高さ - 自分の高さ）/ 2

この計算式を実際にjQueryとして記述したのがサンプル（center/test01.html）となります。jQueryを確認する前にcssの設定を確認します。animateメソッドによって移動するので以下の様にpositionを設定しています。

div{
	position:relative;
	width:100px;
	height:100px;
	background-color:#666;
}

続いてjQueryを確認します。1行目では操作する対象を指定しています（サンプルではdiv要素）。2行目ではトラバージングのparentメソッドを利用して対象の親要素を選択します。そして3,4行目で対象要素の幅と高さを測ります（対象要素の大きさは途中で変化しないため最初に1回だけ計測しておけばOKです）。

つづいてセンター座標を返す「calcCenterFunc」の説明です。returnは1つの値しか返せないため、objectオブジェクトを利用してX座標とY座標を返すようにします。なので7行目でobjectオブジェクトを作成しています。8,9行目で親要素の幅と高さを測ります。対象要素と異なり、大きさが変化するためfunctionが実行される度に測定するようにします。そして10,11行目で計算式に従いセンター座標を求めて、作成したobjectオブジェクトに設定します（小数点は必要何のでjavaScriptのfloorメソッドで切り捨てます）。

var myTarget = $("div");
var myParent = myTarget.parent();
var myWidth = myTarget.width();
var myHeight = myTarget.height();
		
function calcCenterFunc() {
	var centerPos = new Object();
	var parentWidth = myParent.width();
	var parentHeight = myParent.height();
	centerPos.x = Math.floor((parentWidth - myWidth)/2);
	centerPos.y = Math.floor((parentHeight - myHeight)/2);
	return centerPos;
}

サンプルcenter/test01.htmlでは計算式の設定しかしていないため、div要素はセンタリングされません。実施にセンターに配置するサンプル（center/test02.html）を開いてソースを確認してください。

jQueryに以下の3行が追加されているだけです。1行目でcenter/test01.htmlで作成したcalcCenterFuncを利用して座標を算出し、その結果をcssメソッドを利用して指定した要素の位置を設定しています。

var centerPos = calcCenterFunc();
myTarget.css("left", centerPos.x);
myTarget.css("top", centerPos.y);

しかしcenter/test02.htmlではブラウザウインドウの大きさを変更しても位置が変わりません。なのでresizeイベントを利用してウインドウサイズが変更されたら位置を移動するようにします。

サンプル（center/test03.html）のソースを開いて、以下の処理が追加されていることを確認して下さい。この処理によってウインドウがリサイズされたらcalcCenterFuncを利用してセンター位置を算出しanimateメソッドを利用してセンター位置に移動するようにしました。

$(window).resize(function(){
　var centerPos = calcCenterFunc();
　myTarget.stop(true, false).animate({"top":centerPos.y, "left":centerPos.x});
});

プラグインではないので使い勝手は悪いのですが、何かの参考になればと思います。

次のページ：クッキーの操作