スタイルシート入門（基礎知識）ホームページ制作京都

スタイルシート入門（基礎知識）

スタイルシートとは？
スタイルシートの基礎
タグと要素とセレクタ
グルーピング
継承
クラス
定義済みクラス
ID属性
状況依存セレクタ
コメント
優先順位
スタイルシートを外部ファイルで定義する
長さの単位
スタイルシートのメリット
スタイルシートの注意点
ブラウザのバグや実装の違い
アクセシビリティ

スタイルシートとは？

スタイルシートとは、WEBページ上の「見栄え」を定義するための新しい技術です。「HTML は本来文書の意味だけを定義するべきで、文書の見栄えは定義するべきではない。見栄えは HTML ではなく、スタイルシートで記述しよう」というのが開発の理由です。

HTML の標準化を進める W3C が 1996年12月に CSS1（Cascading Style Sheets, Level 1）を勧告し、IE（Internet Explorer）3.0 と Netscape Communicator 4.0 がこれの一部機能を（中途半端に）サポートしました。また、両者はこのスタイルシートとJavaScriptなどを組み合わせ、ダイナミックHTMLという技術にまとめ、公開しています。

ここでは、W3C 勧告の CSS1 や CSS2、IE4.0 独自仕様の「フィルタ」などをあわせて説明していきます。詳細の仕様に関しては下記のサイトなどを参照してください。

CSS1の仕様書（W3C勧告）: http://www.w3.org/pub//TR/REC-CSS1
CSS2の仕様書（W3C勧告）: http://www.w3.org/pub//TR/REC-CSS2
CSS1仕様書の日本語訳（どら猫本舗）: http://www.doraneko.org/webauth/css1/
Positioning（W3Cワーキングドラフト）: http://www.w3.org/pub//TR/WD-positioning
Super Style Sheets Reference（ZSPCさん）: http://www.zspc.com/

スタイルシートの基礎

最も簡単なスタイルシートは次のように指定します。<span> はインライン要素（前後で改行されない）、<div> はブロック要素（前後で改行される）を囲む一般的なタグとして使用されます。

<span style="color:red;">あいうえお</span>
<div style="color:red;">あいうえお</div>

<span> や <div> に限らず、<h1> や <p> など、ほとんどのタグでも style 属性を指定できます。

<p style="color:red;">あいうえお</p>

すべての <h1> タグにスタイルを指定するのは面倒なので、これをまとめて行うことができます。次の例は、すべての <h1> タグに style="color:red;" を指定したことになります。

<html>
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
H1 { color: red; }
-->
</style>
</head>
<body>
<h1>あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>

スタイルシートに対応していないブラウザのために  でコメントアウトしておきましょう。JavaScript とは異なり、--> の前に // を記述してはなりません。

タグと要素とセレクタ

H1 { color:red; } を「H1タグにスタイルを指定する」と呼ぶと、「用語の使い方が間違っとる!!」と怒る人がいるので注意しましょう。（私も怒られました。）上記の例で、それぞれの部分の呼び名は次のようになります。

H1 { ... } の H1 を H1要素のセレクタ（selector）
color:red を宣言（declaration）
color を属性（property）
red を値（value）
<h1> をH1要素の開始タグ
</h1> をH1要素の終了タグ

要素（element）については、下の図のそれぞれの枠が要素だと思ってください。body 要素は開始タグも終了タグも（実は）省略可能なのですが、たとえタグが省略されていても、<h1>～</h1> や <p>～</p> は body 要素の一部であることに変わりありません。

<html>

<head>

</head>

<body>

</body>

</html>

グルーピング

カンマ（,）を用いて、H1要素、H2要素の属性を一度に指定することができます。

H1, H2 { color:red; }

また、セミコロン（;）で区切って、H1要素に対して複数の属性値を一度に指定することもできます。最後の属性値のセミコロンは省略することができます。改行は行っても行わなくてもかまいません。

H1 {
    color: red;
    background: yellow
}

継承

ある要素が、別の要素に含まれる時、その属性が継承されることがあります。例えば、H1 { color:red; } と定義されている時、H1要素の color:red の属性がEM要素にも継承されて、「いいい」の部分も赤くなります。

