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

カスタム検索

サイトマップ

トップページ

CSS

CSS入門

スタイル指定の記述法

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

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

h2 { color: red }

各部分の名称

各部分の名称は次のようになっています。

セレクタ		プロパティ		値
h2	{	color	:	red	}

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

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

プロパティ

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

値

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

スタイルの複数指定

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

ex.css


h2 {
    color: red;
    background: yellow;
}
p {
    color: blue;
}

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

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

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

ex2.css


h2 {
    color: red;
    background: yellow;
}
/*  コメント  */
p {
    color: blue;
}

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

ex.html


<html>
    <head>
        <style>
            <!--
            /*  コメント  */
            h2 { color: blue; background: yellow }
            p { color: red }
            -->
        </style>
        <title>タイトル</title>
    </head>
    <body>
        本文
    </body>
</html>

尚、コメントはネストできません。

まとめ

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

CSSファイルの作成

ページの先頭

色の指定方法

2010 Webデザインレッスンプライバシーポリシーサイト管理者に連絡