CSSの基本ルール

この記事を書いている人 - WRITER -

shoutarou123

HN：しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び（Input）、人に教えること（Output）で、共に成長し喜び合える仲間を大切に思っています。

CSSでレイアウトや装飾を行うにあたり、「セレクタ」の理解が必要になります。

セレクタの記述ルールと適用される優先順のルールなどがあります。

セレクタの概要

セレクタとは

セレクタとは、「CSSのスタイルを適用する場所（対象）を選択するための指定」です。

セレクタの基本

セレクタの基本的な組み合わせは、「セレクタ」、「プロパティ」、「値」の３つです。

表示の通り、「〇〇の△△を✖✖する」と覚えておきましょう。

例えば、

p  {  color:  #f00  }

このような記述は、「セレクタがp（要素）」、「プロパティがcolor」、「値が#f00」になります。

すなわち、「p要素の文字色を赤くする」という指定になります。

セレクタの記述

セレクタの構成

セレクタから始まる内容をまとめて「規則集合」といいます。

セレクタ以降は、「 { 」で始まり「 } 」で終わり、この部分を「宣言ブロック」と呼びます。

また、「 {  } 」で囲まれた部分を「宣言」と呼び、レイアウトや装飾の指定を記述します。

セレクタ　{  プロパティ:  値;  }

この宣言部分では、プロパティと値が必ず一対で指定し、宣言の終わりを意味する「  ;  」を記述します。

記述ルール

宣言には、半角スペースや改行、インデントなどを自由に入れられます。

しかし、適当に入れてしまうと管理上、不要な混乱を招く恐れがあるので、一般的なルールで記述しましょう。

宣言が１つの場合は、セレクタの後ろと、「  {  」、「  :  」、「  ;  」のそれぞれの後ろに半角スペースを入れます。

p  {  color:  #f00  }

宣伝を複数記述する場合は、宣言ごとに改行して記述するのが一般的な記述の仕方です。

「  {  」、「  }  」を改行することで、宣言が分かりやすくなります。

p  {

color:  #f00;

margin:  15px;

}

のように、宣言ごとに改行してインデントすることで、誰が見ても理解しやすいようにするといいです。

適用の優先

記述の適用順位

CSSでは、上の記述から読み込みます。

同じセレクタが上下にあれば、下のセレクタが適用されます。

同じセレクタを記述した場合、上に記述してある方を修正しても反映されません。

種類の適用順位

使うことの多いセレクタには、「要素セレクタ」、「IDセレクタ」、「Classセレクタ」があります。

これらのセレクタを優先順位の高い順に並べ替えると、

「IDセレクタ」、「Classセレクタ」、「要素セレクタ」

となります。

セレクタの個別性

その他にもセレクタの種類はあります。

それらの優先順位は、セレクタに点数がつけられており、セレクタの組み合わせによって点数が決まります。

上の方に記述した場合でも、優先的にスタイルを適用するための考え方です。

この優先順位を決めるルールを、セレクタの『個性性』といいます。

a　・・・style属性　　　　　b　・・・ID属性の数

c　・・・classセレクタ、属性セレクタ、疑似クラスの数

d　・・・要素名、疑似要素の数

スタイルの上書き

CSSでは、同じ名前のセレクタが複数あるときは、下に記述した指定が優先されます。

これがCSSの「上書きの特性」です。

また、同じ名前のセレクタが複数あり、それぞれのプロパティが異なる場合は、「最初のスタイル」＋「後のスタイル」となり、両方のスタイルを合わせた装飾になります。

優先順位と上書きの特性をうまくりようすると、少ないコードで効率の良いCSSを記述できるようになります。

◇まとめ◇

1. セレクタは、装飾対象となる要素を選択するために利用する
2. CSSは、下に記述されたものが優先される
3. セレクタの個別性でスタイルの優先順位が決まる