16.4.1. CSS の簡単な例

まずは CSS の例を見てみましょう。 16.2. ウェブサイトの解説で準備したサンプルの HTML 文書の head 要素内に、次の1 行を書き加えてください。

その後次のファイルをダウンロードして、 16.2. ウェブサイトの解説でやったのと同じようにして HTML 文書と同じディレクトリに置いてください。このとき、ファイル名は style.css のままにしてください。

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

手始めに、まずダウンロードした style.css をテキストエディタで開いてみてください。CSS も HTML 文書と同じく実体はテキストファイルなので、テキストエディタで編集することができます。開くと、中には

h1{ color:red }

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

a{ font-style:italic; }

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

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

セレクタ { プロパティ: 値; }

という書き方でスタイルを記述します。皆さんがこれから学ぶべきことは CSS の記述方法、セレクタの書き方、そしてプロパティおよびそれに対応する値の種類です。もちろん全部を覚えるのは大変ですから使用頻度の高い項目だけを覚え、それ以外は必要に応じて検索して調べると良いでしょう。次の章ではまず CSS の記述方法について解説します。