- 本記事は社内勉強会の資料です。
- だいたいの内容はHTMLクイックリファレンス-CSSの基本からの抜粋になります。
- 記載者はcss初心者なので内容がおかしかったら優しく突っ込んであげてください。
CSSとは？
- 正式名称はCascading Style Sheets
- webページのスタイルを指定する言語です。
基本書式
基本形 : セレクタ { プロパティ : 値; }
css
div {
width : 50px;
height : 50px;
color : #FFF;
}
セレクタの種類
基本的なセレクタのみ抜粋
| セレクタ | 書式 | 適用範囲 |
|---|---|---|
| 要素型 |
div{ ... }など |
要素名で指定した要素 |
| 全称 | *{ ... }
|
全要素 |
| id | #title{ ... } |
idで指定した要素 |
| class | .template{ ... } |
class名で指定した要素 |
まとめて書くなら
同じ内容ならまとめて書けます。
css
h1, h2{ width : 50px;} /* どっちも50px */
〇〇の要素の××について書くなら
セレクタの間にスペースで実現できる。
.A .BならAクラスの子孫要素のBクラスに適用するという意味になります。
css
.dialog .button{ width : 50px; } /* dialogの中にあるbuttonに適用される */
セレクタの優先順位
スタイルの競合があった場合は、後に読み込まれたスタイルが優先されます。
css
.box{ width : 50px; }
.box{ width : 100px; } /* 最終的なwidthは100pxになる */
セレクタの種類による優先順位は、id＞class＞要素名の順となります。
例えば以下のようにhtmlとcssが書かれていたとすると、最終的なwidthは50pxになります。
css
#foo{ width : 50px; } /* これが適用される */
.bar{ width : 100px; }
div{ width : 200px; }
html
<div id="foo" class="bar" > hoge </div>
下記のような複数セレクタと単一セレクタでセレクタ名に競合があった場合は、複数セレクタが優先されます。
css
.foo .bar{ width : 50px; }
.bar{ width : 100px; }
html
<!-- widthは50px -->
<div class="foo bar" > hoge </div>
<!-- widthは100px -->
<div class="bar" > hoge </div>
ただし、!importantというキーワードがあると問答無用でそのスタイルに従います。
css
.box{ width : 50px !important;} /* これが適用される */
.box{ width : 100px; }
詳しい優先順位はセレクタの詳細度に依存します。
- 参考：詳細度
優先度計算が面倒ならSpecificity Calculatorを使うといいと思います。
継承
フォントサイズや文字の色など一部のプロパティは子要素に継承されます。
css
.box{ color : red; }
html
<div class="box">
<!-- 文字は赤くなる -->
<div> hogehoge </div>
</div>
特にフォントサイズの指定が相対的な指定だと親と子の要素が掛け合わされた要素になります。
css
.box{ font-size : 90%; }
.text{ font-size : 90%; }
html
<div class="box">
<!-- 文字サイズは90×90の81%になる -->
<div class="text"> hogehoge </div>
</div>
複数のスタイルから引用
2個以上のスタイルを指定するとどちらの適用されます。
css
.foo{ font-size : 16em; }
.bar{ color : red; }
html
<!-- 文字サイズ：16em かつ 文字の色が赤色になる -->
<div class="foo bar"> hogehoge </div>
指定に重複がある場合は先述した優先順位に従います。
css
.foo{ color : blue; font-size : 16em; }
.bar{ color : red; }
html
<!-- 文字の色は赤色になる -->
<div class="foo bar"> hogehoge </div>
<!-- この場合も赤色になる -->
<div class="bar foo"> hogehoge </div>
外部スタイルシートをインポート
@importでほかのスタイルシートからスタイルを読み込みができます。
ただ、処理速度的にあまり推奨されていないみたいです。
sub.css
.foo{ color : blue; font-size : 16em; }
main.css
@import url("sub.css"); /* これでmain.cssでfooクラスが使える */