ウェブページに代替スタイルシートは、ユーザーが必要性や設定に応じて複数のバージョンのページを見る方法を提供します。

Firefox では、表示 >スタイルシートのサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、表示 >スタイルから利用できます。 Chrome では (バージョン48時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。

例: 代替スタイルシートの指定

代替スタイルシートはふつう、次のように <link> 要素に rel="stylesheet alternate" 及び title="..." 属性を使用することで指定されます。

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

<link href="default.css" rel="stylesheet" type="text/css" title="既定のスタイル">
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="ファンシー">
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="基本">

この例では、スタイルシートのサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。

どのスタイルが選択されても、 reset.css の規則が常に適用されます。

やってみましょう

ここをクリックすると、やってみることができる例を見ることができます。

詳細

文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。

  • 常設 (rel="alternate"title="" もないもの): 常に文書に適用されます。
  • 推奨 (rel="alternate" がなく、 title="..." があるもの): 既定で適用されますが、代替スタイルシートが選択されると無効化されます。推奨スタイルシートは一つしか存在できませんので、異なる title 属性を持つスタイルシートを複数指定すると、いくつかが無視されます。より詳細な説明は外部スタイルシートにおける正しいタイトルの使用をご覧ください。
  • 代替 (rel="stylesheet alternate" 及び title="..." の指定が必要): 既定では無効で、選択することができます。

<link rel="stylesheet"> 又は <style> 要素で、スタイルシートが title 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 title 属性を付けずにリンクされたスタイルシートは常に適用されます。

標準スタイルシートへリンクするには rel="stylesheet" を、代替スタイルシートへリンクするには rel="alternate stylesheet" を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。

仕様書

仕様書 策定状況 コメント
CSS Object Model (CSSOM)
CSS Style Sheet Collections の定義
草案 CSS OM 仕様書は、スタイルシートセット名と、その無効フラグ推奨される CSS スタイルシートセット名 の概念を定義しています。
これらがどのように指定されるのかを定義し、 HTML 仕様書が CSS スタイルシートの作成時に定義する必要がある HTML に依存した動作を定義できるようにしています。

HTML Living Standard
Link type "stylesheet" の定義

HTML Living Standard
The style element の定義

HTML Living Standard
Default style state (http-equiv="default-style") の定義

現行の標準 HTML 仕様書では、 <link> 及び <style> 要素を扱う際に、いつどのように CSS スタイルシート生成アルゴリズムが呼び出されるかと、 <meta http-equiv="default-style"> の動作を定義しています。
HTML 4.01 Specification
Alternative style sheets の定義
勧告 以前は、 HTML 仕様書自体で推奨及び代替スタイルシートの概念を定義していました。

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, ethertank, Mgjbot, Kohei
最終更新者: mfuji09,