「CSS Reloaded」CSS3の実践的な使い方をご紹介!の感想
先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介!」に行ってきました。
資料が公開されました。
■出典元:CSS Reloaded
■著者;John Allsopp
■リンク:Web Directions East
以下、内容を復習もかねてまとめてみました。(サンプルやブラウザ対応などは私が補足したものです。)
CSSの歴史
1996年ぐらいからありました。
2000年にCSSのサポートが良いMac IEが登場
2000-2005年はCSS3の開発がストップ
2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded)
各ブラウザはCSS3を試験的に実装
プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。
Firefox 『-moz-』をつけたプロパティで利用可能
safari 、Google Chromeは『-webkit-』をつけたプロパティで利用可能
注意)Mozillaの独自拡張CSSは使わないでください - Web標準普及プロジェクト
追記)スピーカーの菊池さんより『mozillaのvendor prefixの-moz-ですが2005年の時点とは状況が変わり、OKになってるようです。』との補足をいただきました。
合わせて参考にしてください。
CSS 独自拡張用の接頭辞について
mozillaのtext-shadowに関する記述(コメント欄も合わせて)
CSSプロパティ
::selection
選択された要素に対してCSSを指定
::-moz-selection{
background:red;
color:white;
}
::selection {
background:red;
color:white;
}
winのsafari3.1、Opera9.5、Google Chromeは『::selection』で動作します。
Firefoxは『::-moz-selection』で動作します。
:target
リンク先の要素に対してCSSを指定
:target{
background:red;
color:white;
}
winのsafari3.1、Opera9.5、Google Chrome、Firefox3は『:target』で動作します。
:first-child last-child nth-child
指定した子要素に対してCSSを指定
li:nth-child(odd){
background:yellow;
}
li:nth-child(even){
background:blue;
}
li:nth-child(3){
background:gray;
}
li:nth-child(odd){
background:yellow;
}
li:nth-child(even){
background:blue;
}
li:nth-child(3){
background:gray;
}
ul li:last-child{
background:lime;
}
ul li:first-child{
background:red;
}
winのsafari3.1、Opera9.5、Google Chromeは『:first-child』、『last-child』、『nth-child』で動作します。
Firefox3は『:first-child』、『last-child』のみ動作します。
プロパティ
column-width
カラムの幅を定義します。
column-count
カラムの数を定義します。
column-gap
カラムの境界を定義します。
p{
width:450px;
}
p{
column-count: 2;
column-width: 50%;
column-gap: 20px;
}
p{
-moz-column-count: 2;
-moz-column-width: 50%;
-moz-column-gap: 20px;
}
p{
-webkit-column-count: 2;
-webkit-column-width: 50%;
-webkit-column-gap: 20px;
}
プリフィックスを利用することによりwinのsafari3.1、Google Chrome、Firefox3で動作します。
text-shadow
テキストの影を定義できるプロパティ
CSS 2で定義されたプロパティで、CSS 2.1では削除され、CSS 3で再定義された
h1{
text-shadow : 4px 4px 10px black;
}
Opera9.5とsafari 3.1で動作します。(safari 3.1ではカラーの省略などが出来ない)
text-stroke
テキストのアウトラインを定義するプロパティ
h1{
-webkit-text-stroke-color:red;
-webkit-text-stroke-width:2px;
}
safari 3.1で動作します。
box-shadow
ボックスの影を制御するプロパティ
span {
border: thin solid;
-webkit-box-shadow: 0.2em 0.2em 10px #CCC;
}
safari 3.1 Google Chromeで動作します。
border-radius
ボックスのボーダーの角丸具合を制御するプロパティ
h1 {
width:300px;
height:300px;
border:2px solid blue;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
}
safari 3.1、Google Chrome、Firefoxで動作します。
opaciy
ボックスの透明度を制御するプロパティ。
0~1の値で制御可能。子要素の透明度も変わるので注意が必要。
h1 {
width:300px;
height:300px;
background:red;
opacity:0.5;
}
safari 3.1、Google Chrome、Firefox、Operaで動作します。
transform
ボックスの回転やズーム率や位置、角度を制御するプロパティ
h1 {
width:300px;
height:300px;
background:red;
-webkit-transform: rotate(20deg);
}
safari 3.1 Google Chromeで動作します。
opaciy
背景色の透明度を制御できる
0~1の値で制御可能。opaciyと違い子要素の透明度は変わらない。
h1 {
width:300px;
height:300px;
background:rgba(255,0,0,0.3);
}
safari 3.1、Google Chrome、Firefoxで動作します。
web-fonts
サーバー上のfontを利用できる機能
サンプル
(fontはm+webfontsを利用)
@font-face {
font-family: mplus-1p-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf') format("truetype");
}
h1{
font-family: mplus-1p-regular;
}
safariで動作。
transionts
状態が変化する際の時間を制御するプロパティ
h1{
background:red;
-webkit-transition: all .5s ease-out;
}
h1:hover{
background:white;
}
safari 3.1、Google Chromeで動作。
追記)Firefox3.1からサポートされるようです。
GeckoでCSS Transformsがサポートされた
CSS3を実際に使うには
最後にスピーカーの菊池崇さんが、「IEにあわす必要はない、CSS3を利用すればIEユーザーの体験を損なうことなく、CSS3対応ブラウザユーザーの体験を向上させることができる」とおっしゃっていました。これも一つの考え方ですね。
Web Directions East
Web Directions Eastの告知をされていました。
11月7日~9日に行われるイベントで、Eric Meyer(エリック・メイヤー)、Jeffrey Veen(ジェフリー・ヴィーン)、Dan Cederholm(ダン・セダーホルム)、Jeremy Keith(ジェレミー・キース)、Andy Budd(アンディ・バド)など世界のWeb業界の有名人が日本に集まるという素敵なイベントです。
感想
CSS3の使い方中心でしたが面白かったです。
(transiontsやtransformが話題になったときは未来のお話と思って関心も示さなかったので)
【PR】11月1日 CSSを学びたい方の為のセミナー『CSS Niteビギナーズ』開催
スポンサードリンク
«第10回 hoverとEffectの応用 - jQueryによるJavaScript入門 | メイン | CSS Niteビギナーズ»