講演者

John Allsopp

開催日

2008年6月14日

場所

アップル銀座店

CSS3の概念と実践的なテクニックが紹介されました。Safari3やFirefox3、Opera9.xなどのモダンブラウザでは、すでに実装できるプロパティも多数あるということで。今後の実験的なサイトで実装していきたいなと思った次第。

新セレクタ

::selection

::selection{
background-color:#ff0000;
}

二つ「:」をつなげる。選択時の振る舞いを指定。

:target

p:target{
background-color:#ff0000;
}

疑似クラス。う〜ん、ちょっとちゃんと使ってみないとイマイチ使いどころがつかめない。

:first-child, :last-child, :nth-child(n)

p:first-child{
font-weight:bold;
}
p:last-child{
font-size:200%;
}
p:nth-child(3){
font-size:150%;
}

疑似クラス。一番はじめのp要素内を太字に、最後のpタグの文字サイズを200%に、3番目のpタグの文字サイズを150%にする。これってJavascriptでやってたことだけど、CSSだけでできちゃうなんて！！！

:nth-child(odd), nth-child(even)

さらに偶数と奇数の振り分けもできるから、class属性なんかを追加する必要がないから素敵！！

:enabled, :disabled, :checked

さらにフォームタグなどで活用できる疑似クラス。

@font-face

@font-face{
font-family:"matrix";
src:url(http://www.〜/xxx.ttf) format("truetype");
}
h1{
font-family:matrix, sans-selif;
}

これって誰かがフォントを持っていて、それを参照できるってこと！？だとしたらすごい！！

新プロパティ

column-count, column-width, column-gap, column-rule

p{
column-count:3;
column-width:10em; %は使えないので注意
column-gap:2em; カラムの間隔
column-rule:1px solid #000; カラム間の振る舞い
}

border-radius, border-top-left-radius・・・

p{border-radius:1em;}

もう角丸のための画像もスクリプトも要らない。CSSで出来ちゃいます。ポイントは「em」指定すること。「px」指定すると画像を拡大したときに画像が崩れてしまう。

ほかにも、text-shadow（テキストに影付き）、text-stroke（テキストにふち）、box-shadow（要素に影付き（borderみたいなもんかな））、box-refkect（反射）、opacity（透明度。0から1の値を設置。配下へopacityは引き継ぐ）などなど。
background:rgba(xxx,xxx,xxx,xx);（テキスト、ボーダーには無理）。scale(0.5);（拡大縮小）。

回転

これは、すごい！え？CSSだけ！？って感じ。

transform

p{
transform:roteate(90deg); 90度回転
orign:0 0; 始点
margin-left:1em;
}