point　スタイルシート スタイルシートの書き方

■ 最も基本的な書き方

セレクタ｛ プロパティ ： 値 ； ｝

スタイルシートの最も基本的な書き方は、このようになります。 セレクタを書いて｛　｝の中にプロパティと値を記述します。 プロパティと値の間には、：　(コロン）を記入します。

まずは、セレクタから説明しますね。このセレクタにはスタイルを設定したい対象を記入します。タグ名やclass名（class名については後述します）などを指定します。

次にプロパティですが、ここにスタイルシートを使って何をするか(命令）を記入します。そして値でプロパティで指定されたスタイルの具体的な効果を指定します。

この前のページではh2タグの文字色を緑色にしましたが、これを例にするとh2{color:green;} のようになります。

つまり、セレクタでどこの（h2タグの）、プロパティで何を（文字の色を）、値でどうする(緑色にする)というように記述するのが、最も基本的なスタイルシートの書き方となります。

サンプル - Microsoft Internet Explorer

見出しの色を緑にしました

段落の文字の大きさを16pxにしました。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
h2 { color:green;    }
p  { font-size:16px; }
-->
</style>
</head>
<body>
<h2>見出しの色を緑にしました</h2>
<p>段落の文字の大きさを16pxにしました。</p>
</body>
</html>

■ 複数のセレクタに同じスタイルを設定する

セレクタ , セレクタ｛ プロパティ ： 値 ； ｝

同じスタイルを複数のセレクタに適応させたい場合は、セレクタ間を , (コンマ)で区切ってセレクタを複数記入していきます。

例えば、レベル2の見出し(h2)と段落(p)の文字色を緑色にする場合は、h2,p { color:green ; }というように記入します。

サンプル - Microsoft Internet Explorer

見出しの色を緑色にしました

段落の文字色も、緑色になっています。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
h2,p { color:green;   }
-->
</style>
</head>
<body>
<h2>見出しの色を緑色にしました</h2>
<p>段落の文字色も、緑色になっています。</p>
</body>
</html>
　

■ セレクタに、複数のスタイルを設定する

セレクタ｛ プロパティ ： 値 ； プロパティ ： 値 ； ｝

セレクタに複数のスタイルを設定するには、宣言部（プロパティ：値）を；(セミコロン)で区切ります。

例えば、段落（p)の文字の大きさを16pxに、文字色を緑色にするには、
p { font-size:16px; color:green ; }というように記入します。
この例では、２つのスタイルを設定しましたが、何個でも設定することが出来ます。

サンプル - Microsoft Internet Explorer

見出しの色を緑色にしました

段落の文字色をオレンジ色に、文字の大きさを16pxにしました。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
h2{ color:green;   }
p { color:orange;font-size:16px;}
-->
</style>
</head>
<body>
<h2>見出しの色を緑色にしました</h2>
<p>段落の文字色をオレンジ色に、
文字の大きさを16pxにしました。</p>
</body>
</html>
　

■ 特定の場合だけにスタイルを設定する

セレクタＡ セレクタB｛ プロパティ ： 値 ； ｝

セレクタを半角のスペースで区切って記入することで、特定の場合だけにスタイルを指定することも出来ます。

左側のセレクタAの範囲内にあるセレクタBにのみにスタイルが適用されます。

例えば、段落の中の強調（em)は文字色を赤にしたい場合、p em　{color:red ; }のように記入します。

サンプル - Microsoft Internet Explorer
段落の外のstrongです。

段落内のstrongは、赤色になります。

HTML&CSS
<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
p strong { color:red;   }
-->
</style>
</head>
<body>
<strong>段落の外のstrongです。</strong>
<p>段落内の<strong>strong</strong>は、赤色になります。</p>
</body>
</html>
　

■スポンサード・リンク