We Blog Weblog

CSSを切り替える

Web

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が適用された状態

Chemist and Pharmacist

css2.cssが適用された状態

Chemist and Pharmacist

初期状態として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";
  }
}


Chemist and Pharmacist

 

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

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

トグルスイッチの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";
  }
});
Montserrat
Goldman
Chemist and Pharmacist

トグルスイッチは「オン・オフ」には向いていますが「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";
      });
    }
  });
});
Chemist and Pharmacist

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

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP