Cascading Style Sheetsを使う

文字の色を変えたい、といった場合によくあるリファレンスなどでは<font color="red">色を変えたい文字列</font>と教えていることが多々ありますが、これはHTML4.01では非推奨ということになっていて、このような見栄えを変えたいときにはCSS(Cascading Style Sheets)を使用することになっています。

CSSは外部ファイルとして参照するか、HTML文書に直接記述することもできますが、記述の仕方は大して変わりません。例としてh1要素に対してスタイルを適用してみましょう。

外部ファイルとして参照する場合

h1 {color:#0000ff;}とエディタで書いて、今回はファイル名を「style.css」としてHTML文書と同じフォルダに保存したとします。あとはHTML文書のhead要素内に

<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="./style.css">

先にスタイルシートのタイプを指定し、その後でCSSの場所を示しているだけです。これだけでこのHTML文書にあるh1要素の文字色は青に変わります。

HTML文書内に直接記述

この場合は先程外部ファイルに書いたものをhead要素内に書くだけですが、ちょっと違うところがあるので注意してください。

<style type="text/css">
<!--
h1 {color:#0000ff}
-->
</style>

また、書き方として、h1 {color:#0000ff}と書いてあるものを

h1 {
color:#0000ff
}

このように書いても同じ意味ですので、1行にまとめるのが嫌ならこうしてください。

h1 {
color:#0000ff;
font-weight:bold;
}

宣言がひとつ終わるたびにセミコロンを付けます。（一番最後の宣言のセミコロンは任意）

CSSの宣言の仕方

先程までのh1要素に対するスタイルをまた例としてあげますが、h1のようにスタイルを適用したい対象をセレクタ、適用したいスタイルを記述している部分を宣言と呼び、書き方は、セレクタ {宣言}となるように書きます。

また、セレクタには様々な指定の方法があり、適用範囲も変わってきます。

*（全ての要素）

例：* {color:red}

要素A（指定した要素全て）

例：p {color:red}

要素A 要素B（要素Aの子孫となる要素B全て）

例：div em {color:red}

要素A > 要素B（要素Aの子となる要素B全て）

例：p > em {color:red}

要素A + 要素B（要素Aが直前にある要素B）

例：p + em {color:red}

要素A[Name]（要素Aの属性Name）

例：li[type] {color:red}

要素A.ClassName（要素AでClassNameが指定された場合）

例：em.warning {color:red}

.ClassName（ClassNameが指定された要素）

例：.warning {color:red}

クラスセレクタを使用するときは<em class="warning">のように指定する必要があります。とりあえずこれだけ覚えれば基本的なことはできるはずです。

各スタイルについては、少しですが各種スタイルにあります。