Last Update : 03/13/2003
StyleSheet基礎講座 :: スタイルシートって？
スタイルシートの履歴
スタイルシートは何のため？
HTML基礎講座は読んだ？ あそこに、［ちょい難しい話：HTML4とCSS］って記事があったじゃん。あれが、スタイルシート（CSS）が生まれた理由を全部言ってるんだけど、もうちょい詳しく説明しなおすぜ。
1996年12月に、HTMLなんかのインターネット上の技術の規格を決めるW3Cって組織が、CSS1（Cascading Style Sheets, Level 1）って規格を発表したのが、すべての始まりなのさ。それまでのHTMLの仕様だと、ページの見た目も構成もすべてHTMLの“要素（タグと呼ばれてるもの）”で定義してたんだ。だから、文字の色を変えるときに「<font color="red"> 文字の色を赤に </font>」なんてやってたわけ。
でも、この方法だと、ページのHTMLソースは膨れ上がって編集しにくいし、もしも文字の色を赤から緑に変えたい場合なんて、いちいち「color="red"」ってある所を全部修正しなきゃいけねーじゃん？
さすがにみんな手間のかかる更新作業にうんざりしてたんだろね（もちろん、実際にCSSが提唱されたのは、もっと高尚な理由だぜ！ 真に受けるなよー）。『HTMLは、文書の意味だけを定義するようにして、見た目の定義は新しい技術（CSS）で行おう』 ってコトになった。
実際、HTMLだけだと、見た目を調整するのはすげぇ難しい。
例えば、<font size="数字"> で文字の大きさを変える場合、使えるのは1〜7の7種類しかない。もっと細かくフォントサイズを指定したいときはどうするのか？ HTMLで、どうすれば行間を空けられる？ HTMLで、ある一部分にだけ背景画像をつけたり背景色をつけたりするには？ HTMLで余白を作るには？
この疑問のいくつかはHTMLだけでも解決できるけど、いろいろ無理をしなきゃいけねぇし、なによりも、『見出しを意味する <h> で文字の大きさを調整したり、引用文を意味する <blockquote> でインデント（字下げ）を行ったりするのは、非論理的だ！』 って突っ込まれると、反論できない。だから、あるものでなんとか遣り繰りしてる自転車操業みたいな真似は止めようぜ、と。
そういう経緯で生まれたCSSは、ページの見た目のすべてをコントロールできる。
行間を調整したり、余白の幅を調整したり、色を変えたり、枠をつけたり、一部分の背景画像を変えたりとか、ページのデザインを指定する技術がスタイルシートなんだ。
オレのサイトを、スタイルシートを全部はずしたときとつけたときの見た目の違いを見てくれよな。下になってるウィンドウは、スタイルシートを全部はずしたときのヤツ。あんなイケてないのが、スタイルシートだけでここまで化けるってすげぇだろ？
ブラウザのスタイルシートへの対応状況
まず、CSS1 というのは、HTML4って仕様とセットになって出されたんだ。だから、HTML4が登場する前のブラウザ、例えば Netscape 3 なんかは、スタイルシートに対応してない。あと、HTML4以前の仕様に従ってるブラウザ（HTML3.2 準拠の DreamPassport なんか）も、スタイルシートには対応してないぜ。
でも、今ではCSS未対応ブラウザってのはすげぇ少ないし、『文書構造とスタイルは別に』ってのをちゃんとやってれば、とりあえずはコンテンツは見れるわけだから、気にしなくてもオッケーだぞ。
『とりあえずはコンテンツが見れる』ってのは、例えば、サンプル画像で、オレのサイトから全部スタイルシートを切ると、下のウィンドウみたいに見た目は悪くなるけど、文章は読めるし、特に問題は無い。そういうこと。
問題は、スタイルシートに対応してる、Netscape 4とInternet Explorer 3以上で、この２大ブラウザが中途半端にCSS1に対応して、しかも独自の仕様をつけ始めたのが、トラブルの原因ってカンジ。特に、Netscape 4のCSS対応状況は酷くて、ちょっとスタイルシートをいろいろ使うとクラッシュすることもある。デザイナー泣かせなブラウザだ…
で、Netscape も IE も中途半端にCSS1に対応してる状況が続いてるときに、W3Cが1998年5月に CSS2（Cascading Style Sheets, Level 2）を出したから、IE5とかは、さらに中途半端にCSS2もつまみ食いし始めた。だから、どのブラウザでも安全に使えるCSS指定ってのは、すげぇ制限されてんだよ。
まあ、でも、最近は、かなり改善されたけどね。Netscape 7とOpera 7はCSS1の全部とCSS2のほとんどに対応したし、Internet Explorer 6 はW3Cの規格に従ってCSS1に対応してるし。そのうち出るIE7は、CSS2に完全対応するだろうね。
ちょっと前置きが長くなったけど、各ブラウザのCSSの対応状況とか、バグとかは、CSS のページで詳しく紹介してるから、基礎を覚えたら、ちょっとずつ勉強していこうぜ！
んじゃ、これからページにスタイルシートを使う方法を紹介していくぞ。
じゃあ、スタイルシート使ってみよう
<meta> 指定
まず、ページにスタイルシートを使うときには、下みたいに、ページヘッダに「<meta http-equiv="Content-Style-Type" content="text/css">」ってのを入れるぜ。
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title> ページのタイトル </title>
</head>
なんでこんなもん入れなきゃなんないかというと、スタイルシート言語ってのが、1種類だけじゃないからさ。だから、META要素で使うスタイルシートの言語を設定しておかないと、ブラウザによってはトラブルの原因になるかもな。
とりあえず使う - STYLE属性
<p> 普通の段落 </p>
<p style=" color : teal ; "> 文字の色を青緑にする </p>
<p style=" text-align : right ; "> 文字を右に寄せる </p>
じゃあ、ページにスタイルシートを組みこむにはどうすればいいかだけど、一番簡単な方法からはじめてみようか。
タグに STYLE属性を加えると、HTML内の特定の要素にスタイルを適用することができる。上のように、タグに「style="スタイル指定"」って入れる。いま書いたスタイルシートをブラウザで表示してみて、こんな風に見えてればオッケーだぜ。
次からは、スタイルシートの指定をもっと詳しくを紹介するぞ。