SlideShare ist ein Scribd-Unternehmen logo
1 von 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
 

Weitere ähnliche Inhalte

Andere mochten auch

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

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

Ähnlich wie 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
 

Ähnlich wie 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回
 

Kürzlich hochgeladen

知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Hiroshi Tomioka
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 

Kürzlich hochgeladen (11)

知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

CSS3がやってきた