<style></style>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所、またはhead要素の子要素となるnoscript要素
内容 スタイルシートのコード

style要素は、文書内にスタイルシートを記述するための要素です。通常、この要素はhead要素内で使用します。

  • この要素は、文書単位でスタイルを適用させたい場合に使用します。サイト全体に適用させたい場合には、link要素を使った設定の方が効率がいいです。

<style>

ここにスタイルシートを記述します

</style>

属性
任意属性
type="" スタイルシートのMIMEタイプ text/css CSSMIMEタイプを指定 (初期値は text/css
media="" 対象とするメディア メディアクエリ スタイルの適用対象とするメディアを指定 (初期値は all
nonce="" [5.1]コンテンツセキュリティーポリシーで使用する暗号 文字列 暗号ノンス
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" スタイルのタイトル 文字列 スタイルシートの名前を指定
  • nonce属性は、コンテンツセキュリティーポリシー(CSP)で使用する暗号ノンスを設定する際に指定するそうです。(詳細未確認

各属性の詳細については、下記のページを参考にしてください。

type属性は省略可能(CSSの場合)ですが、指定する場合は次のように記述します。

<style type="text/css">
HTML5における変更点
  • スタイルシートの言語がCSSの場合、type属性が省略可能になりました。(初期値が text/css になったため)
  • head要素の子要素となるnoscript要素内に配置できるようになりました。
HTML 5.1における変更点
  • nonce属性が追加されました。

使用例

一般的な使い方の例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style type="text/css">

h1 { color: #ff0000; }
p { line-height: 140%; }

</style>

</head>
<body>

<h1>文書のタイトル</h1>

<p>文書の内容 ...</p>

</body>
</html>

noscript要素内で使用した例
  • noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、そのスタイルを適用させることができます。

<!DOCTYPE html>
<html>
<head>

<noscript>

<style type="text/css">

p.msg { visibility: hidden; }

</style>

</noscript>

<title>スクリプト未対応向けのスタイル</title>

</head>
<body>

<h1>スクリプト未対応向けのスタイル</h1>

<p>style要素内で、p.msg { visibility: hidden; } を指定しています</p>

<p class="msg">スクリプトを利用できないブラウザでは、この段落のテキストは表示されません。</p>

...

</body>
</html>

表示例

サンプル画面へ新規ウィンドウで表示