HTML文書への組み込み

デフォルトのスタイルシート言語の指定

ほとんどのブラウザのデフォルトのスタイルシートはCSSですが、HTML文書では、CSS以外のスタイルシート言語も利用できるように設計されています。どのスタイルシート言語を使用するのか明示的に示したい場合などは、HTTPヘッダによりMIMEタイプを指定するか、meta要素を使用して次のように指定します。


<meta http-equiv="Content-Style-Type" content="text/css">

style要素、style属性による指定

スタイルシートをHTML文書に埋め込むにはstyle要素を利用します。


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

h1 { color:blue }

--></style>

要素にstyle属性を用いることによって、直接指定することもできます。


<h1 style="color:blue">やきうちによにぜにだよ！</h1>

外部スタイルシートの使用

外部スタイルシートを利用することで、複数の文書の修正をひとつのスタイルシートの修正で行うことが出来ます。HTML文書において外部スタイルシートを参照するには、link要素あるいは、CSSの@importを用います。

link要素による記述


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

@importによる記述


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

  @import url(foo.css);   /* (C1- ie4- N6-) 常に一番最初に記述 */

  h1 { color:blue }

--></style>


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

  @import "foo.css";   /* (C1- ie4- N6-) 常に一番最初に記述 */

  h1 { color:blue }

--></style>

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>

ユーザーが任意に選択できるスタイルシート

Netscape6以降では、代わりの外部スタイルシートを複数用意しておいて、ユーザーが任意に選択できるように指定することができます。そのためにはmeta要素のcontent属性、代替のlink要素、推奨のlink要素のtitle属性に同じ名前(識別子)を指定して下記のように記述します。

ユーザーが任意に選択できるスタイルシート

meta要素の指定


<meta http-equiv="Default-Style" content="foo">

代替スタイルシート


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

推奨スタイルシート


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

推奨スタイルシートがデフォルトのスタイルシートとなり、代替スタイルシートが選択可能となります。

固定スタイルシート


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

link要素に通常の指定を行った場合は固定スタイルシートとなります。