<style></style>

更新日
仕様 HTML Living Standard
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容 スタイルシートのコード

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

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

<style>

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

</style>

属性
任意属性
media="" 対象とするメディア メディアクエリ スタイルの適用対象とするメディアを指定 (既定値は all
blocking="" [+]外部リソースの読み込み中にブロックする処理 render 文書のレンダリングをブロック ※値(ブロッキングトークン)は追加される可能性がある
廃止属性(HTML Living Standardでは未定義)
type="" [×]スタイルシートのMIMEタイプ text/css CSSMIMEタイプを指定 (既定値は text/css
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" スタイルの設定名 テキスト 任意の名前を指定

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

type属性は現行のHTMLでは廃止されていますが、旧HTMLで指定する場合は次のように記述します。

<style type="text/css">

</style>
旧HTMLからの変更点
  • HTML5:スタイルシートの言語がCSSの場合、type属性が省略可能になりました。
  • HTML5:head要素の子要素となるnoscript要素内に配置できるようになりました。
  • HTML5.1:nonce属性が追加されました。
  • HTML LS:type属性が廃止され、nonce属性がグローバル属性に移り、blocking属性が追加されました。

使用例

一般的な使い方の例

<!DOCTYPE html>
<html>
<head>

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

<style>

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

</style>

</head>
<body>

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

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

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>

<noscript>

<style>

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>

表示例

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