<style></style>
| ブラウザ |
|
|---|---|
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所、またはhead要素の子要素となるnoscript要素内 |
| 内容 | スタイルシートのコード |
style要素は、文書内にスタイルシートを記述するための要素です。通常、この要素はhead要素内で使用します。
- この要素は、文書単位でスタイルを適用させたい場合に使用します。サイト全体に適用させたい場合には、link要素を使った設定の方が効率がいいです。
<style>
ここにスタイルシートを記述します
</style>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
type="" |
スタイルシートのMIMEタイプ | text/css |
CSSのMIMEタイプを指定 （初期値は text/css） |
media="" |
対象とするメディア | メディアクエリ | スタイルの適用対象とするメディアを指定 （初期値は all） |
nonce="" |
 コンテンツセキュリティーポリシーで使用する暗号 |
文字列 | 暗号ノンス |
| グローバル属性（この要素上では、title属性が特別な意味を持ちます） | |||
title="" |
スタイルのタイトル | 文字列 | スタイルシートの名前を指定 |
- nonce属性は、コンテンツセキュリティーポリシー（CSP）で使用する暗号ノンスを設定する際に指定するそうです。（詳細未確認）
各属性の詳細については、下記のページを参考にしてください。
type属性は省略可能（CSSの場合）ですが、指定する場合は次のように記述します。
<style type="text/css">
- HTML5における変更点
-
- スタイルシートの言語がCSSの場合、type属性が省略可能になりました。（初期値が
text/cssになったため） - head要素の子要素となるnoscript要素内に配置できるようになりました。
- スタイルシートの言語がCSSの場合、type属性が省略可能になりました。（初期値が
- HTML 5.1における変更点
-
- nonce属性が追加されました。
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<style>
h1 { color: #ff0000; }
p { line-height: 140%; }
</style>
</head>
<body>
<h1>文書のタイトル</h1>
<p>文書の内容 ...</p>
</body>
</html>
- noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、そのスタイルを適用させることができます。
<!DOCTYPE html>
<html>
<head>
<noscript>
<style>
p.msg { visibility: hidden; }
</style>
</noscript>
<title>スクリプト未対応向けのスタイル</title>
</head>
<body>
<h1>スクリプト未対応向けのスタイル</h1>
<p>style要素内で、p.msg { visibility: hidden; } を指定しています</p>
<p class="msg">スクリプトを利用できないブラウザでは、この段落のテキストは表示されません。</p>
...
</body>
</html>
- 表示例
