複数スタイルシート(CSS)の切り替え

<link rel=”(…) stylesheet” href=”URI” type=”text/css” (…) >

CSS/HTMLの書き方

標準スタイルシート
<link rel=”stylesheet” href=”URI” type=”text/css”>

優先スタイルシート
<link rel=”stylesheet” href=”URI” type=”text/css” title=”CSSの名前”>

代替スタイルシート
<link rel=”alternate stylesheet” href=”URI” type=”text/css” title=”CSSの名前”>

解説

スタイルシートを複数用意しておけば、スタイルシートの選択肢が増え、訪問者の好みに合わせたデザインを提供できるようになります。

多くのブラウザでは、スタイルシートの切り替えができる機能が付いており、ユーザー側でスタイルシートを任意に変更できます。

スタイルシートの種類

ブラウザに渡すスタイルシートは3種類あり、「標準スタイルシート」、「優先スタイルシート」、「代替スタイルシート」です。

これらはブラウザに読み込まれる動作や優先度が異なります。

書き方

この各スタイルシートをブラウザに読み込ませる定義文は上記のように書き方が異なります。

ただし、これらの定義文は「外部スタイルシートを読み込み、一括指定する1」と同様に、HTMLの<head>〜</head>間に挿入します。

標準スタイルシート

標準スタイルシートはブラウザに最優先されて、HTMLと同時に読み込まれます。

スタイルシートを1つしか用意していない場合は、通常こちらが一般的な書き方になります。

優先スタイルシート

優先スタイルシートは標準スタイルシートの書き方と「title=””」という属性を追加して記述する点で異なりますが、特に指示しない限り、標準スタイルシートを同じ働きを持ち、標準スタイルシートと同様、HTMLと同期してブラウザに読み込まれます。

「title=””」属性については、この部分でCSSの内容を表す文字を書き入れます。

多くのブラウザの場合、この文字列がスタイルシートの切り替え機能に表示されるスタイルシートの名前になります。

代替スタイルシート

代替えスタイルシートはブラウザにHTMLと同時には読み込まれません。

ユーザがスタイルシートを切り替えることのできるブラウザで閲覧し、なおかつユーザ側によってスタイルシートの切り替えの操作がされた場合に、はじめて読み込まれ、優先スタイルシートに変わってHTMLに適用されます。

スタイルシートの切り替えは一部ブラウザで非対応

スタイルシートの切り替えができることが前提に話を進めてきましたが、一部のブラウザ(Internet Explorerなど)ではこの切り替えに対応していません。

現時点(2006年1月)で対応しているのは、『FireFox1.0以上』、『Netscape7以上』、『Opera8以上』です。

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!