CSS3をさわってみました。

CSSとは?Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3C による勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

現在、一般的に使用されている CSS2 は 1998 年に勧告されたもの。2004 年 2 月に CSS2 のマイナーチェンジである CSS2.1 が勧告され現在まで進化なし。

CSS3とは ?CSS3 は 2010 年に勧告される予定の全体がモジュール化されたスタイルシート。

CSS3 では、1 つで構成するのではなく、細分化して管理しようという考え方から、全体がモジュール化されています。そのため、ユーザエージェントがどのモジュールに対応し、どのモジュールに対応しないかを自由に選択できるようになりました。

各ユーザエージェントが必要なものだけを実装でき、中途半端な実装は起こさないようにすることができます。

主なユーザエージェント：ブラウザ、携帯電話

モジュール・テキストに関するエフェクトを定義した「Text Effects」・背景やボーダーに関する「Backgrounds and Borders」・HTML のレンダリングを指定するための「Advanced Layout」・グリッドレイアウトを実現する「Grid Position Module」・印刷表示用のページをレイアウトするための「Generated Content for Paged Media」

CSS3で何ができるの？

実際の使用例。

Google のトップページの「Google 検索」「I'm Feeling Lucky」には-webkit-gradient でグラデーションが設定されています。

Twitter のいたる所で border-radius が使われています。

角丸

sugiyamayusuke.log の <h1> 要素には、@font-face が設定されています。

魅力的なプロパティ。

の、前に・・・。

ベンダープリフィックスW3C で正式勧告されていないプロパティの先行実装やブラウザー固有機能などで使われるもの。ブラウザーを識別する接頭辞を付けることで、適用するブラウザーを絞り込めます。

-moz--webkit--o-

：　Firefox　：　Safari、Google Chrome：　Opera

改めまして、魅力的なプロパティ。

-webkit-background-size-webkit-background-origin-webkit-background-clipMultiple background-webkit-border-image-webkit-border-radius-webkit-box*-webkit-box-flex-webkit-box-ordinal-group-webkit-box-shadowtext-shadow-webkit-text-stroke-webkit-text-fill-color-webkit-box-sizing-webkit-transition-property-webkit-transition-duration-webkit-transition-timing-function-webkit-gradient()*-webkit-box-reflect-webkit-mask-box-image-webkit-transform-webkit-transform-style-webkit-transform-origin-webkit-backface-visibility@font-face

WebKit 系 Mozilla 系

-moz-max-content(etc.)-moz-border-image-moz-border-radius-moz-linear-gradient*-moz-background-inline-policy-moz-box*-moz-box-flex-moz-box-ordinal-group-moz-box-sizing-moz-transform-moz-transform-origin

Opera 系

Multiple backgrounds-o-background-sizebackground-originbackground-clipborder-radiusborder-imagebox-shadowtext-shadow-o-transform-o-transition-property-o-transition-duration-o-transition-timing-function

実際にプロパティの使用例を紹介します。

box-shadowtext-shadow

テキスト、ボックスにドロップシャドウ効果を適用する。

使用例

1 つ目の値は、右方向への影の移動距離（負の値だと左方向に移動する）2 つ目の値は、下方向への影の移動距離（負の値だと上方向に移動する） 3 つ目の値は、影をぼかす範囲4 つ目の値は、影の色（rgba を利用できる）

text-shadow: 2px 2px 2px #FFF;

box-shadow: 5px 5px 5px rgb(51, 51 , 51) ;

gradientbackground プロパティの値に「gradient」を設定することで背景にグラデーションを設定できる。

-webkit -gradient(l inear , 開始位置 , 終了位置 , color-stop( 色を追加する位置 , 追加する色 ));

-moz-l inear-gradient( 開始位置 , 終了位置 ,from( 開始時の色 ),color-stop( 色を追加する位置 , 追加する色 ),to( 終了時の色 )) ;

使用例（※webkit 系と指定方法が異なるので注意）

