Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to HTML5, きちんと。
Similar to HTML5, きちんと。 (20)
Recently uploaded
Recently uploaded (9)
HTML5, きちんと。
- 7. 「HTML5 & CSS3 で Web は変わるのか？」
- 10. 本日のテーマ：HTML5
- 11. まだまだ情報が少ない。
- 13. HTML5とは？ HTML5のセクション XHTMLはどうなる？ 勧告はいつごろ？ もうひとつの目的 どう使っていくか HTML5の新機能
- 14. HTML5 とは？
- 16. HTML4 や XHTML1 は 「文書」の作成が目的だった。
- 18. これまでのあゆみ
- 19. 1998 年 2 月 XML 1.0 が勧告。
- 20. W3C は XML への移行を計画。
- 22. XHTML 1.0 ― HTML4 を XML 化 XHTML 1.1 ― 機能を細分化 XHTML 2.0 ― 新しく作り直し
- 24. 「XHTML+CSS」が広まる。
- 27. Web アプリが台頭し 今の HTML では機能不足に。
- 29. 2004 年 6 月 W3C のワークショップにて
- 30. ベンダー「HTML の拡張を！」
- 31. W3C「うちではやりませんが お好きにどうぞ。」
- 32. Apple, Mozilla, Opera WHATWG を立ち上げる。
- 35. 2006 年 10 月 Tim Berners-Lee のブログにて
- 38. 2007 年 3 月 新 HTML WG 設立。
- 40. 2009 年 5 月 Google I/O で大プッシュ。
- 41. 少しずつ実装も進んでいる。
- 42. XHTML はどうなる？
- 43. XHTML2 WG が 2009 年末で活動終了と発表。
- 44. XHTML 2.0 は終了。 でも、XHTML はなくならない。
- 45. HTML5 は XML として 扱うことも可能（XHTML5）
- 46. HTML5 の HTML 構文でも 「XMLっぽく」書けるように。
- 47. <img> ← 今までの HTML <img /> ← こっちも OK に！ ※ 混在もできます。
- 48. というわけで、ご心配なく。
- 50. もうひとつの目的
- 52. 1. ブラウザーの互換性
- 54. Web アプリの開発には JavaScript や DOM が不可欠。
- 57. 非互換を生む 2 つの「ない」
- 62. 2. 既存の実装との互換性
- 66. HTML5 の新機能
- 68. <canvas>
- 74. 最新技術のショーケース。
- 78. <video src=“intro_html5.vid”> <a …> ダウンロード </a> </video>
- 80. プラグインじゃないので CSS や SVG と組み合わせが可能。
- 81. マークアップ
- 83. <canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
- 85. <div id=“header”> → <header> <div class=“section”> → <section>
- 86. 定型句はよりシンプルに。
- 87. <!DOCTYPE html>
- 89. 古いブラウザーでも機能する。
- 90. フォームの拡張も。
- 91. <input type=text ...> <input type=password ...>
- 92. <input type=email ...> <input type=range ...> <input type=color ...> <input type=datetime ...> ...
- 93. 名 前 (必須)： メール (必須)：
- 94. <input type=“text” ... required> <input type=“email” ... required>
- 95. サイト内検索： キーワードを入力
- 96. <input type=“search” placeholder=“キーワードを入力”>
- 97. HTML5 のセクション
- 98. 文書構造をより明示的に表せる。
- 100. <section> <h3> section 要素 </h3> <p> 章や節などを表す。</p> ... </section> <section> <h3> nav 要素 </h3> <p> 主要なナビゲーションを表す。</p> ... </section>
- 101. <section> <h3> article 要素 </h3> <p> 自己完結するセクションを表す。</p> <section> <h4> サンプル </h4> ... </section> </section>
- 102. <nav> 主要なナビゲーション
- 103. <nav class=“global”> <ul> <li> <a ...> ホーム </a> <li> <a ...> お知らせ </a> <li> <a ...> HTML5 Niteって？ </a> <li> <a ...> これまでのNite </a> <li> <a ...> お問い合わせ </a> </ul> </nav>
- 104. UA が <nav> を利用することで アクセシビリティも高まる？
- 106. <article class=“entry” id=“vol40”> <h2> CSS Nite in Ginza, Vol. 40 </h2> <p> 4周年記念となるVol.40では… </p> <section> <h3> 事前登録について </h3> ... </section> ... </article>
- 107. フィードの <item> や <entry> などをイメージ。
- 109. <section> <h2> nav 要素 </h2> <p> 主要なナビゲーションを表します。 </p> <aside> <p> 海外では「navi」よりも 「nav」の方が多いみたいです。</p> </aside> </section>
- 110. <header> ... </header> <div class=wrap> <div class=main> ... </div> <aside class=sidebar> ... </aside> </div> <footer> ... </footer>
- 112. <article> <h1> HTML5 のセクション </h1> <nav> ... </nav> ... <section> <h2> nav 要素 </h2> ... <aside> <h3>「navi」ではなく「nav」</h3> ... </aside> ... </section> ...
- 113. HTML5 のセクション (見出しなしの目次) section 要素 nav 要素 「navi」ではなく「nav」 article 要素 aside 要素
- 114. 見出しだけでも アウトラインはできる。
- 115. <h1> HTML5 のセクション </h1> <h2> section 要素 </h2> <h2> nav 要素 </h2> <h3>「navi」ではなく「nav」</h3> <h2> article 要素 </h2> ...
- 116. HTML5 のセクション section 要素 nav 要素 「navi」ではなく「nav」 article 要素 aside 要素
- 117. 注意！
- 119. 特に <section> は気をつけて。
- 120. <article class=“entry”> <header> <h2> タイトル </h2> </header> <section class=“body”> <p> 本文 </p> <p> テキストテキスト </p> </section> <footer> ... </footer> </article>
- 121. <header id=logo> <section> <h1> <img src=logo ...> </h1> </section> </header>
- 122. <section id=wrapper> <section id=main> <article> <section> <header> ... </header> ... </section> </article> </section> ... </section>
- 124. レイアウト目的なら <div> で。
- 125. 勧告はいつごろ？
- 127. 「2010 年 9 月」とある。 でも、むりです。
- 128. 「勧告」とは？
- 129. 仕様がすべて実装され すぐに使える状態。
- 130. 実装が終わるのは？
- 131. 「2022 年」と……
- 132. 「使えないじゃん！」
- 133. そんなことはないです。
- 135. 勧告されていませんが 広く使われてます。
- 138. 2012 年あたりになる？
- 139. 実装状況を知るには？
- 140. 1. 開発者向けサイト
- 143. 2. 仕様書のステータス表示
- 146. どう使っていくか
- 151. 1. JavaScript で対処
- 153. IE に <canvas> を。
- 156. 2. 対応度合いにあわせて利用
- 160. 難しいことは確か。
- 161. HTML5 や CSS3 は 勧告までとても時間がかかる。
- 163. 今は何をすれば？
- 165. 「<article> と <section> を 区別する必要はあるのか。」
- 168. 使う際には、リスクの認識を。
- 169. おわりに
- 170. 「情報が少ない」といいました。
- 173. ありがとうございました。