CSSの基礎知識

CSS(スタイルシート)とは、htmlに対して、デザインやレイアウト指定していくものです。

CSSの書き方

CSSファイルでは、htmlとは全く違った記述の仕方になります。

.cssファイル
h2{
   font-size:12px;
}

CSSはこのような形式で書いていきます。

セレクタの書き方

上の例では、全てのh2見出しにスタイルを適用していますが、特定のh2だけにスタイルを適用したい場合などには、IDやClassをつけます。

ID名やClass名は、半角英数字で任意に名付けます。

classやIDで指定するとき、CSSでは要素名を省略しても記述しても構いません。
(つまり上の場合、「p.red{~}」のpを省略し、「.red{~}」でも問題ありません)

IDとClassってどう違うの?

IDとClassは、使い分けが曖昧で、どちらを使っても良い場合が多いですが、主に以下のような使われ方をします。

<要素 id="ID名">
#ID名{~}
ID・・・1ページに1度しか登場しない固有の要素に使用。
(例:ヘッダーのようなレイアウト用のボックスなどに使用)
<要素 class="Class名">
.Class名{~}
Class・・・1ページで何度使ってもよい。
(例:ある要素だけデザインを変えたいときなどに使用)

正直なところ、CSSでデザインやレイアウトをするだけなら、IDとClass、どこでどちらを使ってスタイルを適用していっても全く変わりありません。

しかし、後々JavaScriptを使う際などに問題となりますので、最低限、同じID名が付いた要素を1ページで何度も登場させるのはやめましょう。

実際には、レイアウトの大部分を構成する要素(ヘッダー、ナビ、レフト、ライト、コンテナ、フッターなど)にはID、それ以外は全てClass、と使い分けるとよいでしょう。

PAGE TOP