スタイルシート


 私もよくわかんないけどとにかくスタイルシート講座です。(笑) 私もいま勉強中ですがこのページを同時進行で作ってます。だから多分間違いも多いと思いますが笑って赦してください(^−^; 
 さて。いったいスタイルシートとはなんでしょうか? ずばり読んでそのまま。スタイル・レイアウトに関する記述の仕方です。CSS言語というものを用いて記述します。ちなみに、HTMLをマスターされてない方はちょっと無理です。引き返し@から読んでマスターしてからまたきてください。(^−^;
 スタイルシートでは文字の色の設定や行間隔、文字間隔、フォントの設定などを行うことができます。HTML文書でもフォント設定や文字の色なんて変えられるじゃーんと思う方がいるかもしれませんが、ところがどっこい。(笑) ちょっと違うんです。


スタイルシートの特性

 たとえば。ホームページを作る際に小見出しの文字の大きさ、色、書体を揃えたいという場合。確かにHTMLのタグを使用しても可能です。が。そうすると小見出しを作る度に

<FONT SIZE="" COLOR="><FONT FACE="">小見出し
</FONT></FONT>

 なんていう記述をしなければなりません。これが結構面倒クサイです。そこでCSS、スタイルシートを使います。いわゆる定義づけみたいなことをしてこのタグを何度も書く手間を省こうというのです。(そんなんマウスの右クリックでコピーしちゃえばいいじゃん、とかいう突っ込みは受け付けません)←でもこれも結構面倒ですよね?(^^;
 例えば<H1>(小見出しの最大サイズのタグ)に設定をします。
 これから<H1>タグを使う際、「H1の文字色は常に赤で」というときは以下の様に記述します。

H1{color:red}

 これで<H1>は「文字色:赤」という定義付けがなされました。定義付けというより条件付けかな? それとも注文? まあいいや。(笑)
 ちなみに、上の黒字の部分のH1はセレクタ、colorはプロパティ、redはプロパティ値といいます。だから常に基本はセレクタ{プロパティ:プロパティ値}という書き方をします。
 さらに。「H1を記述するときには常に文字色は赤、サイズは30pt、書体は明朝」としたい場合はこんな感じになります。

H1{
color:red;
font-size:30pt;
font-family:serif;
}

 ひとつの設定をしたら必ずセミコロン(;)で区切ります。なんでこんな風に改行するのかは……わかりません。(笑) 本にそうやって書いてあったもんですから。きっと見やすくするためではなかろーかと。(^−^;
 とまあ、こんな感じのものがスタイルシートです。



どうやって使うの?

 HTMLと同じくメモ帳(エディタ)に記述します。ただしHTMLとごっちゃまぜにして一緒に書くのではなく、スタイルシートはそれらだけで別に保存をします。保存する際は拡張子を「css」とします。 例えば「style.css」といった感じです。こうして保存したものをHTMLに適用させるには以下のようにHTML文書内で記述をします。

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

 これを<HEAD>と</HEAD>の間で記述します。href=""の"と"の間にはそのスタイルシートの保存先URLを記述して下さい。



コメントの書き方

 スタイルシートを書くときにちょっとメモをしておきたい、ということがあったなら/*と*/でコメントを挟むと、CSS言語として処理はされずその間のコメントは無視されます。HTML文書でいうときの