css3 第1回

css3を学ぶ

html5の学習と合わせ、css3についても学んでいく。

ベンダープレフィックス

css3はまだ勧告が出ていない。このため、各ブラウザでは見切り発車でcss3を実装しており、結果ブラウザごとにcss記述がまちまちという問題が起きている。そのため、ベンダープレフィックスと呼ばれる接頭辞をプロパティの前に付けることで、ブラウザごとに表記を変える方法が取られている。

-moz-
firefox用。

-webkit-
chrome,safari用。ただし、chromeやmac用safariではベンダープレフィックスなしで表示可能だが、win用safariでは必要、といった場合もある模様。

-o-
Opera用。

-ms-
IE9以降用。IE8以前は基本的にcss3が効かない。

なお、このサイトでブラウザ毎のcss3対応状況を確認できる。ベンダープレフィックスを入れていると正しく表示されない場合もあり、注意が必要。

rgbaでの指定

色を指定する箇所でrgba(r値,g値,b値,透過度)といった記述ができるようになった。r値,g値,b値は0～255で指定、透過度は0～1で指定する。画像を用意しなくても透過するboxを作れる点はたいへん有用である。

#sample{
  background:rgba(255,0,0,0.5);
}

新プロパティ

代表的なcss3の新プロパティをいくつか見ていく。

text-shadow

文字にシャドウを入れる。値はx軸方向位置、y軸方向位置、広がり、色である。x軸,y軸方向に負の値を指定すると、逆方向にシャドウが入る。「,」区切りで複数設定可能。

#sample1{
  text-shadow:3px 3px 3px rgba(255,0,0,0.5);
}
#sample2{
  text-shadow:2px 2px 2px #fff,-2px 2px 2px #fff;
}

box-shadow

boxに対しシャドウを入れる。しかし、立体的なイメージになるので流行でないデザインとなる。text-shadowと同様の記述仕様だが、insetを付与するとboxの内側にシャドウを入れられる。

#sample1{
  box-shadow:5px 5px 2px 2px #007;
}

#sample2{
  box-shadow:5px 5px 2px 2px #007 inset;
}

border-radius

boxの角に丸みを付けられる。2つのpxを指定する場合、スペース区切りでは1つ目の指定が左上と右下を示し、2つ目の指定が右上と左下を示す。一方、スラッシュ区切りだと1つ目の指定がx軸方向、2つ目の指定がy軸方向を指定する。

#sample1{
  border-radius:50px 30px;
}
#sample2{
  border-radius:50px/30px;
}

感想

cssもバージョン3ということで、必須と思われるような機能が増えたという印象はなく、画像を用意しなくてもある程度の処理が可能となり便利になった、という印象を受ける。しかし、その便利さもベンダープレフィックスという問題の前に霞んでしまう。ユーザやディベロッパにとって不利益となり、一刻も早い仕様確定が望まれる。