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

【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);
     })
});

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

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

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

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク