JavaScript

JavaScriptで簡単にCSSファイル名を書き換え！スタイルを動的に変更する方法

 

Web開発では、ページのデザインやスタイルを動的に変更したい場面が多くあります。
例えば、ダークモードやユーザーの操作に応じてスタイルを変更する場合など、ページを再読み込みせずにCSSを切り替えるといった実装が求められることがあります。
そこで、本記事では、JavaScriptを使用してHTMLページ上でCSSファイルを交互に切り替える方法について、わかりやすく解説していきます。

Contents

CSSファイル名を書き換える利用方法

CSSファイルを切り替えるには、JavaScriptでHTML内の<link>要素の「href」属性を動的に変更する方法を使います。
この操作によって、指定したCSSファイルが新たに適用され、ページのスタイルが即座に切り替わります。
以下では、JavaScriptコードを用いて、ボタンのクリックで「first.css」と「second.css」の2つのCSSファイルを交互に切り替える具体的な例を示します。

切り替える2つのCSSファイル例

first.css（初期スタイル）

body {
    background-color: lightblue;
    color: black;
    text-align: center;
}

h1 {
    font-size: 2em;
}

p {
    font-size: 1.2em;
    color: darkblue;
}

背景が淡い青色で、テキストの色は黒と濃い青色に設定されています。

second.css（切り替え後のスタイル）

body {
    background-color: darkslategray;
    color: white;
    text-align: center;
}

h1 {
    font-size: 2.5em;
    color: lightcoral;
}

p {
    font-size: 1.2em;
    color: lightgreen;
}
  • 背景が濃い灰色になり、テキストの色も白や明るい色に変更されています。
  • h1要素のサイズが少し大きくなり、色が変わっています。

JavaScriptでCSSを交互に切り替える：コード例

以下に、HTMLとJavaScriptで実装したCSSファイル切り替えのサンプルコードを紹介します。このコードをそのままコピペして使用できるようにしてあります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでCSSファイルを書き換えスタイルを切り替えるデモページ</title>

    <meta name="description" content="JavaScriptでCSSファイルを書き換えスタイルを切り替えるデモページ">

<!-- 初期読み込みのCSSファイル -->
<link id="cssLink" rel="stylesheet" href="first.css">
</head>
<body>

<h1>JavaScriptでCSSファイルを書き換え、スタイルを切り替えるデモ</h1>

<button onclick="toggleCSS()">CSSを切り替える</button>

<script>
    // 現在のCSSファイルがどちらかを保持する変数
    let isUsingFirstCSS = true;

    // CSSファイルを交互に切り替える関数
    function toggleCSS() {
        // リンク要素を取得
        const cssLink = document.getElementById("cssLink");

        // 現在のCSSファイルに基づき切り替える
        if (isUsingFirstCSS) {
            cssLink.href = "second.css"; // second.cssに切り替え
            alert("CSSファイルをsecond.cssに切り替えました！");
        } else {
            cssLink.href = "first.css"; // first.cssに戻す
            alert("CSSファイルをfirst.cssに切り替えました！");
        }

        // 状態を反転させる
        isUsingFirstCSS = !isUsingFirstCSS;
    }
</script>

</body>
</html>

コードの解説

上記のコードでは、まずHTMLの<head>タグ内で初期のCSSファイル「first.css」を読み込んでいます。そして、JavaScript関数「toggleCSS」を定義し、ページ内の「CSSを切り替える」ボタンがクリックされたときに、この関数が実行されるようにしています。

この関数「toggleCSS」は、リンク要素（<link id=”cssLink”>）の「href」属性を変更することで、表示するCSSファイルを交互に「first.css」と「second.css」に切り替えています。また、現在の状態を変数「isUsingFirstCSS」で保持し、切り替えごとにその値を反転させています。

JavaScriptでCSSファイルを書き換えスタイルを切り替えるデモページ

以下のデモページで実際の動作を確認してみてください。

JavaScriptでCSSファイルを書き換えスタイルを切り替えるデモページ

注意点

CSSファイルの切り替えを行う際には、以下のような点に注意が必要です：

  • CSSのキャッシュ:
    ブラウザによっては、CSSファイルのキャッシュが残ってしまうことがあります。テスト中に変更が反映されない場合は、キャッシュをクリアするか、CSSファイル名を変更する方法が考えられます。
  • 複数のスタイルの競合:
    切り替え前のCSSが他のCSSと競合し、思った通りにデザインが適用されない場合があります。この場合は、優先度を意識してCSSのプロパティを設定してください。
  • SEOへの影響:
    切り替えたCSSによってページ内容が大きく変わると、SEOにも影響が出る可能性があります。切り替えが必要な箇所だけを指定することで影響を抑えることができます。

活用シーン

このようなCSS切り替えのスクリプトは、ダークモードの実装や、ユーザーの選択に応じたカスタムテーマの提供など、デザインやインタラクティブな機能を柔軟に提供する場面で活用できます。

また、デモサイトやプレゼンテーションサイトなどで、ユーザーに異なるデザインを瞬時に体験してもらう用途にも適しています。
必要に応じて切り替えボタンのデザインを工夫することで、ユーザーの興味を引く仕組みを作ることができるでしょう。

まとめ

本記事では、JavaScriptを使用してCSSファイルを切り替える方法を解説しました。
この方法を使えば、ボタンのクリックでページのデザインをダイナミックに変更することが可能です。Web開発の現場では、テーマの切り替えやモードの変更など、動的なデザインが求められる場面も多いため、ぜひ活用してみてください。

HTMLとJavaScriptの基礎的な理解があれば簡単に実装できる内容ですので、実際にコードをコピーして動かしてみることをおすすめします。
Webサイトをよりインタラクティブにするための一歩として、楽しみながら学んでいきましょう！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

CSSファイル書き換え
関連記事