2

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

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

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

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

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

デモサンプル




サンプル1

s1-a

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

s1-b

背景が赤色になります。

サンプル2

morning-a

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

morning-b

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

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

HTML

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

jQuery

jQueryのCDNを読み込む。

JavaScript

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

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

2 Comments

  1. ウィンドウサイズによって処理を変える、を参考にして
    「ウィンドウサイズが○○px以下ならURLの末尾に任意の文字列を追加する」
    処理をしたかったのですがうまくいきませんでした。
    ご教示いただければ幸いです

    • 「mikmik」さん
      コメントありがとうございます。返信が遅くなってしまい申し訳ありません。
      >「ウィンドウサイズが○○px以下ならURLの末尾に任意の文字列を追加する」
      というのは、http://www.〇〇〇.com/index△△△.html
      のように△△△の部分に任意の文字列を入れるということでお間違いないでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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