このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

style要素:スタイルシート

記事Apr. 20th,2015
July 13th,2020
文書内にスタイルシートを記述するための要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所、head”要素の中にあるnoscript”要素の子要素として
内容 有効なスタイルシートであるテキスト
タグの省略 不可

style”要素は文書内にスタイルシートを記述するための要素です。

外部ファイルにスタイルシートを記述(外部スタイルシート)して読み込む場合はlink”要素を使用します。複数の文書に適用するスタイルシートの場合は“style”要素の中に記述するよりも外部スタイルシートとした方が管理も容易で効率的です。

適用対象の要素に直接スタイルシートを記述したい場合は代わりにグローバル属性style”属性を使用できます。

複数の“style”要素やlink”要素でスタイルが競合する場合は後に配置したものが優先されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all">
<title>黄色いフルーツバナナ - 果物を食べる</title>
<style>
p.sample {
color: rgb(0,0,0);
font-size: 1.5em;
font-family: sans-serif;
text-align: justify;
text-justify: inter-ideograph;
}
</style>
</head>
<body>
...

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
media="" スタイルシートが対象とするメディア メディアクエリ スタイルシートが対象とするメディア条件
title="" 代替スタイルシートの名前 テキスト 代替スタイルシートの名前

グローバル属性title”属性は“style”要素に指定した場合は他の要素に指定した場合と意味合いが異なります。

過去に定義された属性

属性
属性 説明 説明
type=""注意 スタイルシートの記述言語 MIMEタイプ スタイルシートの記述言語
nonce=""HTML5.1で追加 コンテンツセキュリティポリシーのためのワンタイムトークン ワンタイムトークン 自動生成したBASE64でエンコードされた暗号

代替スタイルシート

“代替スタイルシート”とは?

代替スタイルシート”はlink”要素style”要素で複数用意されたスタイルシートをユーザーが選択して切り替えられる機能です。

対応しているブラウザではlink”要素style”要素title”属性で指定されたスタイルシートの名前が選択肢として表示されます。

style”要素によって読み込まれるスタイルシートは以下の条件で適用されます。

title”属性を指定していない場合
スタイルシートは常に適用されます。
title”属性を指定した1個目のstyle”要素
スタイルシートはデフォルトで適用されますが、他の代替スタイルシートに切り替えると適用されなくなります。
title”属性を指定した2個目以降のstyle”要素
スタイルシートはデフォルトでは適用されませんが、代替スタイルシートを切り替えることによって適用されます。

代替スタイルシートの名前(title”属性の値)が同じlink”要素style”要素によるスタイルシートはグループ化され、選択された時に同時に適用されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all">
<title>黄色いフルーツバナナ - 果物を食べる</title>
<style>
p.sample {
color: rgb(0,0,0);
font-size: 1.5em;
font-family: Meiryo UI,sans-serif;
text-align: justify;
text-justify: inter-ideograph;
}
</style>
<style title="ふつうのスタイル">
div.sample {
background-color: rgb(166, 147, 114);
}
</style>
<style title="ごうかなスタイル">
div.sample {
background-color: rgb(237, 203, 90);
}
</style>
<style title="しっそなスタイル">
div.sample {
background-color: rgb(247, 247, 247);
}
</style>
</head>
<body>
...

仕様書

style”要素はHTML3.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<style>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク