ウィンドウサイズによるクラス名の付与＆削除する方法

レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。

サンプル1　・・・背景色を指定したクラス名を切り替える。
サンプル2　・・・背景画像に指定したクラス名を切り替える。

以上の２つを見てみましょう。

デモサンプル

サンプル1

↓ウィンドウサイズが640px以下になると・・・

背景が赤色になります。

サンプル２

↓ウィンドウサイズが640px以下になると・・・

朝の風景に切り替わります。

それではコードを見ていきます。

HTML

<div id="colorBox" class="bluebox"><p>Red / Blue</p></div>
<div id="imageBox" class="morning-a"></div>

1 2	<div id="colorBox" class="bluebox"><p>Red / Blue</p></div> <div id="imageBox" class="morning-a"></div>

#colorBoxの背景色と#imageBoxの背景画像を切り替える。

jQuery

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

1	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

jQueryのCDNを読み込む。

JavaScript

<script type="text/javascript">
$(window).resize(function(){
    //windowの幅をxに代入
    var x = $(window).width();
    //windowの分岐幅をyに代入
    var y = 640;
    if (x <= y) {
        $('#colorBox').addClass('redbox').removeClass('bluebox');
        $('#imageBox').addClass('morning-b').removeClass('morning-a');
    }else{
        $('#colorBox').addClass('bluebox').removeClass('redbox');
        $('#imageBox').addClass('morning-a').removeClass('morning-b');
    }
});
</script>

$(window).resize(function(){

//windowの幅をxに代入

var x = $(window).width();

//windowの分岐幅をyに代入

var y = 640;

if (x <= y) {

$('#colorBox').addClass('redbox').removeClass('bluebox');

$('#imageBox').addClass('morning-b').removeClass('morning-a');

}else{

$('#colorBox').addClass('bluebox').removeClass('redbox');

$('#imageBox').addClass('morning-a').removeClass('morning-b');

}

});

</script>

サンプルの「１」と「２」を同時に操作しています。ウィンドウサイズを「640px」を分岐点として、クラス名を切り替えています。

そこまで複雑なスクリプトではないので、理解しやすいかな～と思います。