<h1>あああ<em>いいい</em>ううう</h1>

クラス

各タグ名に応じたクラスを定義することもできます。次の例は<p>タグでredクラスやgreenクラスを使用することを可能にします。

<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
P.red   { color: red; }
P.green { color: green; }
-->
</style>
</head>
<body>
<p class=red>これはredクラスです。</p>
<p class=green>これはgreenクラスです。</p>
</body>
</html>

タグ名に依存しないクラス名を指定することもできます。

.red { color: red; }

<h1 class=red>これはredクラスです。</h1>
<p class=red>これもredクラスです。</p>

IE5.0 以降では、複数のクラスを重複して指定することができます。

.red { color: red; }
.bold { font-weight: bold; }

<span class="red bold">赤い太字</span>

定義済みクラス

A要素にはいくつかの定義済みクラスを指定することができます。定義済みクラスはピリオド（ . ）ではなくコロン（ : ）で指定します。link, visited, active はそれぞれ、通常のリンク、読み込み済みのリンク、クリックされた瞬間のリンクの状態を示します。

A:link { color: green; }
A:visited { color: blue; }
A:active { color: red; }

hover は CSS2 でサポートされたもので、マウスをその上に乗せた時のスタイルを指定します。IE4.0 や Netscape 6.0 でサポートされました。

A:hover { color: red; }     /* IE4.0/N6.0～ */

その他にも次の定義済みクラスがあります。first-line は最初の1行を、first-letter は最初の1文字を示しますが、ブラウザのサポート状況はいろいろのようです。

P:first-line { color: red; }    /* 最初の1行 */
P:first-letter { color: red; }  /* 最初の1文字 */
P:first-child { color: red; }   /* 最初の1要素 */

ID属性

クラスの代わりに ID を指定することもできます。クラスはスタイルの集合につける名前で、複数のタグに同じクラス名を指定することが可能ですが、ID はそれぞれの要素につける名前で、ひとつのドキュメント中に、複数の要素が同じ ID を持つことは許されません。

#elm123 { color:red; }
H1#elm124 { color:green; }

<span ID=elm123>あいうえお</span>
<h1 ID=elm124>かきくけこ</h1>

IDは一意なので H1#elm124 の H1 を記述するケースはあまりありませんが、ひとつのスタイルシートを複数のファイルから参照することも考慮してか、クラス定義とのバランスをとってか、仕様上は記述できるようになっています。

状況依存セレクタ

<h1>～</h1> の中で使用される場合のみの、<em> 要素のスタイルを指定することができます。上記のグルーピングとは違ってカンマ（ , ）が無いことに注意してください。

H1 EM { color:red; }

<h1>あああ<em>いいい</em>ううう</h1>

次の例は、第1レベルの <li> は青色で、第2レベルの <li> は緑色で表示するようになります。IE3.0 では正常に動作しますが、Netscape 4.0 では文頭の黒丸（・）しか色が変化しませんでした。残念。

UL LI { color:blue; }
UL UL LI { color:green; }

> を用いると、H1要素直下の EM要素のみに適用されます。Netscape 6.0 でサポートされています。

H1 > EM { color: red; }

/* と */ の間はコメントとして無視されます。

H1 { color:red; }    /* Red Color */

優先順位

重複定義の優先順位をつけるために、important 属性も定義されていますが、IE3.0, Netscape 4.0 共に未サポートのようです。

H1 { color:red ! important }

スタイルシートを外部ファイルで定義する

スタイルシートの定義部を他のファイルから読み込む事ができます。こうすることにより、複数の文書でスタイルシートを共有することができます。

<html>
<head>
<title>Style Sheet Test</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>

読み込むファイルには、スタイルシートの部分のみを記述します。<style></style>は記述しません。

H1 { color:red; }

別のフォルダにあるスタイルシートファイルを読み込むときは注意が必要です。スタイルシートファイルから参照する背景画像などのファイルのパスが、IE ではスタイルシートファイルのフォルダを起点とするのに対し、Netscape 4.* では HTML ドキュメントのフォルダを起点としてしまうようです。

