CSS 3 がやってきた

Kousuke (seven)Inamoto

Hello!

• 稲本浩介（稲本せぶん）• 30 ちゃい

• 株式会社ゼネラルアサヒwww.generalasahi.co.jp

• Web ディレクター、マークアップエンジニア

• IA• @sevenina• sevenstyleweb.com/blog

Agenda

• CSS 3

• Selector

• MediaQuery

• Effect

• How to use CSS 3

CSSCascading Style Sheets とは、

HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、 W3C による勧告の一つ。

文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

(From wikipedia)

CSS3

CSS 3 CSS 2.1 + javascript ≒

• Selectors• Color• Namespaces• Media Query• Backgrounds & Borders• Template Layout• CSS Transitions• CSS Transform• CSS Animations• Fonts• Flexbox• Image Values

>Module

Cf:WebDesigning vol.100

Agenda

• CSS 3

• Selector

• MediaQuery

• Effect

• How to use CSS 3

SelectorsId や class を使わなくても、要素をつかむことができる。

無駄に id や class を使わなくてもよくなる

HTML がきれい

Agenda

• CSS 3

• Selector

• MediaQuery

• Effect

• How to use CSS 3

MediaQueryスタイルシートを適用する条件が細かくなった

無駄に javascript を使わなくてもよくなる

Agenda

• CSS 3

• Selector

• MediaQuery

• Effect

• How to use CSS 3

EffectCSS Transitions, CSS Transform

無駄に javascript を使わなくてもよくなる

Fonts書体情報は書体情報で持たすことが可能

Agenda

• CSS 3

• Selector

• MediaQuery

• Effect

• How to use CSS 3

CSS 3 CSS 2.1 + javascript ≒

Design ≠ 　 Decoration

CSS3

CSS2.1CSS3

Effective Effect

CSS3

sevenstyleweb.com/blog/

@sevenina