jQuery サイズ

Webページの要素の高さや幅を動的に操作することは、レスポンシブデザインやインタラクティブなUIを作成する際に非常に役立ちます。jQueryを使用すれば、これらの操作をシンプルかつ効率的に行うことができます。

width() と height()
innerWidth() と innerHeight()
outerWidth() と outerHeight()
応用例

width() と height()

width(): 要素のコンテンツの幅を取得または設定します。
height(): 要素のコンテンツの高さを取得または設定します。

// 幅を取得
var w = $("#myElement").width();

// 幅を設定
$("#myElement").width(500);

innerWidth() と innerHeight()

これらのメソッドは、要素のパディングを含む幅や高さを取得します。

var innerW = $("#myElement").innerWidth();

outerWidth() と outerHeight()

これらのメソッドは、要素のパディング、ボーダー（そしてオプショナルでマージン）を含む幅や高さを取得します。

// ボーダーを含む高さを取得
var outerH = $("#myElement").outerHeight();

// マージンも含む高さを取得
var totalH = $("#myElement").outerHeight(true);

応用例

レスポンシブなナビゲーションメニュー

スマートフォンの画面サイズでは、ナビゲーションメニューを閉じて、ボタンクリックで展開するというのは一般的な実装です。

<button id="menuButton">メニューを切り替え</button>
<div id="menu" style="height: 0; overflow: hidden;">
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</div>
<script>
$(document).ready(function() {
    $("#menuButton").click(function() {
        var menuHeight = $("#menu").height();
        
        if(menuHeight == 0) {
            $("#menu").height(200);  // メニューを展開
        } else {
            $("#menu").height(0);    // メニューを閉じる
        }
    });
});
</script>

画像ギャラリーのサムネイルサイズ調整

画像ギャラリーで、ユーザーがサムネイルのサイズを動的に変更できるようにする例です。

<button id="increaseSize">サムネイルを拡大</button>
<button id="decreaseSize">サムネイルを縮小</button>
<div class="gallery">
    <img src="path/to/image1.jpg" class="thumbnail">
    <img src="path/to/image2.jpg" class="thumbnail">
    <!-- 他のサムネイル画像 -->
</div>
<script>
$("#increaseSize").click(function() {
    $(".thumbnail").width(function(index, width) {
        return width * 1.1;  // サムネイルの幅を10%増加
    });
});

$("#decreaseSize").click(function() {
    $(".thumbnail").width(function(index, width) {
        return width * 0.9;  // サムネイルの幅を10%減少
    });
});
</script>

モーダルの中央配置

モーダルウィンドウを画面の中央に配置する例です。

<div id="myModal" style="position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 300px; background: #fff; padding: 20px;">
    <p>これはモーダルのコンテンツです。</p>
    <button>閉じる</button>
</div>
<script>
function centerModal() {
    var winHeight = $(window).height();
    var modalHeight = $("#myModal").outerHeight();
    var marginTop = (winHeight - modalHeight) / 2;

    $("#myModal").css("margin-top", marginTop + "px");
}

$(window).resize(centerModal);
$(document).ready(centerModal);
</script>

これらのメソッドを駆使することで、ページ上の要素のサイズを正確に取得、設定することができます。適切なメソッドを選択することで、より柔軟にUIを制御することが可能となります。