「CSS Reloaded」CSS3の実践的な使い方をご紹介!の感想

このエントリーをはてなブックマークに追加

先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介!」に行ってきました。

資料が公開されました。

CSS Reloaded Ja
View SlideShare presentation or Upload your own. (tags: css 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を指定

サンプル1

::-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ビギナーズ»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1017
コメント

firefox3.1からはセレクタなども大幅に強化されるようです

https://developer.mozilla.org/ja/Firefox_3.1_for_developers

投稿者:匿名 | 2008年12月12日 08:53

セレクタの末尾に入れるべき半角スペースを入れていないのはわざとですか?

投稿者:匿名2 | 2009年3月13日 20:09

>匿名2さん

「セレクタの末尾に半角スペースが必須」と言うのが誤解ではないかなと思います。

セレクタはW3Cの文法では以下のように定義されています。

selector
: simple_selector [ combinator simple_selector ]*
;

http://www.w3.org/TR/CSS21/grammar.html

単純セレクタと0個以上の結合子と単純セレクタの組み合わせ。

セレクタの末尾に半角スペースが必須とは定義されておりません。

投稿者:西畑一馬 | 2009年3月16日 23:14
コメントを投稿