Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5での制作、いつから始める?                     1
目次•自己紹介•現状どうですか?•HTML5を知ろう!•HTML5のマークアップを知ろう!•HTML5 & Wordpress のメリット・デメリット                 2
自己紹介 (1/3)名前森 史憲(もり ふみのり)出身鹿児島市容姿丸メガネ、丸ぼうず                3
自己紹介 (2/3)フリーランスのコーダー(Wordpress歴は1年くらい…)雑誌記事 / 書籍執筆★HTML5マークアップ入門 技術評論社★HTML5&CSS3 ポケットリファレンス 技術評論社(執筆中)Webサイト制作技術講師★森さんコー...
自己紹介 (3/3)カレーLOVE!カレー屋 匠 ★匠盛  (和牛・黒豚あいがけ)ビールLOVE!城山観光ホテルの地ビール ★ベルギーホワイト ★スタウトエール黒糖チョコレートLOVE!パティスリー・ヤナギムラ ★ 摩チョコチップス      ...
現状どうですか?   6
モバイル端末向けWebサイトはすでにHTML5iOSもAndroidもHTML5を取り込むのが早かった                   7
レスポンシブWebデザインで制作するならHTML5link要素のmedia属性でページの表示幅によって読み込むスタイルを変更できる                  8
電子書籍を作るときePub3.0を利用するならHTML5iOS, Androidアプリ:Kinoppy電子書籍リーダー:kobo touch、         Sony ReaderWebアプリ:YahooブックストアGoogle Chrome...
いつから始める?   10
すでに始まってる!    11
アタヽ(д`ヽ彡ノ´д)ノフタ       12
…13
で、HTML5って何?  ( ゚д゚)ポカーン       14
HTML5を知ろう!    15
HTML5を知ろう!•なりたち•マークアップと関連仕様•注目される理由•HTML5の可能性             16
なりたち• W3C:データ XHTML 2.0を策定 実際の用途にあわない• WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様• W3CがWeb Appl...
なりたち• W3C:データ XHTML 2.0を策定 実際の用途にあわない• WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様• W3CがWeb Appl...
なりたち• W3C:データ XHTML 2.0を策定 実際の用途にあわない• WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様• W3CがWeb Appl...
なりたち• W3C:データ XHTML 2.0を策定 実際の用途にあわない• WHATWG:アプリケーション Web Applications 1.0を策定 (現在はHTMLに改名) ブラウザベンダーが望む用途の仕様• W3CがWeb Appl...
マークアップと関連仕様• HTML5だと考えられているマーク アップは全体の一部• Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん                         18
マークアップと関連仕様• HTML5だと考えられているマーク アップは全体の一部• Javascriptで実装するAPI群、 その他の様々な仕様が盛りだくさん                         18
注目される理由• アプリを開発する言語を標準化 • iOS - Objective-C • Android - Java • PC, iOS, Android   - HTML, CSS, Javascript                 ...
HTML5の可能性• ブラウザのOS化 ★Firefox OS  (モバイル、タブレット)• 電子書籍の軽量化 ★ePub3.0• アプリ配布手数料を抑える ★App StoreやGoogle Playを  通さない              ...
HTML5はすごいけど…     21
仕様が多すぎ!ヽ(`Д´)ノウワァァァン!!       22
無理せずマークアップから はじめましょう。     23
HTML5のマークアップを知ろう!        24
HTML5のマークアップを知ろう!•DOCTYPE宣言を変える•HTML、XHTMLどちらの書き方でもOK•セクションでグループ化する•ヘッダ/フッタはセクションの中に                 25
【その1】DOCTYPE宣言を変えるHTML4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T...
【その1】DOCTYPE宣言を変えるHTML4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T...
【その2】 HTML、XHTMLどちらの書き方でもOK• HTML4.01やXHTML1.0の文法を引き継いでます ★<br>、<BR>、<br />のいずれでもOK ★終了タグの省略も可能 ★制作メンバー内で混乱しないように統一したほうがいい...
【その3】 セクションでグループ化する• HTML4やXHTML1ではdivでグループ化する• HTML5ではセクション周りの要素でグループ化する ★divは意味を持たないグループの枠。意味を持つグループの枠には  article, aside...
【その3】 セクションでグループ化する<div id=”header”>ヘッダ</div><div id=”nav”>グローバルナビゲーション</div><h1>ページタイトル</h1><p>本文</p><h2>見出し</h2><p>本文</p...
【その3】 セクションでグループ化する<div id=”header”>ヘッダ</div><nav id=”nav”>グローバルナビゲーション</nav><article><h1>ページタイトル</h1><p>本文本文本文本文</p><h2>見...
【その4】 ヘッダ/フッタはセクションの中に<div id=”header”>ヘッダ</div><nav id=”nav”>グローバルナビゲーション</nav><article><h1>ページタイトル</h1><p>本文本文本文本文</p><h...
【その4】 ヘッダ/フッタはセクションの中に<header id=”header”>ヘッダ</header><nav id=”nav”>グローバルナビゲーション</nav><article><header class=”header_conte...
【その他】IE対応• IE6∼IE8はHTML5の新しい要素を認識しないので以下の対応が必要です。 ★Javascriptで新要素をつくる   http://code.google.com/p/html5shiv/ からダウンロードして   印...
       ____     /͡  ͡\   /( ●)  (●)\  /::::::͡(__人__)͡:::::\   HTML5のマークアップは                 34
HTML5 & Wordpressの  メリット・デメリット        35
メリット• Wordpress 3.4はデフォルトテーマ がHTML5 & レスポンシブWebデザ イン!• ネット上にHTML5で作られた Wordpressのテーマがたくさん!                           36
デメリット• コンテンツ領域にはセクション周りの要素を使わないほうがいい ★WYSIWYGエディタのボタンで  はセクション周りの要素は使用  できない                     37
Wordpressは生きたHTML5を     勉強できる!キタ━━━━(゚ ゚)━━━━ !!!!!          38
まとめ!• HTML5はすでに使えるし、使われているよ!• HTML5関連の仕様は多い!• まず始めるならマークアップ!• WordpressはHTML5の使い方を知るのに便利!                   39
Webはいつも未完成。     40
手を動かして楽しみましょう!      41
ご清聴どうもありがとうございました!        42
Upcoming SlideShare
Loading in …5
×

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

2,138 views

Published on

2012-07-14に鹿児島市のマルヤガーデンズで開催されたWordVolcanoというイベントで行ったHTML5とWordpressについての講演スライドです。

Published in: Technology
  • Be the first to comment

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サイトはすでにHTML5iOSもAndroidもHTML5を取り込むのが早かった 7
  8. 8. レスポンシブWebデザインで制作するならHTML5link要素のmedia属性でページの表示幅によって読み込むスタイルを変更できる 8
  9. 9. 電子書籍を作るときePub3.0を利用するならHTML5iOS, Androidアプリ:Kinoppy電子書籍リーダー:kobo touch、         Sony ReaderWebアプリ: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

×