ブロック要素を画面の中央に配置する際、左右はCSSの「margin-left:auto;」と「margin-right:auto;」で容易に指定できるけれど、縦の場合「auto」では反映されないので他の方法を探して２つの方法を見つけることができた。
一つ目はCSSで行う方法。
二つ目は「jquery.center.js」というプラグインを使う方法。
ただ、どちらも状況によって一部のエリアが表示されなくなってしまう場合があるので、もう少し何とかできないかと別案を考えてみた。
■CSSで画面の中央に配置する場合。
ネットでよく見かけたのがこれ。
まず中央に配置したいブロック要素を「position:absolute;」で一度画面の右下50%の位置に移動させ、次に「margin」で左上にブロック要素の縦横半分のサイズをマイナス値として指定するというもの。
#container {
height:600px;
width:800px;
position:absolute;
top: 50%;
left:50%;
margin-top: -300px;
margin-left: -400px;
}
ただ一つ問題となるのが画面のサイズをブロック要素より小さくしたとき。
ブロック要素の上と左を「margin」でマイナス値を設定していることから、<BODY>のエリアサイズより大きくなってしまうと上と左が隠れてしまう。
この場合スクロールすることも出来ないため、完全に表示できないエリアが存在することになってしまう。
■JQueryのプラグインを使ってセンタリングする。
JQueryのプラグインで「jquery.center.js」というのがあるので、これを使うと指定のブロック要素を簡単に中央配置することができる。
方法としては、まずJQuery本体とjquery.center.jsを読み込む。
次に天地左右の中央配置とするのか、左右のみまたは天地のみの中央揃えとするのかを指定。
「#container」のブロック要素を天地左右の中央に配置する場合。
$(function() {
$("#container").center();
});
左右のみ中央に揃える場合。ただし左右だけならCSSでもできるので、あえてJQueryを使う必要は無いと思う。
$(function() {
$("#container").center({
vertical: false
});
});
天地のみ中央に揃える場合。
$(function() {
$("#container").center({
horizontal: false
});
});
注意点としては、対象となるブロック要素の縦横サイズを指定しているCSSファイルを先に読み込ませること。
それとCSSで<HTML>と<BODY>の両方に「height : 100%;」の指定を入れておく必要があるようです。
html, body { height:100%; }
手間的にはCSSで設定するのとあまり変わらない。というか、個人的には若干JQueryのほうが面倒な気がする。
それと、この方法もCSSと同じで画面サイズがブロック要素より小さくなってしまうと上と左が表示できなくなってしまう。
■そこでJQuery使ってちょこっと考えてみた
まず、目標とする仕様。
一つはもちろんブロック要素の大きさが画面サイズより小さいときは常に中央配置。
そして、画面サイズのほうが小さくなってしまった場合は、左上を起点に固定して右と下をスクロール表示して全体を見ることが出来るようにする。
で考えたのがこれ。
function centering(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var elementWidth = $("#container").width();
var elementHeight = $("#container").height();
if((windowWidth - elementWidth) > 0){
var marginLeft = (windowWidth - elementWidth)/2;
$("#container").css("margin-left",marginLeft);
}else{
$("#container").css("margin-left",0);
}
if((windowHeight - elementHeight) > 0){
var marginTop = (windowHeight - elementHeight)/2;
$("#container").css("margin-top",marginTop);
}else{
$("#container").css("margin-top",0);
}
}
//ページ読み込み時に実行
$(function(){
centering();
});
//画面がリサイズされたときに実行
$(window).resize(function(){
centering();
});
内容としては、まず画面の縦横サイズとブロック要素の縦横サイズを取得。
次に画面の横幅がブロック要素の横幅より大きい場合は、その差分サイズの半分を「margin-left」に設定。そうで無い場合は「0」に指定する。
縦についても同様。
あとは実行タイミングとして、ページが読み込まれたときと画面がリサイズされたときの両方で実行されるように指定して完成。
ちなみにこれもCSSを先に読ませたほうが良いみたい。
というかブロック要素の縦横サイズをJQueryで取得しなければいけないので、先に読み込ませておかないと一番最初にページを表示するときにうまく中央に配置されない場合があります。
ただ、それでもだめならCSSのブロック要素縦横サイズの指定を、HTMLに直接書き込むのも一つの方法かと。
それかあまり使いたくは無いけど下記のように書き換えるのも一つの手段。
//ページ読み込み時に実行
$(function(){
centering();
});
↓↓↓
$(window).load(function(){
centering();
});
これだとページの表示要素全てを読み込んでから実行されるので、重いページだとどのように表示されるかちょっと検討が付かない。
なので、個人的にはCSS情報を先に読ませることの方が一番良い気がする。
コメントする