Apr. 20th,2015
＃
要素について
| カテゴリー | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所、もしくは“head”要素の中にある“noscript”要素の子要素として |
| 内容 | 有効なスタイルシートであるテキスト |
| タグの省略 | 不可 |
“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;
}
</style>
</head>
<body>
...
過去には“style”要素に対応していないブラウザからスタイルシートを隠すために“style”要素の内容をコメントで囲う習慣がありましたが、これはかなり古いブラウザを対象としたものなので現代では基本的に不要です。
<style>
<!--
p.sample {
color: rgb(0,0,0);
font-size: 1.5em;
font-family: sans-serif;
text-align: justify;
}
-->
</style>
＃
＃
代替スタイルシート
“代替スタイルシート”とは？
“代替スタイルシート”は“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="ふつうのスタイル">
p.sample {
background-color: rgb(166, 147, 114); /* ■ */
}
</style>
<style title="ごうかなスタイル">
p.sample {
background-color: rgb(237, 203, 90); /* ■ */
}
</style>
<style title="しっそなスタイル">
p.sample {
background-color: rgb(247, 247, 247); /* ■ */
}
</style>
</head>
<body>
...
<p class="sample">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
</p>
...
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
＃
仕様書
“style”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
[HTMLConstructor] constructor();
attribute boolean disabled;
[CEReactions] attribute DOMString media;
[SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
// also has obsolete members
};
HTMLStyleElement includes LinkStyle
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
style {
display: none;
}
