最低限知っておくべきCSSの基礎

前提

css初心者が最低限知っておくべきルールや書き方をまとめてみました。

順番によるcssの優先度（CSSファイル内）

index.css

.hoge {
  font-size: 10px;
}

.hoge {
  font-size: 20px;
}

上記のように同じクラス名に、同じプロパティに値を指定した場合、下のfont-size: 20px;が反映されます。cssファイルは上から順に呼ばれ、下に行くほど同じものがあった場合上書きされるので、優先度は下のものの方が高いのです。

順番によるcssの優先度（htmlファイル内）

index.html.erb

<div class="hoge fuga">
  hogehoge
</div>

index.css

.hoge {
  font-size: 10px;
}

.fuga {
  font-size: 20px;
}

上記のような場合、fugaクラスのfont-sizeが優先されます。htmlファイル内も上から下へ読み込まれるため、hogeクラスよりfugaクラスで定義されている内容の方が優先され、上書きされます。

全体的な優先度

cssでは、以下のような優先度があります。これらの順番を頭にいれたうえで、cssを書いていく必要があります。

<高>
・!important
・インライン記述（htmlファイル内への記述）
・IDセレクタ
・クラスセレクタ
・要素セレクタ
・ユニバーサルセレクタ
<低>

!important

cssファイル内で使用するもので優先度として一番高いものです。

index.css

.hoge {
  margin: 10px !important;
}

ただし、この方法はあまりお勧めしません。もしも、こういった指定の仕方があちこちでされていたら、自分以外の他者がcssをあてようした場合、必ず効かずに原因を探るためのロスタイムが生まれます。大きなサイトになるほど、それは複雑化し、探すのでさえ一苦労となるため、優先度は下のものから指定するべきでしょう。

インライン記述（htmlファイル内への記述）

こちらは、htmlファイル内で、style属性を使用し、cssを当てる方法です。

index.html.erb

<div style="margin-bottom: 10px;">
  hogehoge
</div>

こちらもあまりお勧めできる方法ではありません。チームで管理していくうえで、htmlはhtmlファイル内で、cssはcssファイル内で管理するべきでしょう。どこで何を定義しているかわからないことほどチーム内で他者に迷惑をかけることはありません。

IDセレクタ

# hoge {
  font-size: 10px;
  margin-bottom: 10px;
}

IDはhtml内で一度のみ使用することができるものです。よって、cssにおいても、複数使用できるクラスよりもIDの方が優先度が高いのです。ただし、こちらもあまりお勧めできません。昨今のリッチなサイトが多数をしめる現状をみると、IDはjavascriptを呼ぶために使われていることが多数あり、html内で定義したIDがjavascriptを定義するためのものなのか、cssを定義しているものなのか一目では判断がつきません。必要以上に他者に悩ませないためにもIDはあまり使用するべきではないでしょう。

クラスセレクタ

htmlにclass属性で定義し、cssに書く一般的な方法

index.html.erb

<div class="hoge">
  hogehoge
</div>

index.css

.hoge {
  font-size: 10px;
}

この方法が一番一般的に使用されており、かつ管理もしやすいものでしょう。特別な理由がない限り、この方法でcssを定義していくのがベストといえます。

要素セレクタ

要素に対して直接cssをかける方法です。

index.css

p {
  margin-bottom: 10opx;
}

要素に対して、直接かけるため影響範囲は広いですが、IDやクラスなどより限定的にかける方法よりは優先度は下です。

ユニバーサルセレクタ

すべてのものにcssをかける方法

index.css

* { 
  margin: 10px;
  padding: 10px;
}

*を使用することで、サイトすべてのcssを定義することができます。優先度は一番下ですが、特に指定をしなかった場合、こちらの要素がすべてに対して適用されるので、注意すべきです。こういった方法で一番使用するのは、reset.cssなどでしょうか。気になった方は調べてみてください。