style

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 埋め込みスタイルの指定
読み方 スタイル

カテゴリー

メタデータ・コンテンツ
scoped属性がある場合はフロー・コンテンツ

親にできる要素/カテゴリー

scoped属性がない場合は、メタデータ・コンテンツが期待される個所か、head要素の子であるnoscript要素の中
scoped属性がある時はフロー・コンテンツが期待される場所

子にできる要素/カテゴリー

type属性に依存

<style 属性="値">~</style>

属性 概要
media 文字列 メディアクエリー
type 文字列 MIMEタイプ
scoped なし スタイルの局所化

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 style要素は、埋め込みスタイルを定義します。

 media属性は、特定のメディアにのみスタイルを適用したい場合に指定します。media属性には、適切なメディアクエリー文字列を設定します。

 type属性には、スタイル言語のMIMEタイプを指定します。標準は「text/css」です。

 scoped属性は、特定の要素にだけスタイルを適用したい場合に使います。ある要素Xの中に、scoped属性があるstyle要素を入れると、要素Xおよびその子孫要素の中でだけそのスタイルが適用されます。
 また、scoped属性が指定されていないstyle要素のスタイルは、文書全体に適用されます。
 ただし、執筆時点では、主要なWebブラウザーではscoped属性は仕様通りの動作にはならず、文書全体にスタイルが適用されます。
※Internet Explorer、Firefox、Google Chrome、Safari、Opera

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>style要素 - サンプル</title>
<style type="text/css">
p {
    font-size : 24pt;
}
</style>
</head>
<body>
<p>p要素のfont-sizeを24ptに設定</p>
</body>
</html>

サンプル実行画像

よくある間違い、勘違い

 「親にできる要素/カテゴリー」で示したように、scoped属性がないstyle要素はhead要素の中(またはhead要素の中にあるnoscript要素の中)に入れる必要があります。
 ただし、主要Webブラウザーでは、body要素内にあるstyle要素も解釈して文書に適用します。
※Internet Explorer、Firefox、Google Chrome、Safari、Opera

Powered by Web Professional

目次