CSSの記述方法

※新規ウインドウで開きます PDF印刷Eメール

CSSの記述方法

CSSの記述は以下のような形になります。

p{color:#ff0000}

  • pの部分はスタイルを適用させたい対象「セレクタ」
  • colorの部分は適用させたいスタイルの属性「プロパティ」
  • #ff0000の部分は適用させたいスタイルの「値」

をそれぞれ入力します。
プロパティと値の間は:(コロン)で区切り、スタイルの内容を{ }で囲みます。

スタイルの適用方法

CSSを記述しHTMLに適用する方法は、

  • 同一の要素全てに同じスタイルを適用する
  • 部分的にスタイルを適用する

の２種類があります。
変化例 CSSの表記 HTMLの表記

全ページの

全ての段落(p要素)を

赤色にする。

 p{color:#ff0000}

<p>全ページの</p>

<p>全ての段落(p要素)を</p>

<p>赤色にする。</p>

一部の段落だけ

赤色

にする。

 .red{color:#ff0000}

<p>一部の段落だけ</p>

<p class="red">赤色</p>

<p>にする。</p>
部分的にスタイルを適用する時は「クラス」を使います。
CSSファイル上で先頭に「.(ピリオド)」を付けた形でクラス名を決め、
HTMLファイル上のスタイルを適用したい箇所からclass="〜"でクラス名を呼び出します。
例ではp要素でスタイルを呼び出していますが、
<h2 class="red">、<strong class="red">のように他の要素でも使うことが出来ます。

スタイル適用の応用

一つのセレクタに複数のスタイルを適用したり、
複数のセレクタに同じスタイルを適用することも出来ます。
変化例 CSSの表記 HTMLの表記
段落の
文字色を白くし、
背景色を赤くする。		 p{color:#ffffff; background-color:#ff0000;}

<p>段落の<br />
文字色を白くし、<br />
背景色を赤くする。</p>
複数のスタイルを適用する時は、スタイルを「;(セミコロン)」で区切ります。
スタイルが一つだけの時や、最後に記述したスタイルには不要ですが、
記述忘れを防ぐ為に常に記述するくせをつけておきましょう。
変化例 CSSの表記 HTMLの表記
太字と
見出し６
の文字色を青くする。		 strong,h6{color:#0000ff;}

<p><strong>太字</strong>と
<h6>見出し６</h6>
の文字色を青くする。

</p>
複数のセレクタに同一のスタイルを適用する時は、セレクタを「,(カンマ)」で区切り記述します。
変化例 CSSの表記 HTMLの表記

見出し４の中の
強調文字だけ
緑色にする

 h4 em{color:#ff339966;} <h4>見出し４の中の<br />
<em>強調文字</em>だけ<br />
緑色にする</h4>
要素の中の特定の要素にだけスタイルを適用する時は、
セレクタを半角スペースで区切って記述します。