＜style要素＞ - スタイルシート

公開日: 2017/02/08

style要素は、スタイルシートを含む要素です。ドキュメントのデザインに反映されます。

概要

名前

style

カテゴリー

Metadata content

配置できる場所

Metadata contentが期待される場所。または、head要素内のnoscript要素の中。

コンテンツモデル

スタイルシートの内容を表すテキスト。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLStyleElement

デフォルトのスタイル

style {
	display: none;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-style-element

属性

media

メディアクエリを指定すると、ユーザーエージェントはそのメディアクエリの条件に一致した場合だけ、ドキュメントにスタイルシートを適用する。

nonce

CSPで利用する暗号。

type

要素の内容のMIMEタイプ。省略した場合はtext/cssを指定したのと同じ扱いになるので、特に指定する必要はない。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

配置できる場所

style要素は、head要素内に配置できます。head要素の外に配置するのは文法違反です。以前はscopedという属性があり、body要素の子孫にできた時期がありましたが、この属性は2017年2月時点では削除されています。

HTML

<head>
	<meta charset="ja">
	<title>SYNCER</title>
	<style>
body {
	background-color: #fff ;
}
	</style>
</head>

外部のスタイルシートを読み込むには？

外部のスタイルシートを読み込むにはstyle要素ではなく、link要素を使います。

HTML

<head>
	<meta charset="ja">
	<title>SYNCER</title>
	<link rel="stylesheet" href="./style.css">
</head>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜style要素＞ - スタイルシート</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/style/">
		<style>
			body {
				background-color: #fff ;
				color: red ;
			}
		</style>
	</head>
	<body>

<p>スタイルシートで文字を赤色にしました。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/574/"> <meta charset="utf-8"> <title>【デモ】＜style要素＞ - スタイルシート</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/style/"> </head> <body>

<p>スタイルシートで文字を赤色にしました。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; color: red ; }

</style>

</script>