HTML5 + CSS3    (   )            ONE-UP Inc.                @hi_takaki
HTML5 HTML5   JavaScript API    CSS3HTML       Web Storage    CSS3          SVG DOM      Web Workers     Transition   Math...
HTML52011   5   W3C
HTML5 Working Draft)  (Last Call                ← 2011   5     W3C                ↓        (Candidate Recommendation)     ...
<!DOCTYPE html>        <html lang="ja">        <head>         <meta charset="utf-8" />         <title>       </title>     ...
BOLERPLATEhttp://html5boilerplate.com/
HTML5    http://www.html5.jp/
HTML5               NHKhttp://www.nhk.or.jp/studiopark/
HTML5        http://ji-sedai.jp/
HTML5                                                                    +!             Progressive Enhancement           ...
WEBhttp://hellofisher.com/
CSSSass     LessRuby   JavaScript
Polyfill (                         )jQueryModernizr - HTML5,CSS3          /html5shivRaphael.js - IE6,7,8THREE.JS - WebGLSen...
HTML5 Advent Calendar 2011 : ATNDhttp://atnd.org/events/21987  CSS3                                    CSS3http://matome.n...
Upcoming SlideShare
Loading in...5
×

HTML5+CSS3 (入門編)

2,461

Published on

社内勉強会のために作ったものを共有

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

No Downloads
Views
Total Views
2,461
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5+CSS3 (入門編)

  1. 1. HTML5 + CSS3 ( ) ONE-UP Inc. @hi_takaki
  2. 2. HTML5 HTML5 JavaScript API CSS3HTML Web Storage CSS3 SVG DOM Web Workers Transition MathML Web Socket Animation WebGL IndexedDB Transform
  3. 3. HTML52011 5 W3C
  4. 4. HTML5 Working Draft) (Last Call ← 2011 5 W3C ↓ (Candidate Recommendation) ↓ (Proposed Recommendation) ↓ W3C (Recommendation) W3C 2014
  5. 5. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title> </title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="wrapper"> <header> <hgroup> <h1> </h1> <h2> </h2> </hgroup> </header> <nav> <h2> </h2>HTML5 <ul> <li><a href="#"> <li><a href="#"> 1 </a></li> 2 </a></li> </ul> </nav> <article> <h2> </h2> <section> <h3> </h3> <p> </p> </section> <aside> <time datetime="2009 09-09 00:00 AM">2009 09-09 00:00 AM</time> </aside> </article> <footer> <p></p> </footer> </div> </body> </html>
  6. 6. BOLERPLATEhttp://html5boilerplate.com/
  7. 7. HTML5 http://www.html5.jp/
  8. 8. HTML5 NHKhttp://www.nhk.or.jp/studiopark/
  9. 9. HTML5 http://ji-sedai.jp/
  10. 10. HTML5 +! Progressive Enhancement ↓ Graceful DegradationHTML5&CSS3 with HTML5 6 Graceful Degradation Polyfill | http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html
  11. 11. WEBhttp://hellofisher.com/
  12. 12. CSSSass LessRuby JavaScript
  13. 13. Polyfill ( )jQueryModernizr - HTML5,CSS3 /html5shivRaphael.js - IE6,7,8THREE.JS - WebGLSencha/jQuery Mobile - UI FrameworkjQuery UI/Kendo UI - Web UI FrameworkUnderscor.js - ObjectBackbone.js - MVC (Twitter,Facebook )
  14. 14. HTML5 Advent Calendar 2011 : ATNDhttp://atnd.org/events/21987 CSS3 CSS3http://matome.naver.jp/odai/2132750704946539001Less & Sass Advent calendar 2011 : ATNDhttp://atnd.org/events/21919
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×