<style>タグの解説
<style>は、CSS（スタイルシート）をドキュメントの内部に直接書き加える祭に使用します。原則として、このタグは<head>の開始から終了の間に配置します。
CSSを使ってウェブサイトを構築する場合、一般的には<link>で外部ファイルを参照します。これは、複数のドキュメントに重複する内容を書かないためで、再利用を前提としたCSSでは当然のことと言えます。
逆に、一部の例外やテンプレートとは切り離したい要素がある場合に、<style>は有効な機能を果たしてくれます。どちらの方法も長所短所があるので、状況によって使い分けるようにしましょう。
<style>タグの特徴
- この要素はメタデータであるため、レイアウトには直接影響を与えません。ただし、指定されたスタイルシートの内容が、各要素のレンダリングに影響を与えます。
- 一般的にスタイルシートの扱いは、
<link>で外部ファイルを参照する方法が推奨されます。個別の対応が必要な場合に<style>を採用して下さい。 - 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<style>要素に指定できる属性
media- 適応するメディアを指定します。既定値は
"all"です。 title- 代替スタイルシートのセット名を指定します。
nonce- 行内スクリプトをホワイトリストに入れるための暗号（ワンタイム・ナンバー）を与えます。サーバーはリクエストの度に一意のノンス値を生成する必要があります。
type（廃止）- スタイルシートの言語を指定します。殆どの場合、この値は
"text/css"を指定します。省略可能であり、何も書かなかった場合は"text/css"の値が適用されます。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<style>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<style>要素はメタデータ・コンテンツを受け入れる要素の子要素として配置します。つまり、基本的には<head>要素の中に書かれます。
<head>
<style>
/* CSS */
</style>
</head>
ドキュメントのヘッダーにCSSを直接記述する場合、以下のような内容になります。ソースコードは煩雑になりますが、<link>で外部要素を読み込むよりも高速に処理できるメリットがあります。
<html>
<head>
<title>Page title</title>
<style>
body {
margin: 0;
padding: 1rem;
background-color: #fff;
color: #333;
font-size: 100%;
}
</style>
</head>
<body>
<h1>Heading text</h1>
<p>Body text<p>
</body>
</html>
複数の<style>を記述して、条件に応じてスタイルを変更することも可能です。例えば、ブラウザで閲覧する場合とページを印刷する場合を想定して、二つのスタイルを用意できます。
<html>
<head>
<title>Page title</title>
<style>
.main-contnets {
max-inline-size: 800px;
padding: 1rem;
}
</style>
<style media="print">
.main-contnets {
inline-size: 80%;
font-size: 12pt;
font-family: "ヒラギノ明朝 ProN W3", "ＭＳ Ｐ明朝", serif;
}
</style>
</head>
<body>
<main class="main-contnets">
<h1>Heading text<h1>
<p>Body text text text.<p>
<p>Body text text text.<p>
<p>Body text text text.<p>
</main>
</body>
</html>