SlideShare uma empresa 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
 

Mais conteúdo relacionado

Destaque

サイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考えるサイトマップ(サイトストラクチャ)を考える
サイトマップ(サイトストラクチャ)を考える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
 

Destaque (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研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
 

Semelhante 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
 

Semelhante 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回
 

Último

Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 

Último (9)

Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 

CSS3がやってきた