CSS備忘録 | 夫の家計管理術

この記事は筆者がCSSについて学習したときのメモ書きをまとめたもので、自らの理解度の強化、少しでも皆さんの役に立てばよいと思い書いているだけのものです。

■Multiple Selectors（マルチセレクタ）

これはリファクタリングするときに使用することが多い

■構文　※ , は必須　スペースは任意

selector1, selector2 {
}

■例 h1~h6までのフォントを指定

h1, h2, h3, h4, h5, h6 {

    font-family: 'Ubuntu', sans-serif;
}

■構文　※ スペースは必須

selector1 selector2 {
}

■例 contianer classを持つdivの中にあるh1を持つ要素のpaddingを指定

[HTML]
<div class="container">
    <h1 id="title">text</h1>
</div>

[CSS]
.container h1 {
    padding: 3% 15% 7%;
}

わかっている人からすればtitleにはid=”title”が存在しているので単にidでスタイルを決めてしまえばよいのですが、

上記の例はあくまでも、div class=”container“に含まれるすべてのh1に対しての指定なので、idは一意のものでなければならないので、意味合いが違います。

■構文 ※スペースなし　selector2はclassなら. idなら#

selector1.selector2 {} 
selector1#selector2 {}

これはただ単に、複数のセレクタをつなげているものであって、同一階層に存在しているものに対して使用する

■例

[HTML]
<div>
 <h1 class="class1  class2">text</h1>
</div>

[CSS]
.class1.class2 {
    color: red;
}

上記の階層型セレクタとコンバインドセレクタの理解を深めるためだけに書きます。

※.class1 .class2{}と.class1.class2{}　の違い（スペースの有無）について
■class1 .class2{}の場合

[HTML]
<div>
    <h1 class="class1 class2">text</h1>👈ココに適応される
</div>

[CSS]
.class1.class2 {
    color: red;
}

■class1.class2{}の場合

[HTML]
<div>
<div class="class1">
    <h1 class="class2">text</h1>👈ココに適応される
</div>

[CSS]
.class1 .class2 {
    color: red;
}

〇優先順位 id

idは一意のものにしか与えないものであるため。

１つのものに対して適応されることが前提であることは忘れてはなりません。

基本的に多様しません。使わないで済むならその方が良いです。

理由はclassよりも優先度が高いのでコードを書いている最中に簡単にclassを上書きできてしまう。

そのため、多用するとCSSがものすごく見にくいものになる可能性があります。

classだけで書けるならそうしたほうが良いです。

idを多用しないといっても、少し前に紹介したBootstrapなどのサードパーティで作成されたものを利用している場合、上書きしなければ自分の思うように表現できない場合があるので、そういったときはidを使うようにしなければなりません。

〇優先順位 class

classの同士でも優先順位はあります。

降着優先です。これはさすがに、書いているうちに同じことを２回書いていたりすると気が付くのであまりないと思います。

〇classもできるだけ1つにする

Bootstrapなどから引用されるclassはどうしても