JavaScript

styleswitch.jsを使って読み込むスタイルシート（cssファイル）を切り替える方法

  /

Webページのデザインをユーザーにカスタマイズさせることができると、サイトのインタラクティブ性やユーザーエクスペリエンスが向上します。そのための一つの方法として、JavaScriptを用いてスタイルシート（CSSファイル）を動的に切り替える技術があります。この記事では、styleswitch.jsを使用して複数のCSSファイルを切り替える方法を詳しくご紹介します。

Webページのデザインをユーザーが自由に変更できると、閲覧者の好みに合わせた見た目を提供でき、ページの滞在時間を延ばすことが期待できます。たとえば、昼と夜で見やすいテーマを切り替えたり、文字サイズを大きくして読みやすくしたりと、様々な工夫が可能です。

ここでは、基本的な概念から具体的な実装方法まで、順を追って説明していきますので、ぜひ最後までお読みください。

Contents

styleswitch.jsとは

styleswitch.jsは、ユーザーがクリックなどの操作を通じて、Webページのスタイルシートを動的に切り替えることができるJavaScriptファイルです。このスクリプトを用いることで、ページリロードなしにスタイルの変更が可能になり、ユーザーにより良い体験を提供することができます。

なぜスタイルシートの切り替えが重要か

スタイルシートの切り替えは、特に以下のような状況で重要です。

  • アクセシビリティの向上: ユーザーが文字の大きさやコントラストを調整することで、ページをより見やすくすることができます。
  • カスタマイズ性: ブランドやイベントに合わせてデザインを簡単に変更することができ、マーケティングの観点でも有用です。
  • テーマの提供: ユーザーに好みに合わせたテーマを選択させることで、パーソナライズされた体験を提供できます。

　
このように、styleswitch.jsを使ったスタイルシートの切り替えは、Webページの機能性を向上させるための強力なツールです。

styleswitch.jsファイルを読み込む

まず、styleswitch.jsファイルをHTMLに読み込む必要があります。このファイルは、スタイルシートの切り替えを実現するための主要な機能を提供します。以下のようにHTMLにスクリプトタグを追加します。

<script src="styleswitch.js" type="text/javascript"></script>

　
このスクリプトは、ユーザーの操作に基づいてスタイルシートを変更するための関数を提供します。次のステップでは、具体的にどのようにスタイルシートを準備し、切り替えを行うかを見ていきましょう。

3つのCSSファイルを用意する

今回の例では、3つの異なるCSSファイルを用意して、それらをユーザーの選択に応じて切り替える仕組みを作成します。
これらのファイルは、背景色、文字サイズ、文字色を変更することで、見た目に大きな違いをもたらします。それぞれのCSSファイルの役割と内容を以下に示します。

default.css：デフォルトのスタイルシート

default.cssは、ページを初めて開いたときに読み込まれる基本的なスタイルシートです。このスタイルシートの内容は以下の通りです。

<link rel="stylesheet" type="text/css" href="default.css" />

  • 背景色: 白 (#FFF)
  • 文字色: 黒 (#000)
  • 文字サイズ: 14px
  • レイアウト: 幅600pxのコンテナを中央に配置
body{
	background-color:#FFF;
	color:#000;
	font-size:14px;
	margin:0;
	padding:0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}

　
このスタイルは、シンプルで読みやすいデザインを提供し、他のスタイルに切り替えたときの基準となります。

css1.css：切替用スタイルシート1

css1.cssは、ダークテーマを提供するスタイルシートです。夜間モードなどで使われることが多いスタイルです。

<link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />

  • 背景色: ダークグレー (#333)
  • 文字色: 白 (#FFF)
  • 文字サイズ: 18px
body{
	background-color:#333;
	color:#FFF;
	font-size:18px;
	margin:0;
	padding:0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}

　
このスタイルは、視認性を高めるためにコントラストを強調しており、長時間の閲覧でも目が疲れにくいデザインです。

css2.css：切替用スタイルシート2

css2.cssは、明るくポップな印象を与えるスタイルシートです。イベントやキャンペーン時に活用できます。

<link rel="alternate stylesheet" type="text/css" media="screen" title="title2" href="css2.css" />

  • 背景色: 薄いオレンジ (#FF9)
  • 文字色: 青 (#09F)
  • 文字サイズ: 24px
body{
	background-color:#FF9;
	color:#09F;
	font-size:24px;
	margin:0;
	padding:0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}

　
このスタイルは、元気で活気のある印象を与え、ページに訪れるユーザーを引き付ける力があります

styleswitch.jsを使って、読み込むスタイルシート（cssファイル）を切り替えるHTMLの記述

次に、ユーザーがクリックすることでスタイルを切り替えるためのHTMLを記述します。
この方法では、aタグにスクリプトを埋め込み、ユーザーが選択したスタイルに応じてページの見た目を変更します。
aタグのhrefにchooseStyle(切り替えるlinkタグのtitle属性名, 30)でlinkタグに指定したtitle属性名を指定するとaタグクリックで切り替わります。

<div id="idWrap">
    <h1>下のリンクをクリックすると、読み込む（cssファイル）スタイルシートが切り替わります。</h1>
    
<ul>
<li><a href="javascript:chooseStyle('none', 30)">デフォルト</a></li>
<li><a href="javascript:chooseStyle('title1', 30)">スタイル１</a></li>
<li><a href="javascript:chooseStyle('title2', 30)">スタイル２</a></li>
</ul>
    
</div><!--/idWrap-->

　
ここで使用しているchooseStyle関数は、styleswitch.jsで定義されており、指定されたスタイルをアクティブにする役割を果たします。この関数により、リンクをクリックすると対応するCSSファイルが読み込まれ、ページの見た目が瞬時に変更されます。

JavaScriptでのスタイル切り替えの仕組み

chooseStyle関数の内部では、以下のような処理が行われています。

  1. 既存のスタイルシートを検索: 現在適用されているスタイルシートをすべて検索し、切り替えが可能なスタイルシートを特定します。
  2. 新しいスタイルシートを適用: 指定されたタイトルのスタイルシートをアクティブにし、それ以外を非アクティブにします。
  3. Cookieの設定: ユーザーが選択したスタイルをクッキーに保存し、次回以降のアクセス時に同じスタイルが自動的に適用されるようにします。

このようにして、styleswitch.jsはユーザーの操作に応じてWebページのスタイルを柔軟に変更することができます。

読み込む（cssファイル）スタイルシートを切り替えるデモページ

実際に動作するデモページを作成することで、これらの機能を試すことができます。以下のリンクからデモページを確認して、スタイルシートの切り替えがどのように動作するかを体験してみてください。

J読み込む（cssファイル）スタイルシートを切り替えるデモページ

このデモページでは、上記のHTMLとCSSを使用して、リンクをクリックすることでスタイルが変わる様子を確認できます。デザインの変化がどのように行われるかを実際に見てみましょう。

ソース元：Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

ソース元：Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

まとめ

この記事では、styleswitch.jsを使用してスタイルシートを切り替える方法について詳しく説明しました。この技術を用いることで、ユーザーにより柔軟で魅力的なWeb体験を提供できるようになります。スタイルシートの切り替えは、アクセシビリティの向上やユーザーエクスペリエンスの向上に貢献するだけでなく、Webデザインの可能性を広げるツールでもあります。

ぜひ、この記事を参考にして、自分のWebサイトにスタイル切り替え機能を取り入れてみてください。新しいデザインの可能性を探索する手助けになれば幸いです。

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

styleswitch.js css切替
関連記事