★CSSの基本
| 基本スタイルシートと代替スタイルシート
現在の主要なブラウザーからは姿を消しつつあります。代替スタイルシート(rel="alternate stylesheet") を選択できるブラウザーの標準機能は、現在の主要なブラウザーからは姿を消しつつあります。 [1]
現在代替スタイルシートの切り替えに標準対応している主要なブラウザーは Firefoxのみ で、ChromeやEdge、Safariなどの他のブラウザーでは拡張機能などを用いない限り利用できません。 ブラウザーの対応状況(2026年6月現在)【注意】以下の情報は2010年頃のブラウザーHTML4からHTML5へ移行する中でのブラウザが持っていた機能になります。
⬛︎ 閲覧者にスタイルシートの選択肢を提供するウェブサイトの制作者は、複数のCSSファイルを用意することで、 閲覧者(ユーザー)に対してスタイルシートの選択肢を提供することができます。 ユーザーはスタイルシートの切り替え機能に対応したブラウザを使用することで、 自分の好みなどに応じて文書のスタイルを切り替えることが可能となります。
⬛︎ rel属性とtitle属性を指定具体的には、複数のCSSファイルを作成した上で、<link>要素のrel属性の値にalternate stylesheet、 または、stylesheet alternateを指定して、同時にtitle属性でスタイル名を指定します。 title属性を指定しないとスタイルシートが固定されてユーザーによる切り替えができないので注意してください。
例:ユーザーに代替スタイルシートを提供する<link rel="stylesheet" type="text/css" href="basic.css" title="標準"> <link rel="alternate stylesheet" type="text/css" href="alt1.css" title="代替1"> <link rel="alternate stylesheet" type="text/css" href="alt2.css" title="代替2"> ⬛︎ 各ブラウザのスタイルシートの切り替え機能Internet Explorer8以降、Firefox、Operaなどのブラウザには、スタイルシートを切り替える機能がサポートされています。 例えば、Internet Explorerではメニューの[表示]→[スタイル]のなかに適用可能なスタイルの候補が表示されます。
Firefoxではメニューの[表示]→[スタイルシート]のなかに適用可能なスタイルの候補が表示されます。
Operaでは、メニューの[表示]→[スタイル]のなかに適用可能なスタイルシートが表示されます。
Internet Explorer7以下にはスタイルシートの切り替え機能はありませんでした。
|