HTML 文書での <style> 要素の使用：
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Try it Yourself ❯
<style> タグは、HTML 文書のスタイル情報を定義するために使用します。
<style> 要素内には、HTML 要素をブラウザにどのように描画するかを指定します。
各 HTML 文書には、複数の <style> タグを指定することができます。
| 要素 | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
チップ: 外部スタイルシートへのリンクには、<link> タグを使用します。
チップ: スタイルシートの詳細については、CSS チュートリアルをご覧ください。
注: "scoped" 属性を使用していない場合、各 <style> タグは head セクションに配置する必要があります。
"scoped" 属性は、HTML5 で新しく追加されたもので、文書の指定したセクションにスタイルの定義を可能にします。 "scoped" 属性が存在する場合、スタイルはスタイル要素の親要素と、その要素の子要素にだけ適用されます。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| media | media_query | メディアリソースが最適化されるのは、どのメディア/リソースかを指定する |
| scoped | scoped | 要素の親要素とその要素の子要素にだけスタイルを適用するように指定するS |
| type | text/css | <style> タグのメディア・タイプを指定する |
<style> タグは、HTML のグローバル属性もサポートします。
<style> タグは、HTML のイベント属性もサポートします。
HTML チュートリアル：HTML CSS
CSS チュートリアル：CSS Tutorial
HTML DOM リファレンス：Style オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <style> 要素を表示しています：
style {
display: none;
}