16.4.1 CSSの簡単な例

まずはCSSの例を見てみましょう．16.2.2 HTMLファイルの準備で準備したサンプルのHTML文書のhead要素内に，次の1行を書き加えてください．

その後次のファイルをダウンロードして，HTML文書と同じディレクトリに置いてください．このとき，ファイル名はstyle.cssのままにしてください．

style.css

この作業をした後でサンプルのHTML文書を開きなおすと，見た目が変わっているはずです．これがCSSの効果です．今は色や文字の大きさなどを軽く変えただけですが，スタイルシートを操れば自由自在にデザインをコントロールできるようになります．これから頑張ってスタイルシートの使い方を勉強しましょう．

手始めに，まずダウンロードしたstyle.cssをテキストエディタ（文字化けが起こりにくい理由から，エディタはmiを推奨）で開いてみてください．CSSもHTML文書と同じく実体はテキストファイルなので，テキストエディタで編集することができます．開くと，中には

と書かれています．意味は想像がつくと思いますが，h1要素の色を赤にしたということです．これのh1,color,redの部分をそれぞれセレクタ，プロパティ，値と呼びます．例の中の

の部分については，aがセレクタ，font-styleがプロパティ，italicが値ということになります．

このように，スタイルシートでは一般に

という書き方でスタイルを記述します．皆さんがこれから覚えるべきことは，CSSの記述方法，セレクタの書き方，そしてプロパティおよびそれに対応する値の種類です．

次の章ではまず，CSSの記述方法について解説します．