O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

HTML5での制作、いつから始める?

Mais Conteúdo rRelacionado

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

HTML5での制作、いつから始める?

  1. 1. HTML5での制作、いつから始める? 1
  2. 2. 目次 •自己紹介 •現状どうですか? •HTML5を知ろう! •HTML5のマークアップを知ろう! •HTML5 & Wordpress のメリット・デメリット 2
  3. 3. 自己紹介 (1/3) 名前 森 史憲(もり ふみのり) 出身 鹿児島市 容姿 丸メガネ、丸ぼうず 3
  4. 4. 自己紹介 (2/3) フリーランスのコーダー (Wordpress歴は1年くらい…) 雑誌記事 / 書籍執筆 ★HTML5マークアップ入門 技術評論社 ★HTML5&CSS3 ポケットリファレンス 技術評論社(執筆中) Webサイト制作技術講師 ★森さんコーディングの会 4
  5. 5. 自己紹介 (3/3) カレーLOVE! カレー屋 匠 ★匠盛 (和牛・黒豚あいがけ) ビールLOVE! 城山観光ホテルの地ビール ★ベルギーホワイト ★スタウトエール黒糖 チョコレートLOVE! パティスリー・ヤナギムラ ★ 摩チョコチップス 5
  6. 6. 現状どうですか? 6
  7. 7. モバイル端末向け Webサイトは すでにHTML5 iOSもAndroidも HTML5を取り込むのが早かった 7
  8. 8. レスポンシブWeb デザインで制作する ならHTML5 link要素のmedia属性で ページの表示幅によって読み込む スタイルを変更できる 8
  9. 9. 電子書籍を作るとき ePub3.0を利用するなら HTML5 iOS, Androidアプリ:Kinoppy 電子書籍リーダー:kobo touch、          Sony Reader Webアプリ:Yahooブックストア Google Chrome拡張機能:Readium はePub3対応。 9
  10. 10. いつから始める? 10
  11. 11. すでに始まってる! 11
  12. 12. アタヽ(д`ヽ彡ノ´д)ノフタ 12
  13. 13. … 13
  14. 14. で、HTML5って何? ( ゚д゚)ポカーン 14
  15. 15. HTML5を知ろう! 15
  16. 16. HTML5を知ろう! •なりたち •マークアップと関連仕様 •注目される理由 •HTML5の可能性 16
  17. 17. なりたち • W3C:データ XHTML 2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は  別の仕様書として独立) 17
  18. 18. なりたち • W3C:データ XHTML 2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は  別の仕様書として独立) 17
  19. 19. なりたち • W3C:データ XHTML 2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は  別の仕様書として独立) 17
  20. 20. なりたち • W3C:データ XHTML 2.0を策定 実際の用途にあわない • WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様 • W3CがWeb Applications 1.0を HTML5として採用 (マークアップ以外は  別の仕様書として独立) 17
  21. 21. マークアップと関連仕様 • HTML5だと考えられているマーク アップは全体の一部 • Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん 18
  22. 22. マークアップと関連仕様 • HTML5だと考えられているマーク アップは全体の一部 • Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん 18
  23. 23. 注目される理由 • アプリを開発する言語を標準化 • iOS - Objective-C • Android - Java • PC, iOS, Android - HTML, CSS, Javascript 19
  24. 24. HTML5の可能性 • ブラウザのOS化 ★Firefox OS (モバイル、タブレット) • 電子書籍の軽量化 ★ePub3.0 • アプリ配布手数料を抑える ★App StoreやGoogle Playを 通さない 20
  25. 25. HTML5はすごいけど… 21
  26. 26. 仕様が多すぎ! ヽ(`Д´)ノウワァァァン!! 22
  27. 27. 無理せずマークアップから はじめましょう。 23
  28. 28. HTML5のマークアップを知ろう! 24
  29. 29. HTML5のマークアップを知ろう! •DOCTYPE宣言を変える •HTML、XHTMLどちらの書き方でもOK •セクションでグループ化する •ヘッダ/フッタはセクションの中に 25
  30. 30. 【その1】DOCTYPE宣言を変える HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//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. 31. 【その1】DOCTYPE宣言を変える HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//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. 32. 【その2】 HTML、XHTMLどちらの書き方でもOK • HTML4.01やXHTML1.0の文法を引き継いでます ★<br>、<BR>、<br />のいずれでもOK ★終了タグの省略も可能 ★制作メンバー内で混乱しないように統一したほうがいいですよ 27
  33. 33. 【その3】 セクションでグループ化する • HTML4やXHTML1ではdivでグループ化する • HTML5ではセクション周りの要素でグループ化する ★divは意味を持たないグループの枠。意味を持つグループの枠には article, aside, section, navを利用。 article ページの主題として独立している内容 aside ページの主題に関連する内容 section 一般的なセクション nav 主要なリンク集 28
  34. 34. 【その3】 セクションでグループ化する <div id=”header”>ヘッダ</div> <div id=”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. 35. 【その3】 セクションでグループ化する <div id=”header”>ヘッダ</div> <nav id=”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. 36. 【その4】 ヘッダ/フッタはセクションの中に <div id=”header”>ヘッダ</div> <nav id=”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. 37. 【その4】 ヘッダ/フッタはセクションの中に <header id=”header”>ヘッダ</header> <nav id=”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. 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. 39.        ____      /͡  ͡\    /( ●)  (●)\   /::::::͡(__人__)͡:::::\   HTML5のマー クアップは 34
  40. 40. HTML5 & Wordpressの メリット・デメリット 35
  41. 41. メリット • Wordpress 3.4はデフォルトテーマ がHTML5 & レスポンシブWebデザ イン! • ネット上にHTML5で作られた Wordpressのテーマがたくさん! 36
  42. 42. デメリット • コンテンツ領域にはセクション周 りの要素を使わないほうがいい ★WYSIWYGエディタのボタンで はセクション周りの要素は使用 できない 37
  43. 43. Wordpressは生きたHTML5を 勉強できる! キタ━━━━(゚ ゚)━━━━ !!!!! 38
  44. 44. まとめ! • HTML5はすでに使えるし、使われているよ! • HTML5関連の仕様は多い! • まず始めるならマークアップ! • WordpressはHTML5の使い方を知るのに便利! 39
  45. 45. Webはいつも未完成。 40
  46. 46. 手を動かして楽しみましょう! 41
  47. 47. ご清聴どうもありがとうございました! 42

Notas do Editor

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×