CSS(Cascading Style Sheet)　スタイルシートとは

CSSはHTMLでは指定できない文書の体裁(見栄え)を細かく定義する仕組みで、 W3Cによってその仕様が検討・管理さています。現在、CSSにはCSS1とCSS2の2つのレベルがあり、現在CSS3の草案が提出されています。

CSSで規定されている内容を実際に表示するのはHTML文書と同様にInternet Explorerなどのブラウザです。ブラウザの種類、バージョンにより表示できるCSSのレベルが異なります。

CSSを処理できないブラウザの場合、HTML文書の構造のみが処理されます。

現在、スタイルシートの規定をすべて満たすブラウザは存在しません。

次の3つの文書はHTMLの内容は全く同じですが、CSSの定義が異なっています。実際に陸をクリックしてその表示を確認してください。

この例のようにCSSの定義を変えることでHTML文書の見栄えが全く変わることがわかります。

スタイルシートを上手に使えばHTMLによる文書構造を変更することなくデザインを設計・設定・変更できます。

CSSの詳細はW3C(World Wide Web Consortium)のホームページ(http://www.w3c.org/)(英文です)で確認できます。

スタイルシートの定義はどこに書けばよいか

スタイルシートをHTML文書で利用するには次のいずれかの方法で定義します。

HTMLタグに対するstyle属性として定義: 一つ一つのタグに属性として指定するので重複する場合には非効率的
HTML文書のヘッド部にタグ自身、クラスセレクタ、IDセレクタとして定義: 定義の重複はなく、同一文書内で繰り返し使えるが、複数の文書では使えない。
HTML文書とは別の外部ファイルにスタイルの定義を記述: 複数の文書で同じスタイルシートを使える。複数ファイルのスタイルを一括で変更できる。

それぞれの定義例を以下に示す。

タイプ	記述例
style属性	<H1 style=”font-size : 40pt; color : red;”>
ヘッド部	<STYLE type=”text/css”> H1 { font-size : 40pt; color : red; } B1 { font-size : 12pt; color : blue; } </STYLE>
外部ファイル	<LINK rel="stylesheet" href="style.css" type="text/css">

タイプ

記述例

style属性

<H1 style=”font-size : 40pt; color : red;”>

ヘッド部

<STYLE type=”text/css”>
    H1 { font-size : 40pt; color : red; }
    B1 { font-size : 12pt; color : blue; }
</STYLE>

外部ファイル

<LINK rel="stylesheet" href="style.css" type="text/css">

基本的な定義

CSSのスタイルは次のように定義します。

セレクタ { 属性1 ： 値； 属性2 ： 値； }

セレクタとはHTMLの要素名かクラスと呼ばれる制作者によるスタイルに付けた名前です。属性がひとつしかない場合には属性の区切りを示すセミコロン(;)を省略できる。

例えば、H1要素の文字の色を青、フォントサイズを12ポイントにするには次のように記述します。

H1 { color : blue; font-size : 12pt;}

スタイルと値は：(コロン)で区切り、スタイル間は；(セミコロン)で区切ります。
定義はすべて半角文字です。

グループ化

複数のセレクタに同じ宣言行う場合や一つのセレクタに複数の宣言を行うことをグループ化といいます。

グループ化するときは要素名などをカンマ(,)で区切ります。

例えば、H1、H2、H3の各要素の文字色を青にするには次のように記述します。

H1, H2, H3 { color : blue }

継承

継承は要素を入れ子にし、その内側の要素のスタイルが指定されていないときはその要素の親のスタイルがそのまま適用されことです。

例えば、次の記述の場合、要素H1が要素EMの親になります。

<H1>スタイルシートの<EM>セレクタ</EM></H1>

H1要素の文字色が青に指定されていてEM要素は指定がない場合、次の記述のEM要素の色はその親にあたるH1要素の色を受け継ぎ、青になる。

クラスセレクタ

HTML要素そのものにスタイルを定義せず、すべての要素、あるいは特定の要素のみに適用できるスタイルを指定するときのセレクタがクラスセレクタです。

クラスセレクタで定義したスタイルは各要素のclass属性で指定します。CSSはこのclass属性を使って各要素の見栄えを指定する。

次の例はH1要素のみに対するクラスセレクタb1の記述例です。このクラスは他の要素では利用できない。

H1.b1 { color : blue; font-size : 20pt; }

次の例はすべての要素で利用できるクラスセレクタb2の定義例です。要素名を省略しているのでピリオドから始まります。

.b2 { color : blue; font-size : 20pt; }

文脈セレクタ

複数の要素が入れ子の関係にあるとき、単独で用いられる場合とは異なるスタイルを指定するセレクタを文脈セレクタという。

次に示すスタイル指定は、EM要素の色はどの場所にあっても常に赤になる。

H1 { color : blue }
EM { color : red }

これをH1要素の内側にあるときだけ赤にしたければ次のように記述する。

H1 EM { color : red }

CSSではスタイル定義の説明文などをコメントとして記述できる。コメントは/*と*/で囲む。

H1 { color : red } /* H1は赤 */

@import

この規則は外部ファイルに定義したスタイルシートを取り込むときに使用する。

例えば、スタイルファイルmystyle.cssをインポートしたければ、次のいずれかの記述を利用する。

@import "mystyle.css";
@import url("mystyle.css");

@importはIE3やNN4では実装されていないのでブラウザのバージョンによってcssを使い分けるときに使える。

カスケード処理

スタイルシートの定義は文書制作者、ユーザ、ユーザエージェントの三つの異なる出所がある。もし、これらのスタイルシートが競合を起こしたときカスケード処理に従って補完する。

カスケード処理では各スタイル規則に優先度を割り当て、競合が起きたときはそのときに最も高い優先度の規則が適用される。

通常の宣言の場合の優先度は次の通り。

文書制作者
ユーザの順になるが、優先度の宣言がある場合

ユーザ
文書制作者

!important

これはスタイルの最重要指定の宣言に使用する。ユーザの最重要規則は文書作成者のそれよりも優先される。

例えば、次の記述の場合、text-indentはユーザのスタイル指定が優先し、font-sizeは優先度指定のある制作者の指定が優先する。また、制作者のスタイル内での競合も!important宣言のあるスタイルが優先される。

/* ユーザのスタイル */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* 制作者のスタイル */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

CSS(Cascading Style Sheet) スタイルシートとは