SlideShare una empresa de Scribd logo
1 de 21
CSS 3 がやってきた Kousuke (seven)Inamoto
Hello! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Cascading Style Sheets とは、 HTML  や  XML  の要素を どのように修飾(表示)するか を 指示する仕様であり、 W3C による勧告の一つ。 文書の構造と体裁を分離させるという理念 を実現する為に 提唱されたスタイルシートの、具体的な仕様の一つ。 (From wikipedia)
CSS3
 
CSS 3 ≒ CSS 2.1 + javascript
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],>Module Cf:WebDesigning vol.100
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]
Selectors Id や class を使わなくても、要素をつかむことができる。 無駄に id や class を使わなくてもよくなる HTML がきれい
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]
MediaQuery スタイルシートを適用する条件が細かくなった 無駄に javascript を使わなくてもよくなる
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]
Effect CSS Transitions, CSS Transform 無駄に javascript を使わなくてもよくなる Fonts 書体情報は書体情報で持たすことが可能
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 3 ≒ CSS 2.1 + javascript
Design ≠   Decoration CSS3
CSS2.1 CSS3
Effective Effect CSS3
sevenstyleweb.com/blog/ @sevenina
 

Más contenido relacionado

Destacado

サイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるサイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるkousuke inamoto
 
20120629Slide at Sojo univ
20120629Slide at Sojo univ20120629Slide at Sojo univ
20120629Slide at Sojo univkousuke inamoto
 
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Takaaki Umada
 
20161026_クリエイティブミーティング
20161026_クリエイティブミーティング20161026_クリエイティブミーティング
20161026_クリエイティブミーティングkousuke inamoto
 
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」shinya ogata
 

Destacado (6)

HTML5勉強会@福岡
HTML5勉強会@福岡HTML5勉強会@福岡
HTML5勉強会@福岡
 
サイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるサイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考える
 
20120629Slide at Sojo univ
20120629Slide at Sojo univ20120629Slide at Sojo univ
20120629Slide at Sojo univ
 
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Design Sprint ガイドブック v2
Design Sprint ガイドブック v2
 
20161026_クリエイティブミーティング
20161026_クリエイティブミーティング20161026_クリエイティブミーティング
20161026_クリエイティブミーティング
 
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
 

Similar a CSS3がやってきた

2017: A CSS Design Odyssey
2017: A CSS Design Odyssey2017: A CSS Design Odyssey
2017: A CSS Design OdysseyKenjiro Kubota
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
シラサギ勉強会1201
シラサギ勉強会1201シラサギ勉強会1201
シラサギ勉強会1201okusakazuya
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS知己 久保
 
Css3について
Css3についてCss3について
Css3についてginzow
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Yasuhito Yabe
 
Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5Microsoft
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるYutaro Miyazaki
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Shotaro Suzuki
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)Shin Takeuchi
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目Takashi Endo
 
css3講座 (初心者向け)
css3講座 (初心者向け)css3講座 (初心者向け)
css3講座 (初心者向け)Kohki Nakaji
 
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた今更ながらCSS3を試してみた
今更ながらCSS3を試してみたTakao Sumitomo
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Horiguchi Seito
 
Web講座 第2回
Web講座 第2回Web講座 第2回
Web講座 第2回nanametown
 

Similar a CSS3がやってきた (20)

2017: A CSS Design Odyssey
2017: A CSS Design Odyssey2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
シラサギ勉強会1201
シラサギ勉強会1201シラサギ勉強会1201
シラサギ勉強会1201
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
 
CSS設計
CSS設計CSS設計
CSS設計
 
Css
CssCss
Css
 
Basic CSS Introduction
Basic CSS IntroductionBasic CSS Introduction
Basic CSS Introduction
 
Css3について
Css3についてCss3について
Css3について
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5Internet Explorer 10とマイクロソフトにとってのHTML5
Internet Explorer 10とマイクロソフトにとってのHTML5
 
Sass 超入門
Sass 超入門Sass 超入門
Sass 超入門
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
 
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
 
css3講座 (初心者向け)
css3講座 (初心者向け)css3講座 (初心者向け)
css3講座 (初心者向け)
 
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
Web講座 第2回
Web講座 第2回Web講座 第2回
Web講座 第2回
 

CSS3がやってきた