こんにちは、株式会社カスタマトリックスの寺尾です。
こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。
本日は第七回、「CSSの書き方」を説明していきます。
前回はこちら
https://qiita.com/r-terao/items/5f63b84fbf4d007ab12f
第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6
CSSの書き方
CSSはスタイルのルールを記述する言語のため、記法にも明確な基準があります。
※サンプルコードは見た目のために.scssで記述してますが、最近は.cssでも入れ子構造に対応しているので同じ書き方で問題ないです。
body {
margin: 0;
padding: 0;
font-size: 20px;
}
#test-id {
color: red;
}
.test-class {
background-color: rgba(100, 100, 100, 0.5);
a {
font-size: 16px;
}
}
このように、スタイルを当てる対象に対して括弧で区切って内容を記述します。
括弧を入れ子にする事で「〇〇かつ××」という表現が可能です。
CSSのセレクタ
CSSで「スタイルを当てる対象」を検索するために「セレクタ」というものが存在します。
セレクタはシンプルセレクタと結合子、グループ、疑似要素に分かれています。
シンプルセレクタは6種類存在します。
- ユニバーサルセレクタ
全ての要素が対象universal.css* { } - タイプセレクタ
指定した要素名の要素が対象type.cssh1 { } - IDセレクタ
指定したIDを持つ要素が対象id.css#test { } - 属性セレクタ
特定の属性、或いは特定の属性の値を持つ要素が対象attr.css[href="https://test.com"] { } - クラスセレクタ
指定したクラスを持つ要素が対象class.css.test { } - 疑似クラス
特定の状態の要素、或いは特定の順序などにある要素が対象pseudo-c.css:first-of-type { }
CSSは「必ずユニバーサルセレクタかタイプセレクタから書き始める（ただしシンプルセレクタが続く場合ユニバーサルセレクタを省略できる）」というルールがあります。
そのため、ほぼ必ずシンプルセレクタから書き始めます。
その他のセレクタとして下記が存在します。
- 結合子
ある要素に対して親子（入れ子）や兄弟（隣接）にあたる要素が対象combine.cssh1 + div { } - グループ
別々のセレクタに同じスタイルを適用できるgroup.css.test, h1 { } - 疑似要素
要素全体ではなく、要素の一部や前後を対象にできるpseudo-e.css:after { }
CSSの優先順位
CSSなどのスタイルには優先順位があります。
下記の順で優先されていきます。（同列の場合下のランクのモノを比較する）
- 設定元
- important付ユーザーエージェント（ブラウザごとに定義されているもの）
- important付ユーザー（ブラウザにユーザが設定できるもの）
- important付製作者（WEBサイトのCSS）
- 製作者
- ユーザー
- ユーザーエージェント
- CSSの記述元
- インライン（HTML要素に直書き）
- CSSファイル
- セレクタの優先順位
- IDセレクタ
- クラスセレクタ
- タイプセレクタ
- それ以外
- セレクタの詳細度
1桁目を「タイプセレクタの個数」
2桁目を「クラスセレクタの個数、属性セレクタの個数、疑似クラスの個数」
3桁目を「IDセレクタの個数」
上記の3桁からなる数字を比較して数字の高い方が優先
Importantはスタイルの記述の末尾に!importantと書くもので、優先度を飛躍的に高める事ができます。
a {
color: red !important;
}
まとめ
- CSSはセレクタと括弧を合わせて特定の要素のみにスタイルを指定する事で、複数のデザイン定義を管理している
- セレクタは基本6種類があり、それらを組み合わせて要素を指定する
- 優先度が厳密に設定されている
CSSはややこしいルールが多いですが、基本的にはセレクタさえ覚えておけば問題ないです。
思ったスタイルが当たらない時に優先度を思い出せるようにしておくと良いですね。
次回は未定です。
おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！