あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】ウィンドウの高さに合わせて正方形の要素をぴったりと表示する方法

【jQuery】ウィンドウの高さに合わせて正方形の要素をぴったりと表示する方法

先日、「正方形のオブジェクトを常にウインドサイズの高さに合わせて画面ピッタリにくっつくような正方形のオブジェクトを設置したい」という依頼を受けました。

その話を聞いた時は「そんな仕様は見たことも、聞いたこともない。そんなの実現できるのだろうか?」と思いましたが実装は既に決定事項だったので頭をフル回転させることになりました。

解説

この仕様を文章で説明しようとすると中々難しいので、下記のリンクからデモを見ていただければ幸いです。

今までも目にしたことがないような珍しい動きなのでかなり悩みましたが、下記の記述で実装しました。

$(function() {
        var w_height = $(window).outerHeight();
        var w_height2 = w_height/2;
        var w_height3 = w_height/3;
        var w_height4 = w_height/4;
        var w_height5 = w_height/3 * 2;

        $(".list").css("width",w_height);
        $(".list").css("height",w_height);

        $(".list li").css("width",w_height4);
        $(".list li").css("height",w_height4);

        $(window).resize(function(){

        var w_height = $(window).outerHeight();
        var w_height2 = w_height/2;
        var w_height3 = w_height/3;
        var w_height4 = w_height/4;
        var w_height5 = w_height/3 * 2;

        $(".list").css("width",w_height);
        $(".list").css("height",w_height);

        $(".list li").css("width",w_height4);
        $(".list li").css("height",w_height4);
     })
});

実装までの手順は下記の通りとなります。

  • 1. jQueryの.outerHeight( )を使い高さを取得し変数化
  • 2. 正方形を形成させる要素の.listに.css()メソッドを使ってwidthとheightそれぞれに取得したウィンドの高さを付与
  • 3. .resize()によってウィンドサイズを変える度にwidthとheightを再取得

こんなような感じで意外とシンプルに実装できました。
また、デモページ内では応用として正方形のオブジェクト内に4分の1サイズの正方形を配置しています。