文法
セレクタ
- タグはそのまま記述
- idの場合は”#”に続けて記述
- クラスの場合は”.”に続けて記述
|
|
div { //divタグ全てに反映される } #example_id { //たとえばdiv id="example_id"の部分に反映される } .example_class { //たとえばp class="example_class"の部分に反映される } |
入れ子のタグの指定
入れ子の中のタグを指定するときは、親要素と子要素の間に半角スペースを入れる。
|
|
div#example_id p { //div id="example_id"の中のpタグ全てに反映される } |
一括指定
異なるセレクタに同じ設定を適用する場合は、”,”で区切って列挙。
|
|
header, footer { //headerとfooterに同じ設定が反映される } |
padding
値を1つ指定すると、上下左右に同じ値でパディング。
|
|
<div class="someclass"> padding: 20px; </div> |
値を2つ指定すると、1つ目の値で上下に、2つ目の値で左右にパディング。
|
|
<div class="someclass"> padding: 20px, 60px, 30px, 40px; /* top & bottom -> 20px left & right -> 40px */ </div> |
値を4つ並べて指定すると、それぞれtop、right、bottom、leftのpadding値になる（上から時計回り）。
|
|
<div class="someclass"> padding: 20px, 40px; /* top -> 20px right -> 60px bottom -> 30px left -> 40px */ </div> |
padding値を個別に指定することも可能。
|
|
<div class="someclass"> padding-top: 20px; padding-right: 60px; padding-bottom: 30px; padding-left: 40px; </div> |
ベンダー・プレフィックス
| ブラウザ |
プレフィックス |
| FireFox |
-moz- |
| Google Chrome, Safari |
-webkit- |
| Opera |
-o- |
| Internet Explorer |
-ms- |
box-sizing
要素のサイズには、margin、borderの幅、paddingは加味されないため、 サイズ指定が煩雑になり、時に意図しない結果になる。
たとえばHTML5のbodyとnavブロック、sectionブロックの幅を ピクセル単位で指定し、 mavとsectionがbodyの幅にピッタリ納まるようにしたいとき、 各々にmarginなどをを設定していると、 その分だけ意図するサイズから差し引いた値をwidthに設定しなければならない。
HTML5では、box-sizing属性をborder-boxにすることでこれを解消し、 paddingとborderを含めたサイズでwidthを指定できるようになる。以下の例は、 div要素のboxクラスに対して以下の属性を適用し、box-sizing属性を変えた例。
|
|
div.box { border-style:solid; border-color:black; width:300px; margin:20px; border-width:5px; padding:10px; } |
box-sizing:content-boxのとき
box-sizingテスト
box-sizing:border-boxのとき
box-sizingテスト
border-sizingをborder-boxにするため、デフォルトで読み込むCSSファイルに 以下を記述。この際、各ベンダーのブラウザに対応させるため、 ベンダー・プレフィックスをつけておく。
|
|
* { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } |
calc()ファンクション
CSS3で実装された機能で、動的にブロックの幅などを計算できる。 ブラウザによって実装状況が異なるので、ベンダー・プレフィックスを 付けて列挙するのが安全。
|
|
.sidebar { float: left; width: 180px; background-color: #478384 } .main-content { float: right; width: calc(100% - 180px); width: -webkit-calc(100% - 180px); } |
ぶら下げインデント
CSS3ではtext-indent属性にhangingスイッチが定義されているが、 Chromeのバージョン47.0.2526.73 mでは再現できなかった。
paddingとtext-indentを使って同じ効果を得る方法がネット上で紹介されている。 paddingで全体を右へ移動させ、text-indentに負の値を指定することで 先頭のみ元の場所へ戻す。
|
|
.comment { padding-left: 1em; text-indent: -1em } |
position: ～で右寄せ
親要素にposition: relativeを指定し、子要素でposition: absoluteとright: 0やbottom: 0などを指定すると、子要素を親要素の右端や下端に寄せることができる。要素の右寄せなどに簡易に使えるかもしれない。
HTML
|
|
<div class="parent"> <span class="child1">Child1</span> <span class="child2">Child2</span> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.parent { margin: auto; position: relative; width: 60%; height: 100px; background-color: #0cc; } .child1 { position: absolute; left: 20px; top: 30px; } .child2 { position: absolute; right: 0; bottom: 0; } |