HTML5+CSS3 (入門編)
2 likes1,384 views
This document discusses HTML5 and CSS3. It provides an overview of new HTML5 features like the JavaScript API, Web Storage, Web Sockets, and new elements. It also discusses the CSS3 features of transitions, animations, and transforms. The document outlines the W3C recommendation process for HTML5 and provides code examples of basic HTML5 document structure using semantic elements like header, nav, article, and footer. It recommends polyfills and frameworks to enhance browser support, such as jQuery, Modernizr, and HTML5Shiv. Finally, it lists some additional HTML5 and CSS3 learning resources.
![<!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>](https://image.slidesharecdn.com/html5css3-120127005446-phpapp01/85/HTML5-CSS3-5-320.jpg)
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. HTML5 2011 5 W3C
- 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>
- 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
- 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 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