Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

【WordPress対応】JavaScriptで画面サイズを取得する方法【jQuery】

更新日:2021年9月15日
  • 「ファーストビューの中に画像をきっちりはめ込みたいけどブラウザや解像度によって画像サイズを調整する必要がある」
  • 「画像サイズは良いけどブロック要素の高さを静的に指定したくない」

そのようなことでお困りですか?

この記事ではJavaScript(jQuery)を使用し、画面サイズを取得する方法を紹介します。 WordPressにインストールされているjQueryを対象としているためWordPressでもそのまま実装することが出来ます。

目次

  • 1 JavaScriptで画面サイズを取得する方法
  • 2 高さの要素を取得するJavaScriptの実装
  • 3 使用方法

JavaScriptで画面サイズを取得する方法

上記の画像のように、ブラウザで表示されている表示領域のサイズが取得したいということです。

ブラウザが最大化されていない場合やスマフォ画面であっても、同様にブラウザの表示領域が取得できることで、レスポンシブ対応の際、画面に収める高さの計算が容易になります。

それでは早速実装方法を見ていきましょう。

高さの要素を取得するJavaScriptの実装

jQueryを使用して実装しています。

WordPressに標準でインストールされているjQueryは$記号が使えませんので $の部分をjQueryと置き換えて実装する必要があります。

理由については別記事にて解説したいと思います。

以下がコードになります。

/** ブラウザ表示領域のサイズを取得します. */
function getBrowserDispAreaSize() {
    return jQuery(window).height();
}

以上です。

jQuery(window).height();

この部分でブラウザの表示領域の縦幅を取得しています。

使用方法

実際に使用する際のコーディング例を記載します。

以下のようなHTML要素があるとします。

<div id="topBlock">
<!-- このdivブロックの高さはブラウザの表示領域の高さと同じになります。-->
</div>

そして以下のJavaScriptのコードをフッターなど後半に読み込まれるところに貼り付けます。

WordPressだと便利な関数が用意されていますのでそちらで読み込むほうが安全です。

別記事にて解説しています。

<script type="text/javascript">
/** ブラウザ表示領域のサイズを取得します. */
function getBrowserDispAreaSize() {
    return jQuery(window).height();
}

jQuery(window).load(function () {
    jQuery('#topBlock').height(getBrowserDispAreaSize());
});

以上です。

jQuery関連の参考記事

【JavaScript】WordPressでjQueryが動かない理由3点とその対処法
【JavaScript】WordPressでjQueryが動かない理由3点とその対処法
WordPressでjQueryを使おうとしたけど動かない。とお悩みですか? この記事ではjQueryが動かない理由3点を私の経験を元にその対処法を含めて解説しています。 この記事を読むことでjQueryが動かなかった理由がわかるようになります。
【WordPress対応】jQueryを読み込まないときは実行順序が違うかも?
【WordPress対応】jQueryを読み込まないときは実行順序が違うかも?
jQueryを使って要素に高さや横幅などを設定したいが何故が設定できない。とお悩みですか? この記事ではjQueryが何故読み込まれないのかを解説しています。 イマイチjQueryの書き方について理解していない方は必見です!

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 JavaScriptで画面サイズを取得する方法
  • 2 高さの要素を取得するJavaScriptの実装
  • 3 使用方法
© 2023 さきどりふぁくとり~