Web制作をしていると、

• ?mode=preview
• ?campaign=summer
• ?type=special

のように、URLにパラメーターが付いている時だけデザインや表示を変えたい場面があります。

例えば

• テスト表示用のデザイン切り替え
• キャンペーン流入時だけバナー表示
• 広告経由のユーザーだけ特別UI表示

この記事では、
JavaScriptだけでURLパラメーターを判定し、クラスを付与する方法を解説します。

そもそもURLパラメーターとは？

URLの「?」以降の部分のことです。

例

https://example.com/?category=special

この場合、

• パラメーター名 → category
• 値 → special

という構造になっています。

なぜCSSだけではできないの？

CSSは「HTML構造」に対してスタイルを適用するものです。

しかし、

CSSはURLのクエリパラメーターを直接取得できません。

つまり、

?category=special の時だけ色を変える

という指定は不可能です。

そこでJavaScriptを使います。

基本実装コード

以下のコードを読み込ませるだけでOKです。

document.addEventListener("DOMContentLoaded", function () {

  const params = new URLSearchParams(window.location.search);
  const value = params.get("category");

  if (value === "special") {
    document.body.classList.add("is-special");
  }

});

コードの解説

① URLパラメーターを取得

window.location.search

現在のURLの ?以降 を取得します。

② パラメーターを解析

new URLSearchParams()

これでパラメーターを扱いやすい形に変換します。

③ 値を取得

params.get("category")

category の値を取得します。

④ 条件分岐

if (value === "special")

値が一致したときだけ処理を実行。

⑤ bodyにクラスを追加

document.body.classList.add("is-special");

ここが重要ポイント。

CSS側の書き方

あとはCSSで制御します。

body.is-special {
  background: #000;
  color: #fff;
}

body.is-special .banner {
  display: block;
}

これで

https://example.com/?category=special

の時だけデザインが変わります。

複数パターン対応版

複数の値に対応することも可能です。

document.addEventListener("DOMContentLoaded", function () {

  const params = new URLSearchParams(window.location.search);
  const category = params.get("category");

  if (category) {
    document.body.classList.add("is-" + category);
  }

});

これで何が起きる？

?category=summer

↓

body class="is-summer"

?category=vip

↓

body class="is-vip"

CSS側

body.is-summer {
  background: orange;
}

body.is-vip {
  background: gold;
}

かなり応用が効きます。

実務でよくある活用例

広告流入限定バナー表示

?ad=campaignA

↓

広告経由だけ特典バナー表示

プレビュー用表示切り替え

?preview=true

↓

下書きUIを表示

テストAB切り替え

?pattern=b

↓

別デザイン適用

セキュリティ注意点

URLパラメーターはユーザーが自由に変更可能です。

そのため：

• 決済
• 会員制制御
• 認証系

などには絶対に使ってはいけません。

あくまで「表示切り替え用途」です。

まとめ

URLにパラメーターが付いたらクラスを付与する流れは

1. URLSearchParamsで取得
2. 値を判定
3. bodyにclass追加
4. CSSで制御

これだけです。

実装も軽量で、WordPressでも静的サイトでも使えます。

お気に入り