【jQuery】画面の縦・横幅を取得して、ボックス要素を中央に配置する方法

2015/04/27 2019/12/16

Javascriptのアラートウィンドウのようなものを自作したいとき、jQueryを使って画面(ブラウザ)の縦・横幅を取得し、表示させたいボックスを画面の中央に配置する法です。

ボックス要素を中央に配置する方法

イメージ

画面の縦・横幅を取得

まずは画面(ブラウザ)の縦および横幅を取得する方法。
以前にもポストした、リアルタイムで横幅を取得する方法を拡張してみます。

var checkWidth = function(){
    var browserWidth = $(window).width();
};

var checkHeight = function(){
    var browserHeight = $(window).height();
};


$(function(){
    checkWidth();
    $(window).resize(checkWidth);
});

$(function(){
    checkHeight();
    $(window).resize(checkHeight);
});

var checkWidth = function(){

var browserWidth = $(window).width();

};

var checkHeight = function(){

var browserHeight = $(window).height();

};

$(function(){

checkWidth();

$(window).resize(checkWidth);

});

$(function(){

checkHeight();

$(window).resize(checkHeight);

});

解説

前回も書きましたが、jQuery ではブラウザの横幅は $(window).width(); で取得できますが、リロードのあとなど１回しか動きません。なので動的に取りたい場合は resize() を使用する事で取得が可能となります。

console.log(); しているので、FireBugなどでリアルタイムに縦横幅を取得している様子を確認して下さい。

ボックスを配置するための考え方と計算式

横中央に配置するの計算式

考え方として横中央に配置ということは、例えば、横幅全体が 800px、ボックスが 300px だとすると、左端からの中央が 800px の半分で 400px、ボックスの半分が 150px ということで、400-150 すると 250px 左端から離せば中央にくるって事になります。

今の話を式にすると、(800/2)-(300/2) = 250 になり、整理すると、(800-300)/2 = 250px となり、公式は以下とまとめることができます。

（画面横幅 - ボックス幅）÷ ２

縦中央に配置するの計算式

同様に、縦中央に配置する公式は以下のようになります。

（画面縦幅 - ボックス縦幅）÷ ２

jQueryクックブック

created by Rinker

オライリー・ジャパン

画面の縦横中央にボックスを配置

上記をふまえ、スクリプトを作成します。

CSS

ボックスを縦：200px、横：300pxに設定。

.box {
    width: 300px;
    height: 200px;
}

.box {

width: 300px;

height: 200px;

}

JS

取得と配置のスクリプト。
ブラウザとボックスの縦・横幅を取得し、表示させたいボックスを画面中央に配置。

checkWidth = function(){
    // ブラウザの横幅を取得
    var browserWidth = $(window).width();

    // ボックスの横幅を取得
    var boxW = $(".box").width();

    // 左端から離す距離pxを計算
    var plusPxW = ((browserWidth - boxW)/2);

    // CSSで追加
    $('.box').css({'left': plusPxW + "px"});
};

checkHeight = function(){
    var browserHeight = $(window).height();

    // ボックスの縦幅を取得
    var boxH = $(".box").height();

    // 上端から離す距離pxを計算
    var plusPxH = ((browserHeight - boxH)/2);

    // CSSで追加
    $('.box').css({'top': plusPxH + "px"});
};

// リアルタイムで縦・横幅を取得
$(function(){
    checkWidth();
    $(window).resize(checkWidth);
});

$(function(){
    checkHeight();
    $(window).resize(checkHeight);
});

checkWidth = function(){

// ブラウザの横幅を取得

var browserWidth = $(window).width();

// ボックスの横幅を取得

var boxW = $(".box").width();

// 左端から離す距離pxを計算

var plusPxW = ((browserWidth - boxW)/2);

// CSSで追加

$('.box').css({'left': plusPxW + "px"});

};

checkHeight = function(){

var browserHeight = $(window).height();

// ボックスの縦幅を取得

var boxH = $(".box").height();

// 上端から離す距離pxを計算

var plusPxH = ((browserHeight - boxH)/2);

// CSSで追加

$('.box').css({'top': plusPxH + "px"});

};

// リアルタイムで縦・横幅を取得

$(function(){

checkWidth();

$(window).resize(checkWidth);

});

$(function(){

checkHeight();

$(window).resize(checkHeight);

});

解説

リアルタイムの値を取得したいために、縦・横の２つに分かれていますが、ほぼほぼ同じ内容です。
スマホのブラウザなど、幅が変わらないものは統合しても少し単純なものにしても問題無いと思われます。

取得する値についてですが、width() で横幅を取得できると書きましたが、結果値は padding を考慮せずに取得します。
padding を含んだ値としたい場合は、innerWidth() を使用します。
縦も同様です。

以下を参照してください。

-Javascript,jQuery
-javascript, jquery, js, センタリング, ブロック要素, 縦横中央

: 【JS】定義リスト/記述リスト（dl, dd）タグの個数をカウントするスクリプトをjQueryで作ってみた

このブログの一番人気記事である「三文字略語」のページには現在何個の略字を載っけたのか数えたくなったのですが、いちいち自分で数えるのもバカらしく感じたのでプログラムにやらせてみようと作ってみました。