制作者の活動(PR)。

敢えて解説しなかったCSSの定義方法。

HTML&CSS入門のCSSの書き方使い方では、CSSの定義方法として外部ファイルで定義して、それをHTML文書にリンクさせる方法のみを解説しました。その他の方法はその後も一切解説していません。

ここではその他の定義方法を解説するとともに、なぜ制作者が解説を忌避したのかもお話ししましょう。

CSSは外部ファイルで定義する以外に、HTML文書内に定義を埋め込む事も可能です。HTML 4.0以降には<style>要素が用意されております。

書式は以下の通りです。

<style type="text/css" media="対応メディア">
        (スタイル定義を記述する)
    </style>

制作者がこの方法を解説しなかったのは、HTML文書に直接スタイルを記述する習慣が付いては行けないと思ったからです。そのような癖がつくと、本来なら外部ファイルで纏めるべき定義をいちいちHTMLファイルに記述する事になり兼ねません。

また、CSSに対応していないブラウザ、特にCSSの規格が策定される前の世代のブラウザは、<style>要素を認識出来ず、従って<style>要素の内容をクライアント領域にそのまま書出す可能性があると言われております。

この問題を回避するためには、旧来のHTMLでは<style>要素の内容をコメント宣言にすると言う方法があります。

具体的には以下のように記述します。

<style type="text/css">
    <!--
        (スタイル定義を記述する)
        -->
    </style>

ただし、XHTMLでは<style>要素の内容をコメントアウトする方法は使えません。

XHTML(と言うよりXML)ではコメント宣言を厳密に解釈するため、<style>要素の内容全体がコメント宣言となっている場合、内容が全て無視されてしまうからです。

HTML文書の<body>要素内に記述できる全ての要素には、style属性でスタイルを定義する事も出来ます。この場合、属性値にはセレクタなどは記述せず、プロパティのみを並べていくことになります。

例えば、<p>要素の背景を白に、文字色を緑にしたい場合、以下のように記述します。

<p style="background: #fff; color: #090; "> … </p>

style属性でスタイルを当てる方法にはいくつもの欠点があります。

いちいちスタイルを記述するので、HTML文書がそれだけ重くなる。: これでは物理マークアップと大して変わりません。
メディアごとにスタイルを分けられない。: 例えば、PCで最適なスタイルのつもりでも携帯電話で見たらどうなるでしょうか。
修正が面倒になる。: <style>要素の場合もそうですが、スタイル定義があちこちのHTML文書に散らばっていたら、スタイル定義を探すだけでも大仕事です。ましてや訂正するとなるとファイルの本数に依ってはお手上げです。

実際、style属性はXHTML 1.1では排除勧告(Deprecated)が出ております。

仕様の問題ではありませんが、ネットスケープ 4.xではstyle属性を用いるとそれだけで正常に表示出来なくなるだけでなく、クラッシュの原因になる場合があります。この問題を考えるとstyle属性は危険だとも言えます。