<style></style>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 |
| 内容 | スタイルシートのコード |
style要素は、文書内にスタイルシートを記述するための要素です。この要素はhead要素内で使用します。
- この要素は、文書単位でスタイルを適用させたい場合に使用します。サイト全体に適用させたい場合には、link要素を使った設定の方が効率がいいです。
<style>
ここにスタイルシートを記述します
</style>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
media="" |
対象とするメディア | メディアクエリ | スタイルの適用対象とするメディアを指定 （既定値は all） |
blocking="" |
 外部リソースの読み込み中にブロックする処理 |
render |
文書のレンダリングをブロック ※値（ブロッキングトークン）は追加される可能性がある |
| 廃止属性（HTML Living Standardでは未定義） | |||
type="" |
 スタイルシートのMIMEタイプ |
text/css |
CSSのMIMEタイプを指定 （既定値は text/css） |
| グローバル属性（この要素上では、title属性が特別な意味を持ちます） | |||
title="" |
スタイルの設定名 | テキスト | 任意の名前を指定 |
各属性の詳細については、下記のページを参考にしてください。
type属性は現行のHTMLでは廃止されていますが、旧HTMLで指定する場合は次のように記述します。
<style type="text/css">
</style>
- 旧HTMLからの変更点
-
- HTML5：スタイルシートの言語がCSSの場合、type属性が省略可能になりました。
- HTML5：head要素の子要素となるnoscript要素内に配置できるようになりました。
- HTML5.1：nonce属性が追加されました。
- HTML LS：type属性が廃止され、nonce属性がグローバル属性に移り、blocking属性が追加されました。
使用例
<!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>
- 表示例