<style type="text/css">
@import url(http://abc.xyz.com/xxx.css);
</style>

CSS2 では次のような構文もサポートされています。

<style type="text/css">
@import "http://abc.xyz.com/xxx.css";
</style>

長さの単位

HTML の height=100 や width=100 は単位を書きませんが、CSS では単位は必須です。長さの定義として以下のものがあります。

10em ... 文字mの横幅（CSSの定義ではフォントの高さ）
10ex ... 文字xの高さ
10px ... 10ピクセル

10in ... 10インチ（1in=2.54cm）
10cm ... 10センチメートル（1cm=10mm）
10mm ... 10ミリメートル（10mm=1cm）
10pt ... 10ポイント（1pt=1/72in）
10pc ... 10パイカ（1pc=12pt）

em、ex、px は相対的な長さ、in、cm、mm、pt、pc は絶対的な長さとして定義されていますが、ブラウザの実装状況は様々のようです。下記の図で、○は絶対的（フォントサイズを変更しても大きさが変わらない）、×は相対的（フォントサイズに合わせて大きさが変わる）な長さとして実装されています。

	em	ex	px	in	cm	mm	pt	pc
IE6.0(Win)	×	×	○	○	○	○	○	○
Netscape 4.0(Win)	×	×	○	×	×	×	×	×
Netscape 6.0(Win)	×	×	×	×	×	×	×	×
Opera 6.0(Win)	○	○	○	○	○	○	○	○

スタイルシートのメリット

スタイルシートを使用することのメリットには次のようなものがあります。

◆ 見栄えを一度に指定できる

すべての H1要素に <font color=red>～</font> を指定してまわるよりも、スタイルシートで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。

◆ 見栄えを一度に変更できる

見栄えを外部ファイルに定義しておけば、それちょっと変更するだけで見栄えを一度に変更することができます。春には春のスタイルを、秋には秋のスタイルを適用してやることもできます。この時、class=red のようなクラス名だと、.red { color:blue; } などと変更した時に妙な気分になるので、class=pastoral のような、見栄えに影響しない名前をつけておくとよいそうです。

◆ 自分の好きな見栄えに変更できる

IEでは、[インターネットオプション] → [ユーザ補助] → [ユーザースタイルシート] で、人のページに自分の好きなスタイルシートファイルを適用することができます。黒地に白文字が好きな人や、大きな字で読みたい人も、自分の好みのスタイルを適用することができます。

◆ 見栄えと意味を分離できる

Webページを自動収集して情報データベースを作成したり、目の見えない人が音声ブラウザでWebページを読む場合など、見栄えがあまり重要視されないケースもあります。見栄えを別のページで記述することにより、不要な見栄え情報を読み込んでくる煩わしさを解消することができます。

スタイルシートの注意点

上記のように、使いこなすと便利なスタイルシートですが、いろいろ問題もあります。

◆ 未対応のブラウザもある

今でもまだ、スタイルシートに対応していないブラウザが残っています。また、いろいろな理由からスタイルシート機能をオフにしている人も居ます。意味だけでなく、見栄えも大切にするページであれば、古いブラウザへの配慮も必要です。

◆ ブラウザによって動作が異なる

IE と Netscape で動作が異なります。同じブラウザでもバージョンやWindows版とMacintosh版でも動作や見栄えが異なります。

◆ ひどい実装のブラウザが多い

IE4.0やIE5.0で確認しながら、スタイルシートを駆使したページを IE3.0 や Netscape 4.0 で見ると、大半の人が愕然とするでしょう。IE3.0 や Netscape 4.0 にはスタイルシートに関する大量のバグがあるので、ひどい時は文章と文章が重なってしまって、読むことすらできなくなります。

◆ 保存すると見栄えが・・・

ページを自分のハードディスクに保存して、後から見る人も多いと思いますが、スタイルシートの外部ファイルの保存を忘れてしまうと、せっかくの見栄えが台無し（読みづらいページ）になってしまうことがあります。

ブラウザのバグや実装の違い

私が知っているだけでも、現状のブラウザには、以下のような問題があるようです。

◆ Netscape ではBODY属性がテーブルに継承されない

BODY { color: red }と指定した場合、IEでは期待通り同様の動作をしますが、Netscape ではテーブルの中身の文字が変化しません。BODY, TH, TD { color: red }と指定するようにしましょう。

◆ 間隔の差異

p { margin-left:30; margin-right:30 }なんてのはよく使用するパターンだと思いますが、これを用いたページをIE3.0で表示すると、妙に上下の間隔がいびつ（<h4>のタイトルが前の段落側に寄ってしまう）なページになってしまいました。

◆ 単位の差異

フォントサイズの指定も、Netscape と IE で異なります。Netscape では px 以外はすべて、ブラウザで指定したフォントサイズに依存するのに対して、IEではすべてのフォントがブラウザのフォントサイズに依存しません。IEで正常に見えるフォントが、Netscape では小さすぎて読めなかったりします。

◆ <ul>や<ol>のmargin-left

<ul>や<ol>のインデントを無くそうとして margin-left:0 とした場合、両ブラウザの解釈が異なります。IEは左に寄りすぎ、Netscape 4.* は右に寄りすぎ（マイナスの値を指定しないと左に寄らない）。N6.0からは改善されているようです。

◆ line-heightもひどい

line-heightを用いて行間隔をあけると、文章を読みやすくなりますが、line-height指定と<table>の混在するページをIE3.0で表示すると、ページのレイアウトが無茶苦茶に崩れてしまいました。

◆ フィルタ（filter:）はまだまだ推奨できない

IE4.0でサポートされたフィルタは大変魅力的なスタイルですが、フィルタを使用したページを表示するには非常に多くのメモリとCPUを消費します。表示が遅いだけならまだしも、スクロールするのでさえ重いです。ちょっと古いCPUのマシンだと、フィルタを使用したページには耐えれないようです。また、Netscape 4.0 でフィルタを利用したページを表示すると、単にフィルタを無視するかと思えば、ページ全体のレイアウトが無茶苦茶に崩れてしまいました。

◆ Netscape 4.0 でレイヤ中でstyleを使用できない

Netscape 4.0 で <layer> または <ilayer> で囲まれたタグに style属性を指定すると、それ以降のスタイルシートが無効化されるというバグがあります。style属性ではなく、class属性で指定すると回避できるようです。（2000.1.9追記）

他にもまだまだ、いろいろなバグがあります。特にNetscape 4.*での実装はひどいので、Netscapeでも正常に表示されることをちゃんと確認しましょう。確認を怠ると、Netscapeではうまく表示できていることのほうが少ないくらいです。

とにかく・・・まだまだ現時点では、スタイルシートを使用するのは、それなりのリスクを負うことを覚悟する必要がありそうです。

アクセシビリティ

W3Cがスタイルシートを開発した理由の一つに、アクセシビリティというものがあります。目の見えない人にも正確に意味を伝える、視力の弱い人が特大のフォントで読むことを可能にする、マウスの使えない人にもキーボードでの操作を可能にする、などなど。

スタイルシートのメリットや、このアクセシビリティの思想に感動して、「これからは全員スタイルシートだっ!」とばかり、スタイルシートを使用することを人におしつけてしまう人をたまに見ます。「スタイルシートを使うと、Netscapeでまともに見れないから・・・」というと、「W3Cの標準なんだから従うべきだ。Netscapeなんか使っている方が悪い。」とまで言う人もいるようです。

しかし、UNIX端末しかなくてNetscapeしか使えない人も居ます。意味よりも見栄えが大事な場合もあります。「目に優しい」を考慮しなくてはならない場合もあります。標準に従うことよりも、できるだけ多くのブラウザに対応することが大事な場合もあります。

W3Cの仕様書に定義されているから・・・ではなく、それぞれ一人一人が、自分の考えで、スタイルシートを使う、使わないを考え、自分のホームページを作成して欲しいと思います。（・・・ってなことを書くと、また怒られそうだな^^;）

<< PAGE TOP >>

ホームページ作成サポート

ホームページ制作のことなら、格安で成功するSEO対策に強い京都のホームページ作成リュウムへ

無料お見積はこちらから

TEL : 075-257-4588
京都市中京区橋弁慶町222番地ヒライビル3階