↑

HTML5

：

タグ（要素）

：

STYLE 要素

　 編集：2022.07.01 by T.A.

→●、mdn

スタイルシートを埋め込む。

この要素を使用できる文脈

メタ･データ内容が期待される場所。

HEAD 要素の子である NOSCRIPT 要素内。

内容モデル

適合スタイルシートを与えるテキスト。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

著者に文書へ CSS スタイルシートを埋め込むことを可能にする。

STYLE 要素は、スタイリング処理モデルへの、複数の入力の 1 つである。

この要素は、ユーザーへのコンテンツを表すものでない。

例

次の文書は、デフォルトのイタリック体で作品とラテン語のタイトルを残したまま、イタリック･テキストよりも明るい赤色のテキストとして強調するスタイルを持つ。適切な要素を使用した、文書のより簡単な再スタイル付けを可能にする方法を示す。 

<!DOCTYPE html>
<HTML lang="en-US">
 <HEAD>
  <TITLE>My favorite book</TITLE>
  <STYLE>
   BODY { color: black; background: white; }
   EM { font-style: normal; color: red; }
  </STYLE>
 </HEAD>
 <BODY>
  <P>My <EM>favorite</EM> book of all time has <EM>got</EM> to be
  <CITE>A Cat's Life</CITE>. It is a book by P. Rahmel that talks
  about the <I lang="la">Felis catus</I> in modern human society.</P>
 </BODY>
</HTML>
media属性

スタイルが適用されるメディアを指定する。

値は妥当なメディア クエリー リストでなければならない。

この属性が省略される場合、デフォルトでは "all" であり、デフォルトのスタイルにより、すべてのメディアに適用されることを意味する。

mdn： この属性はスタイルを適用するメディアを定義します。値はメディアクエリーであり、省略した場合の既定値は all です。

以下のように組み込んであります： 

<STYLE id=IdStyle media="(min-width:500px)">
.Test{
  box-shadow:#faa 5px 5px;
}
</STYLE>

<SPAN class=Test>■テスト</SPAN><BR>
■テスト
当文書の表示エリアが500px以上ならスタイルシートが効果します。

メディアがprint…印刷関係ならスタイルシートが効果。 

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>HTML5：STYLE要素：テスト</TITLE>
<STYLE media="print">
.Test{
  color:red;
}
</STYLE>
</HEAD>
<BODY>
 <SPAN class=Test>■テスト</SPAN><BR>
</BODY>
</HTML>

関連→@media規則

title属性

CSS スタイルシート･セット名。

STYLE 要素が title 属性を持たない場合、タイトルを持たない。先祖の title 属性は STYLE 要素に適用しない。STYLE 要素が文書ツリー内にない場合、title 属性は無視される。[CSSOM]

type属性

この属性は、スタイル言語を MIME タイプで定義します（文字セットは指定すべきではありません）。

この属性は省略可能であり、省略した場合の既定値は text/css です。空文字列と text/css 以外の値は使用されません。注: 現代のウェブ文書では、この属性を含める理由はほとんどありません。

nonce属性

script-src コンテンツ セキュリティ ポリシー内の行内スクリプトをホワイト リストに入れるために使われる暗号ノンス（ワンタイム番号）です。

サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。

<script nonce="2726c7f26c">
  var inline = 1;
</script>

→mdn

scoped属性

廃止 非推奨

この属性が指定された場合、スタイルは、その親要素および親要素の子要素にのみ適用されます。

この属性は、https://github.com/w3c/csswg-drafts/issues/3547 により、将来再導入されるかもしれません。今この属性を使用したい場合は、ポリフィルを利用することができます。

テスト
HTML：

ここに表示
別画面で表示させて、
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：