style要素
の仕様

style
スタイル情報 (Style info)
種類
生テキスト要素
カテゴリ
メタデータコンテンツ
レンダ
リング
ボックスを生成しない
非表示の要素
  1. style {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫は、ボックスやテキストランを生成しません。 などになります。

使用できる状態
メタデータコンテンツを受け入れる要素。
head要素の子である noscript要素。
許可されている内容
適合したスタイルシートを与えるテキスト。
タグの省略
省略できません。
許可されているARIA
なし[No corresponding role]
属性

グローバル属性

media
該当するメディア
blocking
要素が潜在的にレンダリングをブロックしているかどうか
title
この要素に特別なセマンティクスで、CSSスタイルシートセット名。
DOM
HTMLStyleElement
  1. [Exposed=Window]
  2. interface HTMLStyleElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. attribute boolean disabled;
  6. [CEReactions] attribute DOMString media;
  7. [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
  8.  
  9. // also has obsolete members
  10. [CEReactions] attribute DOMString type;
  11. };
  12. HTMLStyleElement includes LinkStyle;
  13.  
  14. interface mixin LinkStyle {
  15. readonly attribute CSSStyleSheet? sheet;
  16. };
  17.  
  18. interface CSSStyleSheet : StyleSheet {
  19. constructor(optional CSSStyleSheetInit options = {});
  20.  
  21. readonly attribute CSSRule? ownerRule;
  22. [SameObject] readonly attribute CSSRuleList cssRules;
  23. unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  24. undefined deleteRule(unsigned long index);
  25.  
  26. Promise<CSSStyleSheet> replace(USVString text);
  27. undefined replaceSync(USVString text);
  28. };
  29.  
  30. dictionary CSSStyleSheetInit {
  31. DOMString baseURL = null;
  32. (MediaList or DOMString) media = "";
  33. boolean disabled = false;
  34. };
PUG
_template.pug
  1. block variable
  2. block document
  3. doctype html
  4. html(lang="ja")
  5. head
  6. block head
  7. meta(charset="UTF-8")
  8. title 離珠のHTMLでしぃ！
  9. style
  10. | body { color: white; background-color: teal; }
  11. noscript
  12. style
  13. | body { color: black; background-color: white; }
  14. body
  15. block body
  16. | style要素のサンプル用ページです。
説明
style要素は、文書あるいは文書の一部分のスタイル情報を表します。

style要素を使用すると、作成者はCSSスタイルシートをドキュメントに埋め込むことができます。 スタイル要素は、スタイリング処理モデルへのいくつかの入力の1つです。 要素はユーザーのコンテンツを表していません。

スタイルシート(Style Sheets.)とは、文書の見栄えに関する情報を記録等したデータやファイル等の事です。

「style要素」のページで改めて詳細に記述しています。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. <style>
  7. body { color: white; background-color: teal; }
  8. </style>
  9. <noscript>
  10. <style>
  11. body { color: black; background-color: white; }
  12. </style>
  13. </noscript>
  14. </head>
  15. <body>
  16. link要素のサンプル用ページです。
  17. <link rel="stylesheet" href="./risyu02.css">
  18. </body>
  19. </html>
参照元
参照元
  1. HTML Living Standard. 4.2.6 The style element
  2. HTML Living Standard. 15 Rendering 15.3.1 Hidden elements
  3. HTML 5.2 W3C 勧告. 4.2.6. The style element (W3C勧告、2017年12月14日)
  4. HTML 5.2 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2017年12月14日)
  5. HTML 5.1 W3C 勧告. 4.2.6. The style element (W3C勧告、2016年11月1日)
  6. HTML 5.1 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2016年11月1日)
  7. HTML 4.01 Specification W3C 勧告. 14.2.3 Header style information: the STYLE element (W3C勧告1999年12月24日)
  8. HTML 3.2 Reference Specification. STYLE and SCRIPT (W3C勧告1997年1月14日)
  9. MDN Web Docs. HTML <style>: スタイル情報要素
  10. CSS Text Module Level 3
最終確認日
2022-07-27