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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
---
title: '<style>: スタイル情報要素'
slug: Web/HTML/Element/style
tags:
- CSS
- Element
- HTML
- HTML document metadata
- Reference
- Style
- Web
translation_of: Web/HTML/Element/style
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の <code><style></code> 要素</strong>は、文書あるいは文書の一部分のスタイル情報を含みます。</span> <code><style></code> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p><code><style></code> 要素は文書の {{htmlelement("head")}} 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて {{htmlelement("link")}} 要素を使用することをより推奨します。</p>
<p>文書に複数の <code><style></code> 及び <code><link></code> が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。</p>
<p><code><link></code> 要素と同じ方法で、 <code><style></code> 要素に <code>media</code> 属性を付けて<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。</p>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>があります。</p>
<dl>
<dt>{{htmlattrdef("type")}}</dt>
<dd>この属性は、スタイル言語を MIME タイプで定義します (文字セットは指定すべきではありません)。この属性は省略可能であり、省略した場合の既定値は <code>text/css</code> です。空文字列と <code>text/css</code> 以外の値は使用されません。 <strong>注:</strong> 現代のウェブ文書では、この属性を含める理由はほとんどありません。</dd>
<dt>{{htmlattrdef("media")}}</dt>
<dd>この属性はスタイルを適用するメディアを定義します。値は<a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a>であり、省略した場合の既定値は <code>all</code> です。</dd>
<dt>{{htmlattrdef("nonce")}}</dt>
<dd><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src コンテンツセキュリティポリシー</a>内の行内スクリプトをホワイトリストに入れるために使われる暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。</dd>
<dt>{{htmlattrdef("title")}}</dt>
<dd>この属性は<a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a>のセットを指定します。</dd>
</dl>
<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3>
<dl>
<dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
<dd>
<p>この属性が指定された場合、スタイルは、その親要素および親要素の子要素にのみ適用されます。</p>
<div class="note">
<p>この属性は、 <a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a> により、将来再導入されるかもしれません。今この属性を使用したい場合は、<a href="https://github.com/samthor/scoped">ポリフィル</a>を利用することができます。</p>
</div>
</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="A_simple_stylesheet" name="A_simple_stylesheet">単純なスタイルシート</h3>
<p>以下の例では、文書にとても単純なスタイルシートを適用します。</p>
<pre class="brush:html notranslate"><!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html></pre>
<p>{{EmbedLiveSample('A_simple_stylesheet', '100%', '60')}}</p>
<h3 id="Multiple_style_elements" name="Multiple_style_elements">複数の style 要素</h3>
<p>この例には、二つの <code><style></code> 要素が含まれています。 — 競合する宣言は、<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が同じであれば、後の <code><style></code> 要素が優先されることに注意してください。</p>
<pre class="brush:html notranslate"><!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html></pre>
<p>{{EmbedLiveSample('Multiple_style_elements', '100%', '60')}}</p>
<h3 id="Including_a_media_query" name="Including_a_media_query">メディアクエリが含まれるもの</h3>
<p>この例では一つ前に作ったものに対して、二番目の <code><style></code> 要素に <code>media</code> 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。</p>
<pre class="brush:html notranslate"><!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="all and (max-width: 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html></pre>
<p>{{EmbedLiveSample('Including_a_media_query', '100%', '60')}}</p>
<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>
<table class="properties">
<tbody>
<tr>
<th><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>、 <code>scoped</code> 属性が提供された場合: <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td>
</tr>
<tr>
<th>許可されている内容</th>
<td><code>type</code> 属性に合致するテキストコンテンツ、すなわち <code>text/css</code>。</td>
</tr>
<tr>
<th>タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th>許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>許可されている <code>role</code> なし</td>
</tr>
<tr>
<th>DOM インターフェイス</th>
<td>{{domxref("HTMLStyleElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td><code>type</code> 属性が省略可能になった。</td>
</tr>
<tr>
<td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
<td>{{ Spec2('HTML4.01') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.style")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>文書に外部スタイルシートを適用することができる {{HTMLElement("link")}} 要素</li>
<li><a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a></li>
</ul>
|
