CSS3がやってきた

2,320 views

Published on

第1回のHTML5勉強会@福岡で話したCSS3についてのスライドです。

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,320
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS3がやってきた

  1. 1. CSS 3 がやってきた Kousuke (seven)Inamoto
  2. 2. Hello! <ul><li>稲本浩介(稲本せぶん) </li></ul><ul><li>30 ちゃい </li></ul><ul><li>株式会社ゼネラルアサヒ www.generalasahi.co.jp </li></ul><ul><li>Web ディレクター、マークアップエンジニア </li></ul><ul><li>IA </li></ul><ul><li>@sevenina </li></ul><ul><li>sevenstyleweb.com/blog </li></ul>
  3. 3. Agenda <ul><li>CSS 3 </li></ul><ul><li>Selector </li></ul><ul><li>MediaQuery </li></ul><ul><li>Effect </li></ul><ul><li>How to use CSS 3 </li></ul>
  4. 4. CSS Cascading Style Sheets とは、 HTML や XML の要素を どのように修飾(表示)するか を 指示する仕様であり、 W3C による勧告の一つ。 文書の構造と体裁を分離させるという理念 を実現する為に 提唱されたスタイルシートの、具体的な仕様の一つ。 (From wikipedia)
  5. 5. CSS3
  6. 7. CSS 3 ≒ CSS 2.1 + javascript
  7. 8. <ul><li>Selectors </li></ul><ul><li>Color </li></ul><ul><li>Namespaces </li></ul><ul><li>Media Query </li></ul><ul><li>Backgrounds & Borders </li></ul><ul><li>Template Layout </li></ul><ul><li>CSS Transitions </li></ul><ul><li>CSS Transform </li></ul><ul><li>CSS Animations </li></ul><ul><li>Fonts </li></ul><ul><li>Flexbox </li></ul><ul><li>Image Values </li></ul>>Module Cf:WebDesigning vol.100
  8. 9. Agenda <ul><li>CSS 3 </li></ul><ul><li>Selector </li></ul><ul><li>MediaQuery </li></ul><ul><li>Effect </li></ul><ul><li>How to use CSS 3 </li></ul>
  9. 10. Selectors Id や class を使わなくても、要素をつかむことができる。 無駄に id や class を使わなくてもよくなる HTML がきれい
  10. 11. Agenda <ul><li>CSS 3 </li></ul><ul><li>Selector </li></ul><ul><li>MediaQuery </li></ul><ul><li>Effect </li></ul><ul><li>How to use CSS 3 </li></ul>
  11. 12. MediaQuery スタイルシートを適用する条件が細かくなった 無駄に javascript を使わなくてもよくなる
  12. 13. Agenda <ul><li>CSS 3 </li></ul><ul><li>Selector </li></ul><ul><li>MediaQuery </li></ul><ul><li>Effect </li></ul><ul><li>How to use CSS 3 </li></ul>
  13. 14. Effect CSS Transitions, CSS Transform 無駄に javascript を使わなくてもよくなる Fonts 書体情報は書体情報で持たすことが可能
  14. 15. Agenda <ul><li>CSS 3 </li></ul><ul><li>Selector </li></ul><ul><li>MediaQuery </li></ul><ul><li>Effect </li></ul><ul><li>How to use CSS 3 </li></ul>
  15. 16. CSS 3 ≒ CSS 2.1 + javascript
  16. 17. Design ≠   Decoration CSS3
  17. 18. CSS2.1 CSS3
  18. 19. Effective Effect CSS3
  19. 20. sevenstyleweb.com/blog/ @sevenina

×