CSS基礎編 vol.3

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

今日はCSS3が採用されたことによって使えるようになったプロパティについて書いていきます。

rem

先日もremについて書きましたが、腑に落ちない部分があったので再度調べてみました。
そもそもどこが腑に落ちなかったかというとremやemを使うとレスポンシブデザインをするのが簡単になるということ。

調べてみると、例えばPCから見た時の大きさを100%とした場合、スマートフォンでは画面サイズが3分の1ほどになりますが、
スマートフォン用のスタイルシートでベースフォントのサイズを50%にすれば、
remで指定してある要素のサイズがPC版の50%にまで自動で縮小されるという仕組みであるということがわかりました。
つまりベースフォントのサイズを変更するだけで、コンテンツの大きさや幅を画面サイズに合ったものに調整できるということですね。

今まで腑に落ちなかったのは基準となるフォントサイズを変えるということを考えていなかったことが原因です。。。

rgba、hsla

CSS2にも色を指定するrgbはあったのですが、これに透明度を指定することが出来るrgbaやhslaがCSS3では使うことができます。
rgbaは
r:red
g:green
b:blue
a:alpha

hslaは
h:hlue
s:saturation
l:lightness
a:alpha

を示していてそれぞれalphaが透明度を指定する部分になります。
alphaは0から1で指定することができ、値が低いほど透明度が高く、値が高いほど透明度が低くなります。

opacity

rgba、hslaでは色を透明にすることができましたが、opacityでは要素全体を透明にすることができます。
opacityもalpha同様に0から1で指定することができ、値が低いほど透明度が高く、値が高いほど透明度が低くなります。

属性セレクタ

これまで属性セレクタをつかったことがなかったので、CSS3以前からあった属性セレクタについてもまとめておきます。

<a href="#"　title="属性セレクタ1">属性セレクタ1</a><br />
<a href="#" title="属性セレクタ2">属性セレクタ2</a><br />
<a href="#">属性セレクタ3</a><br />
<a href="#">zokuseiセレクタ4</a>

というhtmlを用いて説明していきます。

E[foo]　

[foo]のところに特定の属性を記載するとその属性を持つ要素にのみ適用されます。

a[title] {
  font-weight:bold;
  color:red;
}

とすると

となります。

E[foo=”bar”]　

fooに特定の属性、barに特定の値を記載するとその値をもつ属性の要素にのみ適用されます。

a[title="属性セレクタ2"] {
  font-weight:bold;
  color:red;
}

とすると

となります。

E[foo^=”bar”]

fooに特定の属性、barに特定の値を記載するとその指定した値の文字から始まる要素にのみ適用されます。

a[title^="属性"] {
  font-weight:bold;
  color:red;
}

とすると

となります。

E[foo$=”bar”]

fooに特定の属性、barに特定の値を記載するとその指定した値の文字で終わる要素にのみ適用されます。

a[title$="1"] {
  font-weight:bold;
  color:red;
}

とすると

となります。

E[foo$=”bar”]

fooに特定の属性、barに特定の値を記載するとその指定した値の文字で終わる要素にのみ適用されます。

a[title*="zokusei"] {
  font-weight:bold;
  color:red;
}

とすると

となります。

今回の勉強はここまでになります。
これらを活用することでデザインの幅が広がりそうです。