<style> スタイルシートを指定する

取り扱い 現行の標準
カテゴリ メタデータ・コンテンツ
scoped属性が指定された場合、フロー・コンテンツ
親にできる要素 メタデータ・コンテンツを受け入れる要素
子にできる要素 text/cssに従ったテキスト
対応ブラウザ caniuseで確認

<style>タグの説明

<style>は、CSS(スタイルシート)をドキュメントの内部に直接書き加える祭に使用します。原則として、このタグは<head>の開始から終了の間に配置します。

CSSを使ってウェブサイトを構築する場合、一般的には<link>で外部ファイルを参照します。これは、複数のドキュメントに重複する内容を書かないためで、再利用を前提としたCSSでは当然のことと言えます。

逆に、一部の例外やテンプレートとは切り離したい要素がある場合に、<style>は有効な機能を果たしてくれます。どちらの方法も長所短所があるので、状況によって使い分けるようにしましょう。

<style>タグの特徴

  • この要素はメタデータであるため、レイアウトには直接影響を与えません。ただし、指定されたスタイルシートの内容が、各要素のレンダリングに影響を与えます。
  • 一般的にスタイルシートの扱いは、<link>で外部ファイルを参照する方法が推奨されます。個別の対応が必要な場合に<style>を採用して下さい。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<style>に指定できる主な属性

type
スタイルシートの言語を指定します。殆どの場合 text/css を指定します。省略可能であり、何も書かなかった場合 text/css が適用されます。
media
適応するメディアを指定します。既定値は all です。
title
代替スタイルシートのセット名を指定します。
nonce
行内スクリプトをホワイトリストに入れるための暗号(ワンタイム・ナンバー)を与えます。サーバーはリクエストの度に一意のノンス値を生成する必要があります。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<style>の使い方とサンプル

このタグを使う場合は、そのドキュメントのヘッダーに配置し、CSSの記法に従って内容を記述します。

HTML
<html>
<head>
	<title>スタイルシートサンプル</title>
	<style>
	.sample1 {
		color: #000066;
		font-size: 20px;
		border-left: 3px solid #0066FF;
		padding: 0px 0px 0px 10px;
		margin: 10px;
	}
	</style>
</head>
<body>
	<p class="sample1">スタイルサンプル01<p>
</body>
</html>

複数の<style>を記述して、条件に応じてスタイルを変更することも可能です。

HTML
<html>
<head>
	<title>スタイルシートサンプル</title>
	<style>
	.h1_sample {
		margin: 1em 0;
		padding: 0 0 0.3em 0;
		border-bottom: 1px solid #666;
		color: #333;
		font-size: 1.5rem;
	}
	</style>
	<style media="print">
	#body_sample {
		font-family: "ヒラギノ明朝 ProN W3", "MS P明朝", serif;
	}
	</style>
</head>
<body id="body_sample">
	<h1 class="h1_sample">ドキュメントタイトル<h1>
	<p class="p_sample">文書の内容。文書の内容。<p>
</body>
</html>

<style>に関連するHTMLタグ

ヘッダー情報を構成する要素
<title> ウェブページのタイトルを指定する
<meta> ドキュメントに関するメタ情報を追加する
<link> 外部ファイルへのリンクを埋め込む
<base> ページの基準となるURLを指定する
<style> スタイルシートをドキュメントの中で指定する