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

1,903 views
1,793 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,903
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • 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

    ×