Edited at

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

More than 3 years have passed since last update.


前提

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などでしょうか。気になった方は調べてみてください。