スタイルシートの記述法と優先順位

 HTMLの項目でも書きましたが、HTMLではその扱いやすさから、本来の目的である単純な構造をマークアップする役割を超えた、レイアウトまで記述されるようになりました。

 しかもブラウザ独自のタグなどが作られ、それらのタグを使うことにより、他のブラウザでは表示が崩れるなど、統一性が保たれなくなりました。

 そこで、スタイルシート(Cascade Style Sheet/CSS)が誕生し、HTMLが担わされてきたデザイン、レイアウトをスタイルシートが引継ぎ、HTMLはもとの役割を果たせるよう、W3Cが勧告したのでした。


スタイルシートの記述

 スタイルシートの記述方法は3通りあります。

1.タグごとにスタイル属性で設定する。

例)
<p style="color: #0000ff;">スタイルを属性で指定する</p>

 この方法では、属性と値を設定したタグにのみ指定したスタイルが適用されます。

2.HTMLファイルのヘッダ部分にまとめて設定する。

例)
<head>
<style type="text/css">
//<![CDATA[ ※
p { color: #0000ff; }
//]]> ※
</style>
</head>
・・・中略・・・
<p>このページの<p>~</p>にスタイルが適用されます。</p>

※ HTMLソースでXML宣言をしている場合の記述法です。
XML宣言をしていない場合は、従来どおり、「<!-- ~~ -->」で記述します。
XHTMLもこの記述法に準じますが、従来の記述でも動作するようです。
文頭の「//」はスクリプトエラーが発生するのを回避するために記述しています。

 ヘッダにまとめてスタイルを設定します。指定したページの該当する部分全てに適用されます。 (ヘッダには、他にもいろいろ記述されますが、ここでは割愛しています。)

3.外部ファイルとしてスタイルシートのファイルを作る。

 外部に作った「CSSファイル」は、HTMLファイルのヘッダに以下のように記述して呼び出します。

<link rel="Stylesheet" type="text/css"→~
      ~→ src="http://Yours.com/style.css" />
※注
→~~→は、スペースの都合上、改行して表示していますが、
実際にHTMLに記述するときは改行しません。

 外部ファイルをヘッダで指定したスタイルシートのURL(ここでは、「http://Yours.com/」ドメインの最上階)に作ります。相対パス(./、../../ のように、半角ドットと半角スラッシュで記述するパス)だと、H HTMLファイルの階層が変わるごとにヘッダを書き直す必要があるので、絶対パス(http://で始まるURL)にしておくのが普通です。  拡張子は「.css」に。ここではファイル名を「style」としていますが、ご自由にどうぞ。

 スタイルシートの設定方法には優先順位が有り、1.で設定されたスタイルから順に優先され表示されます。ページごと、部分ごとに細かくデザインを分ける時のために、このように決められています。

 しかし、普通のサイトの場合、ページごとに細かくデザインを変えることはあまり無く、たいてい共通のスタイルで、部分的にチョコチョコ変える程度だと思います。
 その場合でいちばん良いのは、3.の外部ファイルを作る方法でしょう。
 後ほど説明しますが、スタイルシートを一ヶ所で管理することにより、管理上の大変なメリットが生まれます。

 2.は、そのページにだけ外部ファイルで指定したのとは違うスタイルを適用する場合に使います。

 1.は2.や3.で指定したスタイルを部分的に変更したい場合に、HTMLタグに属性として書き込み、優先順位は最上位になります。
 デザインの凝り具合によりますが、横着者は出来るだけスタイルを共通化して、外部ファイルによる一括管理が楽チンです。

 ちなみに管理人は、主に3の方法で利用し、イレギュラーな場合(たまたまその部分だけ特殊なスタイルが必要な場合や、スタイルの優先順位上、止むを得ない場合)は1.の方法を利用します。一つのサイトでページ単位でスタイルを変える事がないので、2.はあまり使いません。



ページの先頭に戻る