【PHP】URLパラメータで動的にスタイルを切り替える方法

Webサイトの見た目をユーザーの操作で切り替えるニーズは多く、例えばダークモードとライトモードの選択や、テーマカラーの変更などがその一例です。PHPとURLパラメータを組み合わせれば、スタイルの切り替えを柔軟に実現できます。

URLパラメータからスタイルを判別する
PHPコードによるCSSの動的読み込み
実用上の注意点
Cookieと組み合わせて記憶させる方法
まとめ

URLパラメータからスタイルを判別する

まず、ユーザーがスタイルを指定できるように、styleという名前のパラメータを使ってURLを構成します。たとえば、以下のような形式です。

https://example.com/?style=dark

このURLパラメータをPHPで取得し、条件に応じて読み込むCSSを切り替えます。

PHPコードによるCSSの動的読み込み

以下のコードは、styleパラメータの値に応じて異なるCSSファイルを読み込む基本的な例です。

<?php
$style = isset($_GET['style']) ? $_GET['style'] : 'default';

switch ($style) {
  case 'dark':
    $css_file = 'dark.css';
    break;
  case 'light':
    $css_file = 'light.css';
    break;
  default:
    $css_file = 'default.css';
    break;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スタイル切り替え例</title>
  <link rel="stylesheet" href="/css/<?php echo htmlspecialchars($css_file, ENT_QUOTES, 'UTF-8'); ?>">
</head>
<body>
  <p>現在のスタイル：<?php echo htmlspecialchars($style, ENT_QUOTES, 'UTF-8'); ?></p>
</body>
</html>

このコードでは、URLに指定されたstyleの値に応じて、css/ディレクトリ内の該当するCSSファイルを読み込みます。htmlspecialchars()を使うことで、不正な値によるXSS攻撃のリスクも回避しています。

実用上の注意点

この方法は非常に柔軟ですが、セキュリティやユーザー体験の観点から次のような点に注意してください。

想定されるスタイル名のみを許容する（ホワイトリスト方式）
設定をセッションやCookieに保存して持続性を確保する
無効なパラメータ値に対するデフォルトの処理を明確にする

Cookieと組み合わせて記憶させる方法

以下のコードを使えば、初回はURLパラメータを優先し、次回以降はCookieに保存した値でスタイルを保持できます。

<?php
if (isset($_GET['style'])) {
  $style = $_GET['style'];
  setcookie('style', $style, time() + (86400 * 30), "/"); // 30日間有効
} elseif (isset($_COOKIE['style'])) {
  $style = $_COOKIE['style'];
} else {
  $style = 'default';
}
?>

このようにすることで、ユーザーの選択を次回以降も引き継げる利便性の高い仕組みが構築できます。