HTML <style> タグ

定義と使用方法

<style> タグはドキュメントのスタイル情報（CSS）を定義するために使用されます。

在 <style> 要素内で、HTML要素がブラウザ内でどのように表示されるかを指定できます。

style 要素はHTMLドキュメント内に埋め込まれたCSSスタイルを定義し、link要素は外部スタイルシートのスタイルをインポートするために使用されます。

style 要素はHTMLドキュメントの各部分に現れることができます。一つのドキュメントには複数のstyle要素を含むことができ、すべてのスタイル定義をhead部分に詰め込まなくても済みます。テンプレートエンジンを使用してページを生成する場合、この機能は非常に役立ちます。なぜなら、これにより、ページ固有のスタイルを使用してテンプレートで定義されたスタイルに追加するためです。

も参照してください：

HTML 教程：HTML CSS

CSS 教程：CSS 教程

HTML DOM リファレンスマニュアル：Style オブジェクト

インスタンス

例 1

使用 <style> 要素はシンプルなスタイルシートをHTMLドキュメントに適用します：

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>これはタイトル</h1>
<p>これは段落です。</p>
</body>
</html>

自分で試してみてください

例 2

同じ要素に対する複数のスタイル：

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>これはタイトル</h1>
<p>これは段落です。</p>
</body>
</html>

自分で試してみてください

ヒントとコメント

注意：ブラウザがスタイルシートを読み込むと、HTMLドキュメントをスタイルシート内の情報に基づいてフォーマットします。同じ選択子（要素）に対して異なるスタイルシートで属性が定義されている場合、最後に読み込んだスタイルシートの値が使用されます（上の例を参照してください）！

ヒント：外部スタイルシートにリンクするには <link> タグ。

ヒント：スタイルシートに関する情報を詳しく知りたい場合は、以下を読んでください CSS 教程。

属性

属性 値 説明
media メディアクエリ スタイルの使用するメディアを指定します。
type text/css <style> タグのメディアタイプを指定します。

グローバル属性

<style> タグは以下のイベント属性をサポートしています HTML でのグローバル属性。

イベント属性

<style> タグは以下のイベント属性をサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

大多数ブラウザは以下のデフォルト値を表示します <style> 要素：

style {
  display: none;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート