【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, センタリング, ブロック要素, 縦横中央

: Javascriptでの配列の作成方法

Javascriptでの配列の作り方を整理します。

: jQueryで日数計算をしてみる

娘の百日膳を行うにあたって「誕生日からの100日目っていつなんだ？」というのを調べる機会があったのですが、せっかくなので勉強がてら自分でも組んでみようと思い、日数計算できるスクリプトをjQueryを利用して作ってみたので公開してみたいと思います。

: jQuery Cookie を使ってタブ切り替え状態を保持する方法

以前作成したタブ切り替えのスクリプトを拡張し、リロードや別ページから戻った場合でもアクティブになっているタブをアクティブのままにしておく、ということがしたくなったのですが、どうやらjQuery Cookieというライブラリを使えば出来そうだったので、実際にやってみました。

: jQueryのtoggleSlideを使ってみる

ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。これも検索頻度の高いものなので、自分のメモとして残しておきます。

: 時刻入力の入力補助として便利な「jQuery ClockPick」を使ってみる。

時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。

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

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

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

画面の縦・横幅を取得

解説

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

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

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

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

CSS

JS

解説

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

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

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

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

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

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