【jQuery】要素の幅・高さを取得・設定する完全ガイド｜width/height/outerWidth/innerWidth全解説

jQueryには要素のサイズを取得・設定するメソッドが複数あります。width() / height() / innerWidth() / outerWidth() の違いを理解することで、padding・border・marginを含むさまざまなサイズ計算が正確にできるようになります。

1. width/height メソッドの種類と違い

jQueryのサイズ取得メソッドは、paddingやborderを含むかどうかで4種類に分かれます。

2. 基本的な取得方法

var $box = $('.box');

// コンテンツ幅・高さ（padding/borderを除く）
var w = $box.width();          // px数値を返す（単位なし）
var h = $box.height();

// padding を含む
var iw = $box.innerWidth();
var ih = $box.innerHeight();

// padding + border を含む
var ow = $box.outerWidth();
var oh = $box.outerHeight();

// padding + border + margin を含む
var owm = $box.outerWidth(true);
var ohm = $box.outerHeight(true);

console.log(w, iw, ow, owm);

3. ウィンドウ・ドキュメントのサイズ取得

// ウィンドウ（ビューポート）のサイズ
var winW = $(window).width();
var winH = $(window).height();

// ドキュメント全体のサイズ（スクロール含む）
var docW = $(document).width();
var docH = $(document).height();

console.log("ビューポート:", winW, "x", winH);
console.log("ドキュメント:", docW, "x", docH);

4. サイズを設定（書き込み）する

var $box = $('.box');

// 数値で設定（pxが付加される）
$box.width(300);
$box.height(200);

// 文字列で設定（単位を含む）
$box.width('50%');
$box.height('auto');

// 関数で設定（現在値を引数で受け取れる）
$box.width(function (index, currentWidth) {
  return currentWidth * 2;  // 現在の幅を2倍に
});

5. リサイズイベントと組み合わせる

$(function () {
  function adjustLayout() {
    var winW = $(window).width();

    if (winW < 768) {
      // スマホ: 高さを自動に
      $('.sidebar').height('auto');
    } else {
      // PC: メインコンテンツに高さを揃える
      var mainH = $('.main').outerHeight();
      $('.sidebar').height(mainH);
    }
  }

  adjustLayout();  // 初期実行

  // リサイズのたびに実行（throttle推奨）
  $(window).on('resize', function () {
    adjustLayout();
  });
});

6. バニラJSとの対応関係

まとめ

jQueryのサイズ取得メソッドはpadding・border・marginの包含範囲で4種類あります。ヘッダーや要素の実際の表示サイズには outerHeight()、コンテンツ領域のみ計算するには width() と使い分けましょう。

関連記事: jQueryで指定した要素の幅と高さを取得する方法 / 追従ヘッダーの高さに合わせてアンカーリンクの移動先を調整する方法

よくある質問（FAQ）