Download as KEY, PPTX
Uploaded byFuminori Mori
HTML5での制作、いつから始める？
2012-07-14に鹿児島市のマルヤガーデンズで開催されたWordVolcanoというイベントで行ったHTML5とWordpressについての講演スライドです。
HTML5での制作、いつから始める？
- 1.
- 2.
- 3.
- 4. 自己紹介 (2/3) フリーランスのコーダー （Wordpress歴は1年くらい…） 雑誌記事 /書籍執筆 ★HTML5マークアップ入門 技術評論社 ★HTML5&CSS3 ポケットリファレンス 技術評論社（執筆中） Webサイト制作技術講師 ★森さんコーディングの会 4
- 5. 自己紹介 (3/3) カレーLOVE! カレー屋 匠 ★匠盛 （和牛・黒豚あいがけ） ビールLOVE! 城山観光ホテルの地ビール ★ベルギーホワイト ★スタウトエール黒糖 チョコレートLOVE! パティスリー・ヤナギムラ ★ 摩チョコチップス 5
- 6. 現状どうですか？ 6
- 7.
- 8.
- 9. 電子書籍を作るとき ePub3.0を利用するなら HTML5 iOS, Androidアプリ：Kinoppy 電子書籍リーダー：kobo touch、 SonyReader Webアプリ：Yahooブックストア Google Chrome拡張機能：Readium はePub3対応。 9
- 10. いつから始める？ 10
- 11. すでに始まってる！ 11
- 12.
- 13.
- 14. で、HTML5って何？ (ﾟдﾟ)ﾎﾟｶｰﾝ 14
- 15. HTML5を知ろう！ 15
- 16.
- 17. なりたち • W3C：データ XHTML2.0を策定 実際の用途にあわない • WHATWG：アプリケーション Web Applications 1.0を策定 （現在はHTMLに改名） ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 （マークアップ以外は 別の仕様書として独立） 17
- 18. なりたち • W3C：データ XHTML2.0を策定 実際の用途にあわない • WHATWG：アプリケーション Web Applications 1.0を策定 （現在はHTMLに改名） ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 （マークアップ以外は 別の仕様書として独立） 17
- 19. なりたち • W3C：データ XHTML2.0を策定 実際の用途にあわない • WHATWG：アプリケーション Web Applications 1.0を策定 （現在はHTMLに改名） ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 （マークアップ以外は 別の仕様書として独立） 17
- 20. なりたち • W3C：データ XHTML2.0を策定 実際の用途にあわない • WHATWG：アプリケーション Web Applications 1.0を策定 （現在はHTMLに改名） ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 （マークアップ以外は 別の仕様書として独立） 17
- 21. マークアップと関連仕様 • HTML5だと考えられているマーク アップは全体の一部 •Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん 18
- 22. マークアップと関連仕様 • HTML5だと考えられているマーク アップは全体の一部 •Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん 18
- 23. 注目される理由 • アプリを開発する言語を標準化 •iOS - Objective-C • Android - Java • PC, iOS, Android - HTML, CSS, Javascript 19
- 24. HTML5の可能性 • ブラウザのOS化 ★FirefoxOS （モバイル、タブレット） • 電子書籍の軽量化 ★ePub3.0 • アプリ配布手数料を抑える ★App StoreやGoogle Playを 通さない 20
- 25. HTML5はすごいけど… 21
- 26.
- 27.
- 28.
- 29.
- 30. 【その１】DOCTYPE宣言を変える HTML4.01 Transitional <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!DOCTYPE html> 26
- 31. 【その１】DOCTYPE宣言を変える HTML4.01 Transitional <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!DOCTYPE html> 26
- 32. 【その２】 HTML、XHTMLどちらの書き方でもOK • HTML4.01やXHTML1.0の文法を引き継いでます ★<br>、<BR>、<br />のいずれでもOK ★終了タグの省略も可能 ★制作メンバー内で混乱しないように統一したほうがいいですよ 27
- 33. 【その３】 セクションでグループ化する • HTML4やXHTML1ではdivでグループ化する •HTML5ではセクション周りの要素でグループ化する ★divは意味を持たないグループの枠。意味を持つグループの枠には article, aside, section, navを利用。 article ページの主題として独立している内容 aside ページの主題に関連する内容 section 一般的なセクション nav 主要なリンク集 28
- 34. 【その３】 セクションでグループ化する <div id=”header”>ヘッダ</div> <divid=”nav”>グローバルナビゲーション</div> <h1>ページタイトル</h1> <p>本文</p> <h2>見出し</h2> <p>本文</p> <div id=”nav_sub”>サブナビゲーション</div> <div id=”related_information”>関連情報</div> <div id=”footer”>フッタ</div> 29
- 35. 【その３】 セクションでグループ化する <div id=”header”>ヘッダ</div> <navid=”nav”>グローバルナビゲーション</nav> <article> <h1>ページタイトル</h1> <p>本文本文本文本文</p> <h2>見出し</h2> <p>本文</p> </article> <nav id=”nav_sub”>サブナビゲーション</nav> <aside id=”related_information”>関連情報</aside> <div id=”footer”>フッタ</div> 30
- 36. 【その４】 ヘッダ/フッタはセクションの中に <div id=”header”>ヘッダ</div> <navid=”nav”>グローバルナビゲーション</nav> <article> <h1>ページタイトル</h1> <p>本文本文本文本文</p> <h2>見出し</h2> <p>本文</p> </article> <nav id=”nav_sub”>サブナビゲーション</nav> <aside id=”related_information”>関連情報</aside> <div id=”footer”>フッタ</div> 31
- 37. 【その４】 ヘッダ/フッタはセクションの中に <header id=”header”>ヘッダ</header> <navid=”nav”>グローバルナビゲーション</nav> <article> <header class=”header_contents”> <h1>ページタイトル</h1> <p>本文本文本文本文</p> </header> <h2>見出し</h2> <p>本文</p> </article> <nav id=”nav_sub”>サブナビゲーション</nav> <aside id=”related_information”>関連情報</aside> <footer id=”footer”>フッタ</footer> 32
- 38. 【その他】IE対応 • IE6∼IE8はHTML5の新しい要素を認識しないので以下の対応が必要です。 ★Javascriptで新要素をつくる http://code.google.com/p/html5shiv/ からダウンロードして 印刷対応済みのhtml5shiv-printshiv.jsをhtmlファイルに読み込む ★CSSでデフォルトのスタイルづけをする http://necolas.github.com/normalize.css/ からダウンロードして normalize.cssをhtmlファイルに読み込む • いろいろノウハウの詰まったテンプレートを落とすのもよいです。 http://www.initializr.com/ 33
- 39. ＿＿＿_ ／͡ ͡＼ ／（ ●） （●）＼ ／::::::͡（__人__）͡:::::＼ HTML5のマー クアップは 34
- 40. HTML5 & Wordpressの メリット・デメリット 35
- 41. メリット • Wordpress 3.4はデフォルトテーマ がHTML5 & レスポンシブWebデザ イン！ • ネット上にHTML5で作られた Wordpressのテーマがたくさん！ 36
- 42. デメリット • コンテンツ領域にはセクション周 りの要素を使わないほうがいい ★WYSIWYGエディタのボタンで はセクション周りの要素は使用 できない 37
- 43. Wordpressは生きたHTML5を 勉強できる！ ｷﾀ━━━━(ﾟ ﾟ)━━━━ !!!!! 38
- 44. まとめ！ • HTML5はすでに使えるし、使われているよ！ • HTML5関連の仕様は多い！ •まず始めるならマークアップ！ • WordpressはHTML5の使い方を知るのに便利！ 39
- 45. Webはいつも未完成。 40
- 46.
- 47.