CSSを切り替える

2022年8月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「CSSを切り替える方法」について書きます。

スタイルを変更するのに、CSSごと切り替える必要があるケースは稀だと思います。
花火のオンオフとかPrism.jsのCSS切り替えに使いました。

CSSを2つ用意する

うちの社名「Chemist and Pharmacist」のフォントを、CSSを切り替えることで変更してみたいと思います。

うちの社名の正式なロゴって実はまだ決まってないんですよね。「CHEMIST」はサイトの名前だし。

ロゴマークのカプセルは私が勝手に作ったのですが、なかなか合うフォントがなくて困っています。どなたかロゴを作成していただけないでしょうか。それかロゴマークを作り直そうかな...

会社名を入力します。クラス名をcompany-nameとします。

<span class="company-name">Chemist and Pharmacist</span>

CSSを2つ用意します。ファイル名をそれぞれcss1.css、css2.cssとします。

css1.css

.company-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
}

css2.css

.company-name {
  font-family: 'Goldman', cursive;
}

css1ではMontserratの太字（Bold700）のイタリック、css2ではGoldmanというフォントを設定してみました。

css1.cssが適用された状態

css2.cssが適用された状態

初期状態としてcss1.cssを適用します。<link>タグのIDをcsschangeとします。

<link rel="stylesheet" href="css/css1.css" id="csschange">

ボタンで切り替える

ボタンを2つ設置します。IDをそれぞれchangeButton1、changeButton2とします。

<input type="button" id="changeButton1" value="Montserrat">

<input type="button" id="changeButton2" value="Goldman">

以下のスクリプトを記述します。

window.onload = function() {
  document.getElementById("changeButton1").onclick = function() {
    document.getElementById("csschange").href = "css/css1.css";
  }
  document.getElementById("changeButton2").onclick = function() {
    document.getElementById("csschange").href = "css/css2.css";
  }
}

トグルスイッチで切り替える

トグルスイッチ（に見せかけたチェックボックス）を使ってみます。

トグルスイッチのIDをcss-modeとしておきます。

<div class="toggle_switch">
  <input type="checkbox" id="css-mode"><label for="css-mode"></label>
</div>

以下のスクリプトを記述します。

const btncc = document.querySelector("#css-mode");
btncc.addEventListener("change", () => {
  if (btncc.checked == true) {
    document.getElementById("csschange").href = "css/css2.css";
  } else {
    document.getElementById("csschange").href = "css/css1.css";
  }
});

トグルスイッチは「オン・オフ」には向いていますが「2つの項目の切り替え」には向かないかもですね。

ダークモードはこの方法でやった方が簡単だったかな...

ラジオボタンで切り替える

最後はラジオボタンを使ってみます。

nameはcsses、ラジオボタンのIDをそれぞれcssOne、cssTwoとしておきます。

<input type="radio" name="csses" id="cssOne" checked><label for="cssOne" class="radio">Montserrat</label>

<input type="radio" name="csses" id="cssTwo"><label for="cssTwo" class="radio">Goldman</label>

以下のスクリプトを記述します。

$(function() {
  $('[name="csses"]:radio').change(function() {
    if ($('[id="cssOne"]').prop('checked')) {
      $(function() {
        document.getElementById("csschange").href = "css/css1.css";
      });
    } else if ($('[id="cssTwo"]').prop('checked')) {
      $(function() {
        document.getElementById("csschange").href = "css/css2.css";
      });
    }
  });
});

else if～を増やせば、選択肢を増やすことができます。

まとめ

3つ以上のCSSを切り替えたい時はラジオボタンがよさそうです。

というわけでロゴデザイン募集中です！

ついでにロゴマークも募集中です！