style要素

説明

style要素は、<head>-</head>内にスタイルシートを記述するための要素です。この要素をサポートしていない古いブラウザにスタイルシートが表示されてしまうのを避けるためには、スタイルシート全体を[]で囲んで記述します。

スタイルシートはstyle要素やstyle属性内に記述する以外に、link要素を使用して外部ファイルとして参照することもできます。

属性 (W3C)

<style

H3- ie3- N4-

国際化	H4- lang dir
type="MIMEタイプ"	H4- ie3- N4- [必須] MIMEタイプ "text/css"など。
media="メディア形式"	H4- ie4- N4- 出力メディアのリスト [,]で区切られたリストで指定。
title="文章"	H4- タイトル

>%StyleSheet;</style>

ブラウザ独自の属性 (ie N)

disabled	ie4- 無効化
language=""	N4 未調査

使用例

馬鹿貝で摺れている

行徳のまな板だなんてひどいじゃないか


<html>

<head>

<title>タイトル</title>

<style type="text/css"><!--

p {color:#147414;}

.essay {font-size:mediuml;}

#copy {font-size:small;}

--></style>

</head>


<body>

<p>馬鹿貝で摺れている</p>

<div class="essay">行徳のまな板だなんてひどいじゃないか</div>

<hr>

<div id="copy">&copy;2005 TMYK All Rights Reserved.</div>

</body>

</html>

XHTMLにおけるstyle要素の内容の記述方法

style要素の要素内容は、HTML4.01まででは「CDATA」、XHTMLでは「#PCDATA」として定義されています。つまり、XHTMLでは、[<]はHTMLタグの開始、[&]は実体参照の開始と認識されてしまうのです。HTML4.01以前の場合には、style要素の内容全体をコメント開始マーカー[]で囲ってコメントにする慣習がありましたが、XHTMLの場合には文字通りコメントとして認識され、スタイルシートが無視されてしまう可能性があります。

上記問題の対応策として一番簡単なのが、link要素を用いて外部スタイルシ－トを利用する方法です。こうすることで過去のブラウザでも問題なく利用できます。

HTML文書における外部スタイルシートの記述


<link rel="stylesheet" type="text/css" href="foo.css">

XMLにおける外部スタイルシートの記述


<?xml-stylesheet href="foo.css" type="text/css"?>

また、SGMLでは特定の範囲を"<![CDATA["と"]]>"で囲むことによって「#PCDATA」を「CDATA」に変更できる仕様となっています。XHTMLで推奨されている1つの方法ですが、ブラウザによってはサポートされていない場合もあります。


<style type="text/css">

<![CDATA[

<!--

...スタイルシート...

-->

]]>

</style>

style要素の内容を[]で囲まない方法もあります。XHTML1.0の仕様書で推奨されています。ただしstyle要素をサポートしていない古いブラウザなどでは、スタイルシートがそのまま表示されてしまう可能性があります。また、#PCDATAによって解釈される文字は利用できなくなります。


<style type="text/css">

...スタイルシート...

</style>


<style type="text/css">

@import url(foo.css);    /* (C1- ie4- N6-) style要素内の一番最初に記述 */

</style>

style要素 スタイルシート (style info)

説明

属性 (W3C)

ブラウザ独自の属性 (ie N)

使用例

XHTMLにおけるstyle要素の内容の記述方法

HTML文書における外部スタイルシートの記述

XMLにおける外部スタイルシートの記述

style要素スタイルシート (style info)