jQueryでウィンドウ幅を判別する方法

jQueryでウィンドウ幅を判別する方法

こんにちは、ちゃんけいです。
福岡よりお届けしております。それはさて置き、今回紹介するのは「jQueryでウィンドウ幅を判別する方法」になります。

ウィンドウ幅を判定できると、PCの時はこの動きでスマホになるとこの動き!など使い分けることができる様になります。とっても便利ですね!

しかもすごく簡単なので是非コピペして使ってみてください。

当サイトではトップページの絵の具のペイントをPCではパララックスにして、スマホでは動かない様にしています。( 計算が面倒くさいとは言っていない )

ウィンドウの幅と高さを取ろう!

必要なのはウィンドウの幅( width )だけなのですが、せっかくなので高さもとってみましょう。

See the Pen ウィンドウの幅と高さを取得 by Chankei (@Chankei) on CodePen.

これで取得できました。
var ~~の「~~」の部分は変数名なので、自分の分かりやすいように変更してみてください。

$(window) この部分は、今開いているブラウザのウィンドウに対しての指定をしています。これは読み込んだ時点の値になります、もしウィンドウの幅が変わるたびに!という場合は、別の書き方をするのですが今回は置いておきましょう。

.width() この部分は、見ての通り「width」の値を取得しています。

条件分岐させよう!

先ほど取得した値を使ってif文で条件分岐させます。コードはこちら

See the Pen ウィンドウ幅判別 by Chankei (@Chankei) on CodePen.0

このようになります。
xの値は自分の切り替えたい値を入れて、if文に入れます。これで簡単にスマホとPCを異なる挙動にできたと思います!

ページのメインヴィジュアルを全画面にしたい!なんてときも簡単にできます。幅と高さをとって、divのcssを取得した値にするだけで簡単にできます!
当サイトのメニューも同じやり方でしています。

まとめ

いかがでしたでしょうか?

jQueryが苦手な方は、今回紹介したようなウィンドウ幅の取得などから始めてみるとよいかもしれませんね。

次回はハンバーガーメニューのコードとか言ってたくせに違うソース紹介してるのですが、お気になさらず、、、、
次回こそハンバーガーメニューを紹介します!

それではまた次回の記事でお会いしましょう。ちゃんけいでした。