XHTML/CSS・トップ | CSS基礎知識・目次

●ページ内にCSSを指定する

 当サイトは外部スタイルシート作りの解説が中心ですが、CSSはHTMLに直接記述することもできます。外部スタイルシートとHTMLの両方にCSSの指定をした場合は、HTMLに指定したCSSが優先されます。スタイルシート内においても、後(下のほう)から記載した書式が優先的に反映されます。CSSをHTMLに組み込むには以下のように style要素を<head>〜</head>の範囲内に配置します。

【HTML】

<style type="text/css">
<!--
body {
 background-color: #fff;
 color: #000;
}
-->
</style>

【解説】

 CSSの書式は必要に応じて、複数記載します。できる限り、CSSは外に置くほうが好ましいのですが、止むを得ないときはHTMLのファイル内に style要素として記載することになります。(当サイトも必要に応じて使っています。)

 HTMLのコメントに使われている「<!--」「-->」で囲っているのは、古いブラウザにCSSを読み込まれない(表示されない)ようにするおまじないみたいなものです。また、<style type="text/css">の意味は、スタイルシート言語がCSSであることの宣言です。

 実際に記述する位置としては、
<head>
 ・・・
<title>Webページタイトル</title>
<style type="text/css">
<!--
 CSSの書式
-->
</style>
 ・・・
</head>

と、<title>〜</title>の直下に記述します。また、<link〜>のリンク要素がすでに指定してある場合はリンク要素の下に記載すると良いでしょう。

■関連ページ

【XHTML】

 XHTMLで内部スタイルシートを使う場合はCDATAセクションを入れた style要素を配置することになっています。

<style type="text/css">
<![CDATA[
body {
 background-color: #ffffff;
 color: #000000;
}
]]>
</style>

 これは正式な仕様としては正しいのですが、XHTML文法の現状はXML形式のHTMLファイルです。XML形式のHTMLファイルとはXHTMLの文法で書かれ、かつ、拡張子が htmlのファイルのことです。XML形式のHTMLファイルだと現在の主流のブラウザがCDATAセクションに対応していません。従って、CDATAセクションは使わないほうが無難だと思います。拡張子が xhtmlのファイルの場合は、Netscape (v7.1)、Mozilla(v1.7.12)、Firefox(v1.5)、Opera(v8.50)で表示されます。しかし、肝心のウィンドウズ版IE(v6.0、v7.0)が対応していません。XHTML文書でスタイルシートを書く場合は内部スタイルシートではなく、外部においたCSSファイルを利用することをおすすめします。一番無難で確実な方法だと思います。当サイトはスタイルシートを解説している都合上、割り切って、普通の style要素を使っていますが、正しい使い方ではありません。XHTMLの場合、 style要素内のCSSソースで使う文字によってはエラーとなりますのでご注意ください。(※詳細は「XHTMLのルール」をご参照ください。)

XHTML/CSS・目次 | CSS基礎知識・目次

Copyright (C) 2004-2008 http://www.xml.vc/