1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
---
title: 代替スタイルシート
slug: Web/CSS/Alternative_style_sheets
tags:
- CSS
- Guide
- HTML
- NeedsCompatTable
- NeedsUpdate
- Reference
- ガイド
translation_of: Web/CSS/Alternative_style_sheets
---
<div>{{cssref}}</div>
<p>ウェブページに<strong>代替スタイルシート</strong>を指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。</p>
<p>Firefox では、<em>表示</em> ><em>スタイルシート</em>のサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、<em>表示</em> ><em>スタイル</em>から利用できます。 Chrome では (バージョン48時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。</p>
<h2 id="An_example_specifying_the_alternative_stylesheets" name="An_example_specifying_the_alternative_stylesheets">例: 代替スタイルシートの指定</h2>
<p>代替スタイルシートはふつう、次のように {{HTMLElement("link")}} 要素に <code>rel="alternate stylesheet"</code> およびび <code>title="..."</code> 属性を使用することで指定されます。</p>
<pre class="brush: html notranslate"><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="基本">
</pre>
<p>この例では、<em>スタイルシート</em>のサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。</p>
<p>どのスタイルが選択されても、 reset.css の規則が常に適用されます。</p>
<h3 id="Try_it_out" name="Try_it_out">やってみましょう</h3>
<p><a href="/samples/cssref/altstyles/index.html">ここをクリック</a>すると、やってみることができる例を見ることができます。</p>
<h2 id="Details" name="Details">詳細</h2>
<p>文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。</p>
<ul>
<li><strong>常設</strong> (<code>rel="alternate"</code> も <code>title=""</code> もないもの): 常に文書に適用されます。</li>
<li><strong>推奨</strong> (<code>rel="alternate"</code> がなく、 <code>title="..."</code> があるもの): 既定で適用されますが、代替スタイルシートが選択されると{{domxref("StyleSheet.disabled", "無効化", "", 1)}}されます。<strong>推奨スタイルシートは一つしか存在できません</strong>ので、異なる title 属性を持つスタイルシートを複数指定すると、いくつかが無視されます。より詳細な説明は<a href="/ja/docs/Correctly_Using_Titles_With_External_Stylesheets">外部スタイルシートにおける正しいタイトルの使用</a>をご覧ください。</li>
<li><strong>代替</strong> (<code>rel="alternate stylesheet"</code> および <code>title="..."</code> の指定が必要): 既定では無効で、選択することができます。</li>
</ul>
<p>{{HTMLElement("link", "<link rel=\"stylesheet\">")}} 又は {{HTMLElement("style")}} 要素で、スタイルシートが <code>title</code> 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 <code>title</code> 属性を付けずにリンクされたスタイルシートは常に適用されます。</p>
<p>標準スタイルシートへリンクするには <code>rel="stylesheet"</code> を、代替スタイルシートへリンクするには <code>rel="alternate stylesheet"</code> を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#rel-alternate', 'link type "alternate"')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', '#the-link-is-an-alternative-stylesheet', 'alternative stylesheet')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', '#attr-style-title', 'the "title" attribute for the style element')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', '#attr-meta-http-equiv-default-style', 'meta http-equiv="default-style")')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td>
<td>{{Spec2('CSSOM')}}</td>
<td>CSS OM 仕様書は、<strong>スタイルシートセット名</strong>と、その<strong>無効フラグ</strong>、<strong>推奨される CSS スタイルシートセット名</strong> の概念を定義しています。<br>
これらがどのように指定されるのかを定義し、 HTML 仕様書が <strong><dfn>CSS スタイルシートの作成時</dfn></strong>に定義する必要がある HTML に依存した動作を定義できるようにしています。</td>
</tr>
<tr>
<td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
<td>{{Spec2("HTML4.01")}}</td>
<td>以前は、 HTML 仕様書自体で推奨及び代替スタイルシートの概念を定義していました。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.link.rel.alternate_stylesheet")}}</p>
|
