CSSファイルを使用した際のスタイル指定の記述法

CSSファイルを作成して、スタイルを指定する際の記述法を詳しく見ていきましょう。前ページの例から分かるように、スタイルの指定方法はとてもシンプルです。

例えば、<h2>要素の前景色（文字色）を指定するには、次のように記述します。

各部分の名称

セレクタ（タグセレクタ）

セレクタ（タグセレクタ）は、タグの「<」と「>」を除いて記述します。HTMLファイルのどの要素にスタイルを適用するのかを指定します。このセレクタの後に「{」と「}」でプロパティとその値のセットを囲みます。

プロパティ

プロパティは、どのようなスタイルを適用させるのか（前景色なのか、背景色なのか等）を記述します。

値

プロパティの値を、プロパティの後に「:」で区切って記述します。前景色であれば、青なのか、赤なのか等を指定します。

スタイルの複数指定

スタイルを複数指定するには、「;」で区切ります。複数指定するための区切りとして、「;」を使用しますが、指定するスタイルが多くなってくると、記述するのを忘れがちになるので、スタイルの指定が1つだけのときでも、「;」を記述することをお勧めします。



h2 {


    color: red;


    background: yellow;


}


p {


    color: blue;


}

区切りとしての「;」というよりも、1つのスタイル定義の終わりとして「;」を使用すると覚えておいた方が良いかもしれません。

また、上の例では、適度に改行やスペースを入れていますが、このような改行やスペースは、あってもなくても構いません。しかし、読みやすいように、1つのスタイル定義が終わったら、改行することをお勧めします。その方が編集も楽です。

CSSファイルでも、HTML同様、コメントを使用することができます。HTMLの「」とは違い、「/*」と「*/」で囲みます。（C言語等と同じです）



h2 {


    color: red;


    background: yellow;


}


/*  コメント  */


p {


    color: blue;


}

このコメントは、ページにCSSを適用させる<style>タグの中でも使用されます。既にHTMLのコメントが使用されているので「/*」と「*/」を使用します。



<html>


    <head>


        <style>


            <!--


            /*  コメント  */


            h2 { color: blue; background: yellow }


            p { color: red }


            -->


        </style>


        <title>タイトル</title>


    </head>


    <body>


    </body>


</html>

セレクタでスタイルを適用したい要素を指定
プロパティでどんなスタイルを適用するのかを指定
プロパティの値に具体的な値（色など）を指定
CSSのコメントには「/*」と「*/」を使用