擬似クラスとは？
ある要素が特定の状態にある場合のスタイルを指定するものです。
例えば
<ul> <li>この行だけ色がつきます</li> <li>色がつきません</li> <li>色がつきません</li> </ul
ul li:first-child {color:#488a95;}
このようにliの後にfirst-childという疑似クラスを追加して色を指定すると次のようになります。
- この行だけ色がつきます
- 色がつきません
- 色がつきません
また、疑似クラスには
- 未訪問のサイトのリンクのCSSを指定する:link
- 訪れたサイトのリンクのCSSを指定する:visited
- リンクにマウスが乗ったときのCSSを指定する:hover
- リンクをクリックしている時のCSSを指定する:active
などもあります。
擬似要素とは？
名前は擬似クラスと似ていますが、疑似要素ではある要素の一部を指定できます。
たとえば:first-lineをつけて特定の行の1行目だけCSSを指定したり、:beforeや:afterで特定の要素の前後にある要素を付け加えたりすることができます。
:before、:afterは必ずcontentを指定する必要があります。中身をリストの前に★をつけたいときは
li:before{content="★"}
とします。
:before、:afterの疑似要素を使うことでリボンや吹き出しをCSSで作成することができます。
セレクタの詳細度とは？
複数のセレクタがある時にどのセレクタが優先されるかを示すものがセレクタの詳細度です。
セレクタを指定する時は以下の4つの数値で詳細度が決まるようになっています。
- style=””
- id
- 属性/擬似クラス
- 要素/疑似要素
それぞれの要素が入る度に詳細度が１ずつカウントされていき、1番の「style=””」から順番にその優先度は高くなります。
たとえば
<p id="contant" class="detail">詳細度の説明をしています。</p>
というhtmlがあるとすると
p{color:#488a95;}
の詳細度は
- style=”” →0
- id →0
- 属性/擬似クラス →0
- 要素/疑似要素 →1
となります。
p.detail{color:#488a95;}
の詳細度は
- style=”” →0
- id →0
- 属性/擬似クラス →1
- 要素/疑似要素 →1
p.id{color:#488a95;}
の詳細度は
- style=”” →0
- id →1
- 属性/擬似クラス →0
- 要素/疑似要素 →1
<p id="contant" style="color:#488a95;">詳細度の説明をしています。</p>
は
- style=”” →1
- id →0
- 属性/擬似クラス →0
- 要素/疑似要素 →0
となり、最も優先度が高いということになります。
なお、優先度が同じ場合は後から書いたものが反映されます。
プロパティ値の指定方法は？
要素の長さのプロパティ値を指定する方法について説明していきます。
まず長さについて
これまで長さの指定は
- px
- em
- %
がよく使われていました。
この3つの単位をおおまかに分類すると【絶対値】か【相対値】かに分けられます。
- 絶対値→px
- 相対値→em、％
この違いについて説明していきます。
絶対値であるpxは他の要素の値に影響されることなく表示されます。
一方相対値であるemや%については指定したい要素の親要素の大きさによって変動していきます。
どのブラウザでもhtmlのフォントサイズはデフォルトで16pxになっているので、
bodyなどでfont-sizeを指定していない場合やfont-size:100%;にしている場合のフォントサイズの関係性は
16px=1em=100%
となります。
<html>
<head></head>
<body>
<div><p>絶対値と相対値の違い</p></div>
</body>
</html>
というhtmlでのpのサイズを見ていきましょう。
絶対値の場合
div {font-size:32px;}
p {font-size:16px;}
pxは絶対値なのでpは16pxで表示されます。
相対値の場合
body {font-size:100%;}
div {font-size:1em;}
p {font-size:0.5em;}
emは相対値であり、pの親要素であるdivが1em（つまり16px）と指定されているので
pはその半分である8pxで表示されます。
body {font-size:100%;}
div {font-size:50%;}
p {font-size:50%;}
この場合はpの親要素であるdivが50%（つまり8px）と指定されているので
pはその半分である4pxで表示されることになります。
相対値は親要素の影響を受ける分、設定が少し大変になります。
なんで苦労してでも相対値を使うの？
「大変なら絶対値のpxを使った方が圧倒的によくない？」と思ってしまうんですが、
IEの古いバージョンでは絶対値であるpxを使っているとブラウザ側の設定で文字の大きさを変えたとしても、文字の大きさが変わらないという問題が生じてしまいます。
つまり、文字が小さくて見づらいとなったとき、どう頑張っても古いバージョンを使っているIEユーザーは文字を見やすいサイズにすることができないということです。
それを避けるためにemや％などの相対値を用いることが推奨されています。
remについて
実は先ほど挙げたemや％以外にも相対値にはremという単位があります。
emが親要素の大きさに影響されるのに対し、remはルート（html）の値に影響されます。
html {font-size:100%;}
div {font-size:32px;}
p {font-size:0.5rem;}
この場合、pはhtmlの値に影響されるので、100%の半分（つまり16pxの半分）になり8pxで表示されます。
remを使うことで親要素のことを考えずにすむのでemよりも簡単に設定することができます。
ただ、remはIE8以下ではサポートされていないようなので
相対値を使う原因を解決できていないんじゃないか・・・と思っています。
これについては今度もっと詳しく調べてみたいと思います。
marginの相殺について
boxが２つ以上並ぶときに設定したmarginがどのように表示されるか見ていきます。
上のbox1にはそれぞれ上下に30pxのマージンを設定しています。
box2にはマージンを設定していません。
そうすると当然、box1とbox2の間には30pxの隙間がうまれます。
次にbox2にも上下に30pxのマージンを設定してみます。
このようにbox2にマージンを設定しても見た目は変わりません。
これはマージンどうしが相殺されるというルールがあるからです。
そのためbox1とbox2の間に60pxのマージンを設定したい場合は、box1のmargin-bottomもしくはbox2のmargin-topを60pxに設定する必要があります。