background-image: -webkit -gradient(l inear , left top, left bottom,color-stop(0 , rgb(153, 204 , 204)) ,color-stop(1 , rgb(252, 20 , 190))) ;

background-image: -moz-l inear-gradient( -90deg,rgb(153, 204 , 204) 0%,rgb(252, 20 , 190) 100%);

border-radius画像を使用せずに角丸のボックスを実装する。

border-radius : 右上 左上 左下 右下 ;　　　　　　　　　　　　　　-webkit -border-radius : 右上 左上 左下 右下 ;-moz-border-radius : 右上 左上 左下 右下 ;

使用例（※webkit 系と指定方法が異なるので注意）

border-radius : 10px;-webkit -border-radius : 10px;-moz-border-radius : 10px;

Multi -column段組レイアウト、テキストの自動的な流し込み。

使用例（※webkit 系と指定方法が異なるので注意）

column-count : 2 ;column-gap: 2em;column-rule : 2px dotted #585858;

-webkit -column-count : 2 ;-webkit -column-gap: 2em;-webkit -column-rule : 2px dotted #585858;

-moz-column-count : 2 ;-moz-column-gap: 2em;-moz-column-rule : 2px dotted #585858;

Multi -column段組レイアウト、テキストの自動的な流し込み。

・column-count ではいくつのカラムに分けるかを指定できます。

・column-width ではいくつのカラムの幅を指定できます。使い方は普通の　width プロパティと一緒。カラム数とカラム幅が矛盾していた場合、　column-width のほうが適用される。

・column-gap ではいくつのカラム同士の間隔を指定できます。数値の指定　などは padding などのプロパティと一緒。カラム同士の間を調整するもの　なので、左端カラムの左側、右端カラムの右側には余白は開きません。（余　白を明けたい場合は column-count を指定している親ボックスにパディン　グを指定する）

・column-rule ではいくつのカラム同士の間を仕切る線を指定できます。数値　の指定などは border プロパティと一緒。カラム同士の間を調整するものな　ので、左端カラムの左側、右端カラムの右側には線はつきません。

@font-faceWebfont という、ユーザーの環境に用意されてないフォントでも、Web サーバーにそのフォントが用意されていれば、そのユーザーの環境でもそのフォントが表示できるシステムです。

※絶対パスでも相対パスでもどちらでも OK です。※同一ドメインにアップロードしておく必要がある。

使用例

h1 {　　　　　font-family : "Essays1743" , "Book Antiqua" , "Georgia" ;}

@font-face {　　　　　font-family : "Essays1743" ;　　　　　src:url( "http://sugiyamayusuke.org/f/Essays1743.ttf " ) format("TrueType") ;}

Transitions文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScript が必要だった処理を CSS で実現できるアニメーション機能。

使用例

a:hover { -webkit -transition-property: al l ; -webkit -transition-duration: 0 .4s ; -webkit -transition-timing-function: ease-out ; -moz-transition-property: al l ; -moz-transition-duration: 0 .4s ; -moz-transition-timing-function: ease-out ; }

Transitions文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScript が必要だった処理を CSS で実現できるアニメーション機能。

・-webkit -transition-propertytransition を適用するプロパティ（background-color など）を設定します。

・-webkit -transition-durationtransition の変化をどれくらいで表現するかを設定します。単位は s です。

・-webkit -transition-timing-functiontransition の変化の具合を設定します。

default l inear（一定のスピード） ease- in ease-out ease- in-out cubic-bezier() 4 つの数字をカンマ区切りで指定

えどさんのCSS3プロパティジェネレーターhttp://css-eblog.com/eblog_sample/0912/css3-generator/

これらのプロパティはほんの一部です。

参考サイト・CSS-EBLOG　　http://css-eblog.com/summary/css3-summary.html

・CSS3 test ¦ SevenStyleWeb　http://sevenstyleweb.com/labo/css3/

CSS3 や HTML5 は、そう先のことではなさそうです。

ご静聴、どうもありがとうございました。