スタイルシート
たとえば。ホームページを作る際に小見出しの文字の大きさ、色、書体を揃えたいという場合。確かに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文書でいうときの