1. HTML5 for beginners
2013/6/21
株式会社オープンウェブ・テクノロ
ジー
代表取締役
白石俊平

2. 自己紹介
• 白石俊平と申します。
• コミュニティhtml5j.org管理人（会員数5000名超）
• HTML5とか勉強会主催（毎月一回、100名を動員）
• Google API Expert (HTML5)
• Microsoft Most Valuable Professional (IE9)
• Twitter: @Shumpei

3. Web技術の基礎知識

4. HTML5という「仕様」
 HTML（Hyper Text Markup Language）の最新バー
ジョン
 W3C（World Wide Web Consortium）で標準化作業中
仕様書はWebで公開されている

5. Webを進化させつつ安定させる
HTML
Living Standard
HTML5
WHATWGによる
バージョン
W3Cによる
安定バージョン
HTML5.1
W3Cによる
次期バージョン

6. HTML5仕様のスケジュール
2012年Q4 HTML5.0が勧告
候補に
2014年 HTML5.0勧告
2016年 HTML5.1勧告
2012年9月20日、HTML5仕様のスケジュールが発表された！

7. 「狭義」のHTML5と「広義」のHTML5

8. Web関連技術は広く、深い。
HTML要素数:109+
JavaScript API仕様: 7o+
CSS関連仕様: 65+

9. Web関連技術は広く、深い。
HTML要素数:109+
JavaScript API仕様: 7o+
CSS関連仕様: 65+

10. HTML4でもできたこと
• CSSによるスタイル定義・外部スタイル読み込み
• JavaScriptによるプログラミング・外部JS読み込み
• テキストの修飾
– 見出し/段落/引用/強調...
• リスト
• インラインフレーム
• プラグインの読み込み
• クリッカブルマップ
• 表組み
• フォーム
• ...

11. HTML5でできるようになったこ
と
• マルチメディア
• コンテンツの構造化
• ルビふり
• よりリッチなフォーム要素
• 動的なグラフィック

12. マルチメディア
<video src="..."></video>
<audio src="..."></audio>

13. コンテンツの構造化
<div class=”header”>
<h1>Site Title</h1>
<div class=”site-nav”>
<ul><li>Home</li><li>Profile</li><li>Settings</li></ul>
</div>
</div>
<div class=”content”>
<div class=”article”>Main Content
<div class=”date”>2009/11/23に投稿</div>
<div class=”address”>
連絡は<a href=”mailto:a@a.jp”>こちら</a></div>
</div>
</div>
<div class=”footer”>
<div class=”copyright”>Copyright ...</div>
</div>
HTML4のマークアップ例

14. コンテンツの構造化
<header>
<h1>Site Title</h1>
<nav class=”site-nav”>
<ul><li>Home</li><li>Profile</li><li>Settings</li></ul>
</nav>
</header>
<div class=”content”>
<article class=”article”>Main Content
<time datetime="2009/11/23">2009/11/23に投稿</time>
<address class=”address”>
連絡は<a href=”mailto:a@a.jp”>こちら</a></address>
</article>
</div>
<footer>
<small class=”copyright”>Copyright ...</small>
</footor>
HTML5のマークアップ例

15. ルビふり
<ruby>白石<rt>しらいし</rt></ruby>

16. よりリッチなフォーム要素
<input>要素のtype属性が大幅に拡充
tel week
search time
url datetime-local
email number
datetime range
date color
month
HTML5 Formsデモ

17. 動的なグラフィック
• <canvas>・・・2D/3Dビットマップグラ
フィック
– 3Dで使用される技術は特に「WebGL」と呼ば
れる
• <svg>・・・ベクターグラフィック

18. Webcam Toy
• カメラからの画像取り込み＆リアルタイ
ムエフェクト

19. ChronoZoom
• 全宇宙史に関する様々なリソースを参照
できるWebアプリ

20. ROME
• 3D表現を効果的に活かしたインタラク
ティブ・ムービー

21. ご清聴ありがとうございまし
た。