【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】配列をシャッフルするアルゴリズム、Fisher-Yates

配列内容をシャッフルして出力する際に「Fisher-Yates」というアルゴリズムを利用すると、素早く、偏りもなくシャッフルできるとのことで、コピペできるように備忘録としてポストします。

: スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。

スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。

: 【jQuery】タブの切替スクリプトを作成してみました

jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

: 【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

: 【JS】マウスオーバーでブロックごとスライドしてくるナビゲーションバーをjQueryで組んでみた

マウスオーバーすると画面外に隠れていたナビゲーションバー、HTMLでいうところのリストタグでできた部分がスライドして出てくるスクリプトは調べていていくつか見たのですが、メニュー部分そのもの（HTMLでいうところのULタグ）が出てくるってのは見かけなかったので、自分で作ってみました。

PREV: 【CSS】縦幅サイズがわからない要素の縦中央にテキストを配置する方法
NEXT: SONY XPERIA Z3のPC接続のUSBからのクレードル(充電台)からの給電について

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

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

画面の縦・横幅を取得

解説

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

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

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

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

CSS

JS

解説

【DIY】2x4や1x4など、SPF材サイズ早見表 (564,960)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (279,679)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (257,919)

【歴史】江戸幕府歴代将軍一覧 (143,590)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (133,246)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (131,308)