【jQuery】ウィンドウの高さに合わせて正方形の要素を拡大縮小表示させるテクニック

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

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

コーディングテクニックの実装内容

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

実装所要時間:10分程度
難易度:初心者コーダーでも実装可能

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

$(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);
     })
});

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