<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> | スタイルシートをドキュメントの中で指定する |