通常、1つのCSSファイルを読み込もうとする際には、例えば以下のような記述がなされます。

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

この記述のしかたを少し変えるだけで、1つのHTMLファイルに対して複数のデザインを提案し、サイト閲覧者にその中から任意のデザインを選択してもらい表示させる事が出来るようになります。

CSSのタイプの違いの解説

複数のCSSファイルを読み込ませるにあたっては、以下の3種類のタイプについて理解する必要があります。

固定CSS

上述のソースのように、<link>にtitle属性がないものは固定CSSになります。
このCSSは常に有効となります。

優先CSS

<link rel="stylesheet" href="priority.css" type="text/css" title="優先CSS">

title属性が付加されると優先CSSになります。
固定CSS同様有効となりますが、CSS切り替えの候補にもなります。

代替CSS

<link rel="alternate stylesheet" href="alternate.css" type="text/css" title="代替CSS">

title属性が存在し、かつrel属性にalternateの指定が付加されていると、代替CSSになります。
デフォルトでは無効となっており、CSS切り替えの候補になります。

この3種類の違い・使い分けとして、以下のような例を紹介します。

<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="red.css" type="text/css" title="赤パターン">
<link rel="alternate stylesheet" href="blue.css" type="text/css" title="青パターン">
<link rel="alternate stylesheet" href="green.css" type="text/css" title="緑パターン">
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="黄パターン">

この場合、「reset.css」は固定CSSとして、必ず読み込まれる事になります。
例えば文字サイズ・行間・背景色が白で文字色が黒等、どのデザインにも共通する指定を記述しておきます。

「red.css」は優先CSSになります。
赤・青・緑・黄の4パターンを用意しておき、最初にページにアクセスした時には、4種類の中から赤色のパターンがデフォルトで展開されるようになります。
このCSSファイルの中には、例えばテキストリンクの文字色・入力欄のボーダーの色・見出しの背景画像等が赤色になるような指定を記述しておきます。

「blue.css」「green.css」「yellow.css」は代替CSSになります。
最初にページにアクセスした時には赤色のパターンが展開される為、これらは初期状態では展開されません。
しかし「red.css」とお揃いの色違いになるように記述し準備しておく事で、デフォルトの赤色のパターンではなく、青色や緑色や黄色のパターンに切り替える事が出来るようになります。

どうやってCSSを切り替えるのか

CSS切り替えの手順は、使用しているブラウザやそのバージョンによって異なります。
以下の操作方法は一例です。

• Internet Explorer11 ⇒ ページ(P)＞スタイル(Y)＞優先or代替CSSのタイトル
• Firefox21 ⇒ 表示(V)＞スタイルシート(Y)＞優先or代替CSSのタイトル

なおこれらの操作によるCSSの切り替えは、あくまで一時的なものです。
再度アクセスするとそのページが定めるデフォルトの指定に戻り、また同じサイト内でのページ移動でCSS切り替えが維持される事もありません。

JavaScript使用で、誰でもプルダウンからCSSを切り替えられるようにする

古いブラウザではCSSの切り替えが出来なかったり、新しいブラウザではCSS切り替えの操作方法が大きく異なったりする事があります。
そして何より、「このサイトはCSSの切り替えに対応しています」という旨は、サイト内できちんと明示していないとまず閲覧者には伝わりません。

そこで、ページ内に設置されたプルダウンの中から選択する事で、CSSを切り替えられるように出来るスクリプト「Website Options」を紹介します。
また本スクリプトを導入してCSSを切り替えると、その情報がCookieに保存され、再来訪の際にも切り替え後のCSSが適用されるようになります。
(Cookieが保存されるのはページ単位である為、同じサイト内でのページ移動でCSS切り替えは維持されません)

• 配布元サイト - http://readalittle.net/
  ※本記事投稿時現在の最新バージョンは3.4.1です。
• 動作サンプル

• ※実際は他にも様々な機能を実装出来る非常に便利なスクリプトですが、本記事ではCSSを切り替えられるようにする部分に絞って紹介します。
• ※導入の手順についてはWebサイトに様々なサポート機能を実装出来るスクリプト「Website Options」を参照して下さい。

動作サンプルダウンロード

以下のリンクから、「Website Options」の動作サンプルをダウンロード出来ます。
「Website Options」そのものは再配布に該当する為に同梱していませんので、お手数ですが配布元サイトより各自でダウンロードして下さい。
2015.1.1.Thu.追記 … 誠に勝手ながら、動作サンプルの公開は終了させて頂きました。
Webサイトに様々なサポート機能を実装出来るスクリプト「Website Options」にて同様の機能を試す事の出来る動作サンプルをご用意していますので、恐れ入りますがそちらを参照下さい。

• index.html … 「Website Options」の動作サンプルページ
• css/style.css … 「index.html」用固定CSSファイル
• css/pattern1.css … 「index.html」用優先CSSファイル
• css/pattern2.css … 「index.html」用代替CSSファイルその1
• css/pattern3.css … 「index.html」用代替CSSファイルその2

動作サンプルダウンロード