HTML5 + CSS3 ( ) ONE-UP Inc. @hi_takaki
HTML5 HTML5 JavaScript API CSS3 HTML Web Storage CSS3 SVG DOM Web Workers Transition MathML Web Socket Animation WebGL IndexedDB Transform
HTML5 2011 5 W3C
HTML5 Working Draft) (Last Call ← 2011 5 W3C ↓ (Candidate Recommendation) ↓ (Proposed Recommendation) ↓ W3C (Recommendation) W3C 2014
<!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>
BOLERPLATE http://html5boilerplate.com/
HTML5 http://www.html5.jp/
HTML5 NHK http://www.nhk.or.jp/studiopark/
HTML5 http://ji-sedai.jp/
HTML5 +! Progressive Enhancement ↓ Graceful Degradation HTML5&CSS3 with HTML5 6 Graceful Degradation Polyfill | http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html
WEB http://hellofisher.com/
CSS Sass Less Ruby JavaScript
Polyfill ( ) jQuery Modernizr - HTML5,CSS3 /html5shiv Raphael.js - IE6,7,8 THREE.JS - WebGL Sencha/jQuery Mobile - UI Framework jQuery UI/Kendo UI - Web UI Framework Underscor.js - Object Backbone.js - MVC (Twitter,Facebook )
HTML5 Advent Calendar 2011 : ATND http://atnd.org/events/21987 CSS3 CSS3 http://matome.naver.jp/odai/2132750704946539001 Less & Sass Advent calendar 2011 : ATND http://atnd.org/events/21919

HTML5+CSS3 (入門編)

  • 1.
    HTML5 + CSS3 ( ) ONE-UP Inc. @hi_takaki
  • 2.
    HTML5 HTML5 JavaScript API CSS3 HTML Web Storage CSS3 SVG DOM Web Workers Transition MathML Web Socket Animation WebGL IndexedDB Transform
  • 3.
  • 4.
    HTML5 Working Draft) (Last Call ← 2011 5 W3C ↓ (Candidate Recommendation) ↓ (Proposed Recommendation) ↓ W3C (Recommendation) W3C 2014
  • 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.
  • 7.
    HTML5 http://www.html5.jp/
  • 8.
    HTML5 NHK http://www.nhk.or.jp/studiopark/
  • 9.
    HTML5 http://ji-sedai.jp/
  • 10.
    HTML5 +! Progressive Enhancement ↓ Graceful Degradation HTML5&CSS3 with HTML5 6 Graceful Degradation Polyfill | http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html
  • 11.
  • 12.
    CSS Sass Less Ruby JavaScript
  • 13.
    Polyfill ( ) jQuery Modernizr - HTML5,CSS3 /html5shiv Raphael.js - IE6,7,8 THREE.JS - WebGL Sencha/jQuery Mobile - UI Framework jQuery UI/Kendo UI - Web UI Framework Underscor.js - Object Backbone.js - MVC (Twitter,Facebook )
  • 14.
    HTML5 Advent Calendar2011 : ATND http://atnd.org/events/21987 CSS3 CSS3 http://matome.naver.jp/odai/2132750704946539001 Less & Sass Advent calendar 2011 : ATND http://atnd.org/events/21919