いきなり「スタイルシートを使いましょう！」では何をして良いのかわからない・・・、そんな方々へ送る「初心者向け講座」です。 ここで何をしていけば良いのか、感覚だけでも掴んでスタイルシートをマスターしましょう！
スタイルシート（以下CSS）を使うには、HTMLと組み合わせる必要があります。 HTMLを知らなければ話にならないので、まずHTMLを勉強してきましょう。 ちなみにCSSよりもHTML方が難しいので、HTMLをある程度理解している方はCSSなど直ぐに理解が出来ます。 「ある程度」とは、各主要要素（世間ではタグと呼ばれているもの）が何を意味しているのか、これくらいを知っていることを指します。
ある程度しかHTMLを知らない方向けに少々説明を。 HTMLとは、決められたDTD（文書型定義）に従ってタグを記述していくものです。 開始タグと終了タグ（一部省略できるものもある）の間を要素と呼びます。 これらの要素で、「ここは表題(H1,H2・・・要素)」 「ここは段落(P要素)」 「ここは強調(EM要素) 「ここはリスト項目(LI要素)などと定義していきます。 それらを組み合わせて１つの文書（ページ）を作り上げていくもので、決して「ここのフォントを大きく」「ここは斜体で」 などを定義するものではありません。 よく見る一例として、ブロックごと字下げしたいがあまりにBLOCKQUOTE要素を使っているページを見かけます。 この要素は、「引用」を意味するもので、ブラウザは引用を表現するのに字下げすることでその意味を表現しようとしました。 しかし、字下げのためにBLOCKQUOTE要素を用いるのは本末転倒な話です。 BLOCKQUOTE要素の表現には字下げだけでなく、斜体表示にしてもいいでしょうし、太字にしてもいいでしょう。 こんなことはユーザーが決めれば済むことです。
少しはHTMLの考え方、CSSの必要性がわかりましたか？ どの要素を、どの部分をどうやって表現していくか、これがCSSに課せられた仕事です。 つまり、見栄えを大幅に向上することもできますし、自分の趣味合った表現が自由に出来ます。 これらの点がCSSの魅力です。
ただし、残念なことに日本語用のブラウザでは、CSSに完全に対応したものは皆無と言っていいほどで、ある程度の制約を受けます。 （1999.5時点ではIE5がほぼ完璧、IE4が実用レベル、NN4が我慢すれば使えるレベル） しかし、これらの制約を知った上で、HTML4.0 Transitionalの力を少しだけ借りながら対応すれば、何とかなります。
将来間違いなく普及するCSSを今から使ってマスターしていくのは、決して早すぎません。 将来に備えて、徐々にWebに取り込んでいくことをお奨めします。 ただし、CSSは画像の替わりになるものではないので、その辺はあまり大きな期待をせずに、用途に合わせてうまく使い分けをしていくようにしましょう。
いきなり「CSSを使いましょう！」では何をしていいのかわからない、そういう方はここを読んで下さい。 HTMLにCSSを組み込む方法は４つあります。詳細は、リファンレス中の「HTMLへの組み込み」を読んでいただくとして、ここではまずマスターした方が良い方法と、そのメリットなどについて触れてみます。
必ず覚えるべき方法は２つです。
LINK要素は外部のファイルを読み込むものです。外部ファイルとは、その要素を定義しているHTMLファイルとは別に存在するファイルを指します。 CSSファイルであったり、JavaScriptファイルであったり、その汎用性はかなり広いものです。 ちなみにCSSの場合、スタイルの定義部分だけを別のテキストファイルで記述し、そのファイル名の拡張子を「.css」とすることで作成可能です。 HTMLファイル作成と全く同じで、「メモ帳」などのテキストエディタで簡単に作れます。
例えば、「toppage.css」というCSSファイルを「index.html」というHTMLファイルに使いたい場合は下の例のようにします。
「toppage.css」の内容
BODY{ /*BODY要素のスタイル指定*/
font-size : 12pt;
line-height : 1.3em;
margin : 0em 2em;
padding : 1em;
}
H1{ /*H1要素のスタイル指定*/
font-size : 3em;
font-weight : 900;
color : red;
}
P{ /*P要素のスタイル指定*/
font-size : 1.2em;
text-indent : 2em;
}
「index.html」の内容（ただし両ファイルは同一パスに存在したと仮定する） <HTML> <HEAD> <META Http-Equiv="Content-Style-Type" Content="text/css"> <LINK Type="text/css" Rel="stylesheet" Href="./toppage.css"> <TITLE>トップページ</TITLE> </HEAD> <BODY> <H1>タイトル</H1> <P>ここには本文を書く</P> </BODY> </HTML>
上の例のように「META要素でCSSを使いますよ」とういう宣言をし、「CSSファイルはどこどこにありますよ」と教えてあげ、 後はいつも通りにHTMLを記述して行くだけです。当然、CSSファイルはHTMLファイルからの相対パスで指定するか、絶対パスで指定します。 CSSファイルには、CSS仕様に従った記述のみをしてあげるだけです。 またLINK要素を複数定義することで、複数のCSSファイルも読み込めます。
外部ファイルを使用することで、複数のHTMLファイルから同じCSSファイルを読み込むので、このページにアクセスしてくる訪問者はキャッシュを使って、 CSSファイルの読込時間が必要なくなり、アクセス向上に繋がります。また、複数のHTMLファイルで同一のスタイルを用いることで、 スタイル変更時に１つのCSSファイルを修正するだけで済むので、メンテナンスも非常に楽です。
HTMLファイルに直接CSSを埋め込みます。 STYLE要素はスタイルシートを書くためのHTMLのタグであり、このSTYLE要素中にCSSを直接書きます。
<HTML>
<HEAD>
<META Http-Equiv="Content-Style-Type" Content="text/css">
<STYLE Type="text/css">
<!--
BODY{ /*BODY要素のスタイル指定*/
font-size : 12pt;
line-height : 1.3em;
margin : 0em 2em;
padding : 1em;
}
H1{ /*H1要素のスタイル指定*/
font-size : 3em;
font-weight : 900;
color : red;
}
P{ /*P要素のスタイル指定*/
font-size : 1.2em;
text-indent : 2em;
}
-->
</STYLE>
<TITLE>トップページ</TITLE>
</HEAD>
<BODY>
<H1>タイトル</H1>
<P>ここには本文を書く</P>
</BODY>
</HTML>
直接書き込むことで、そのHTMLファイルに対するCSSの記述が直感的に分かり易くなります。 が、それ以上のメリットは少なく、個人的には前者のLINK要素による外部ファイルの読込をお奨めします。（一般的にそうなのですが）
実際にCSSを記述する方法は至って簡単です。 詳細の説明は「定義方法」に記した内容及び、それに関連する箇所を理解して下さい。 ここでは、CSSを使い始める第１歩として簡単に説明します。
例えば、文書全体のフォントサイズを12pt（ポイント）にする場合は以下のようにします。
BODY{ font-size : 12pt } /*文書全体のフォントサイズを12ptに指定*/
上の例では、「BODY 」（表示される文書全体はBODY要素に含まれる）のフォントサイズ「font-size」を「12pt」、 という流れで指定しています。つまり、要素名 { プロパティ : 値 } です。 それぞれの指定する単語（BODYやfont-size）は大文字小文字関係ありません。 また、それぞれの単語の間に半角のスペースやタブが入っても問題ありません。 「/*」「*/」に囲まれる部分はコメントとしてスタイル指定としては無視されますので、自分の管理のし易さに合わせて適当に挿入しておく方が良いです。
１つの要素に１つのプロパティだけでなく、複数のプロパティや複数の要素を指定することが可能です。 それらの例を下に示します。（複数の要素に対して宣言することを「グループ化」と呼びます）
P,H1{ /*P,H1要素に以下のプロパティを宣言*/
font-size : 12pt; /*フォントサイズを12ptにし、「;」で次の宣言に繋げる*/
color : red /*テキストカラーを赤*/
}
基本的にこれだけ知っていれば、あとは各種プロパティを覚えるだけです。 それだけで、とりあえずCSSを使うことが出来ます。