ＨＴＭＬ５の変更点

追加された行はこの色です。
削除された行はこの色です。
ＨＴＭＬ５へ行く。
ＨＴＭＬ５の差分を削除
[[戻る>Chinsan's Laboratory Colum]]

~
~

**目次 [#d7bf5b68]
#contents

~
**参考 [#c0e8ee6c]
　　　　　[[参考：Wikipedia - HTML5>http://ja.wikipedia.org/wiki/HTML5]]~
　　　　　[[参考：HTML5.jp - HTML5解説サイト>http://www.html5.jp/]]~
　　　　　[[参考：Yahoo Developers Network - HTML5とは何かを簡単にまとめてみた>http://techblog.yahoo.co.jp/cat207/web_1/html5/]]~
　　　　　[[参考：CodeZine - HTML5が注目を浴びる理由とは？　ここが違う！サンプルで見るHTML5>http://codezine.jp/article/detail/5597]]~
　　　　　[[参考：多摩美メディアリテラシー - HTML5+CSS3 入門>http://yoppa.org/taumedia10/1695.html]]~
　　　　　[[参考：HTML5でサイトを作ろう - HTML5で製作されたサイト20で現状を知る!>http://www.html5-memo.com/html5-site/links/]]~
　　　　　[[参考：4Gamer.net - HTML5とJavaScriptによるアクションゲーム制作入門>http://www.4gamer.net/games/032/G003263/20110428001/]]~
　　　　　[[参考：1日でマスターできるHTML５まとめ。>http://matome.naver.jp/odai/2130703450443574201]]~
　　　　　[[参考：ゲームエンジンのGameSalad、HTML5に対応>http://www.gamebusiness.jp/article.php?id=3906]]~
　　　　　[[参考：DeNAが明かすHTML5でのソーシャルゲームの作り方>http://www.gamebusiness.jp/article.php?id=2919]]~
　　　　　[[参考：わずか数秒で自分用のHTML5のテンプレート一式を作成するサービス>http://coliss.com/articles/web-services/online-generator-html5-temple-initializr.html]]~
　　　　　[[参考：AdobeがHTML5のアニメーションツール『Adobe Edge』を無料で出してきた！>http://www.ideaxidea.com/archives/2011/08/adobeedge.html]]~
　　　　　[[参考：HTML5アニメ作成ソフト｢Hype｣登場>http://techwave.jp/archives/51665607.html]]~
　　　　　[[参考：HTML5の勉強に役立つチートシートやリファレンスのまとめ>http://coliss.com/articles/build-websites/operation/work/cheat-sheets-for-html5.html]]~
　　　　　[[参考：HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template>http://coliss.com/articles/build-websites/operation/work/html5-template-by-impressivewebs.html]]~
　　　　　[[参考：HTML5＋CSS3時代のプログレッシブ・エンハンスメント>http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html]]~
　　　　　[[参考：HTML5サイトを作ろう - WEBデザインの参考にしているまとめサイトをまとめました>http://www.html5-memo.com/design/design-matome/]]~
　　　　　[[参考：SlideShareで見つけたHTML5資料まとめ>http://20kaido.com/archives/2266374.html]]~
　　　　　[[参考：グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術　～HTML5、CSS3を採用したポイント>http://codezine.jp/article/detail/5747]]~
　　　　　[[参考：実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins>http://coliss.com/articles/build-websites/operation/work/html5-and-css3-framework-perkins.html]]

~
~

*HTML5 [#g7d49b4d]
**経緯 [#g8169c63]
　1999年にHTML4.0というバージョンになった後は、しばらく動きが見られませんでした。しかし、その後もホームページを取り巻く環境は進歩を続け、HTMLの周辺部分が発展を続けるという状態が続きました。しかし2010年、11年もの年月を経てHTMLがバージョンアップします。それがHTML5.0です。~
　HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト（草案）が発表された。現在、2014年までの正式勧告を目指して策定が行われている

**なぜHTML5 [#a58706fb]
-話題のきっかけの1つとして、iPhoneとiPadが挙げられるでしょう。iPhoneとiPadでは、Apple社の方針によりFlashを利用することができません。RIAを実現するためには、HTML5に頼らざるを得ないのです
-HTML5によってもたらされる本当のインパクトは、HTML、JavaScript、CSSといったウェブ標準のテクノロジーが、あらゆるコンピューター・アプリケーションのベースになる可能性を秘めている
-ウェブ標準のスキルだけで、ネイティブ・アプリケーションと変わらないアプリケーションを製作できます。デバイスごとにネイティブ・アプリケーション向けのプログラミング言語を学ぶ必要がない


-簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーションの仕様が加わったから。~
-HTMLは様々なOSで動作するクラスプラットフォームである~
//　　　といっても、まだまだ策定される範囲は狭く、第一歩といったところ。　
//　　　JAVAも同様に言われてきたことから、
-HTML5 が普及すれば Adobe Flash などのプラグインは不要になるという意見もある~

~
**[[2012年のWebはこう変わる>http://jp.techcrunch.com/archives/20111221guide-to-html5-14-predictions-2012/]] [#uf1abb78]
-Webサイト同士がお互いに接続できる
-ブラウザはプッシュノティフィケーションや位置情報、アプリのオフライン化をサポート
-HTML5で何でもできるのでダウンロードして使うアプリケーションの死
-Internet ExplorerとMicrosoftは信じられないほどクールになる
-ブラウザのメーカーがアプリストアをビジネスとして開店
-大ヒットゲームはWebGL化
-オフラインのアプリケーションキャッシュがHTML5アプリケーションの可用性とスピードを劇的に上げる
-Flashの広告にできたことは、すべてHTML5にもできるから、HTML5が広告を完全に支配するのは時間の問題
-Facebookはデスクトップとの統合がよりシームレスになる~
-ドラッグ&ドロップ、ファイルシステムへのアクセス、写真のシンク、デスクトップ上のウィジェット。これら（＋α）の機能により、デスクトップとブラウザの境界が薄れて、ソーシャルグラフへのアクセスや利用が、デスクトップにも自然に浸透
-AppleはHTML5のサウンドをモバイルSafariでサポートしない

~

** FlashとHTML５の比較 [#h21daa9c]
　　　　参考 - Flashだとここまでできる! HTML5とFlashの機能比較~
　　　　http://clockmaker.jp/blog/2010/02/flash-vs-html5/

~

*HTML5で可能なこと [#l01d5f4b]

　W3C の HTML5 Logo では以下のカテゴリを HTML5 に含めている。
-セマンティックス - HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット
-オフラインとストレージ - App Cache、Web Storage、Indexed Database、File API
-デバイスアクセス - Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
-接続性 - WebSocket、Server-Sent Event
-マルチメディア - audio, video要素
-3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL、CSS3 3D
-パフォーマンスと統合 - Web Workers、XMLHttpRequest Level 2
-CSS3 - WOFFも含む

~
~
*HTML5タグ一覧 [#x8b4a6ce]

　　http://phpjavascriptroom.com/?t=html5&p=html5_tags~
　　http://www.htmq.com/html5/~

**グローバル属性 [#h55579a4]
　　[[HTML5.jp - HTML要素 - グローバル属性>http://www.html5.jp/tag/attributes/index.html]]
　　
**HTML 要素 [#qa2683e5]
　　[[HTML5.jp - HTML要素 - タグ一覧>http://www.html5.jp/tag/elements/index.html]]


~
** ３Ｄグラフィックアプリケーション [#s468d41c]
　　　3Dグラフィックアプリケーションを可能にするAPI、「O3D」~
　　　「O3D」を試すには、ChromeでPluginの導入が必要。
　
**ＹｏｕＴｕｂｅ も ＨＴＭＬ５ の Ｖｉｄｅｏタグで可能  [#u671d376]


**位置情報はJava Scriptで取得可能 [#qb83636e]


**オンライン/オフラインの区別がなくなる [#j940378d]


**注目のウェビーなモバイルプラットフォーム「webOS」も登場 [#j1a9c69d]

　　　LinuxとWeb Kitをベースとした、スマートフォン用のソフトウエアプラットホーム

**Webアプリケーションにもバックグラウンド処理 [#w050f6a7]

~
~
~
~
~
~
~

**動画や音声、グラフィックの描画 [#wa1e33b3]
-動画を用いたい場合・・・video要素~
-音声を用いたい場合・・・audio要素~
-グラフィックの描画場合・・・canvas要素~


**リスク [#q048431b]
-HTML5はまだ草案（まだ正式に仕様が固まっていない状態）であること~
-HTML5はブラウザごとに実装状況が異なる~
--IE6・IE7ではHTML5がほぼ対応していない 
--同じブラウザでも、バージョンごとに対応の有無がある 
--HTML5は新しいブラウザを搭載しているスマートフォンで使うのが現実的


**audio要素のマークアップ例 [#l0b7bc49]

 <audio src="audio.mp3" controls></audio>

**canvas要素のマークアップ例 [#p09e8629]
赤く塗りつぶされた円を書く場合
 <canvas width="300" height="150"></canvas>
 <script>
 var canvas = document.querySelector("canvas"); 
 var context = canvas.getContext("2d"); 
 context.fillStyle = "red"; 
 context.beginPath(); 
 context.arc(150, 75, 50, 0, Math.PI*2, true); 
 context.fill(); 
 </script>

*HTML4からHTML5への変更点 [#c5f3440e]

HTML5 における HTML4 からの変更点~
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

**HTML5でなくなった要素 [#h49dfd60]
***center、font、uなど [#xbbcaffc]

centerは中央に寄せるため、fontは文字の大きさや色、uは下線を引くためのタグです。これらのタグは多くのホームページで実際に使用されていますが、どれも外見上の体裁を整えるためのものです。XHTMLでもすでにこれらの情報はCSSとして外部から設定するべきものとされており、HTML5.0ではそれがさらに厳格化されてタグそのものが消滅しました。

***frame、frameset、noframes [#vfec815f]
ホームページの領域を区切り、それぞれ独立したフレームとして処理することが出来ます。メニューを常に表示させたい場合などに便利なのですが、検索エンジンとの親和性が低く、ホームページ制作のタブーとまで言われる機能です。HTML5.0ではこのタブーが本当に消えることとなりました。

***よく使用される属性 [#ne2ff338]
タグの中に使用される属性にも、よく使われているものが一部廃止されます。最も象徴的なのが、a要素などで使用されるaccesskey属性です。これは携帯電話のボタンと連動している属性で、1を指定すると携帯電話の1が押された時にリンク先へアクセスするものです。互換性や混同の問題から、HTML5.0では無くなりました。また、imgとaで使用されるnameという属性は、CSSからのスタイル定義と関連付けるためのものですが、これはidという属性を使うことが推奨されており、HTML5.0では混同を避けるために廃止されています。


*ブラウザの対応状況 [#y4317661]

|~　主要ブラウザのHTML5対応バージョン　|~　　|
|　Internet Explorer　|　Internet Explorer 8 以降　|
|　Firefox　|　Firefox 3.1以降　|
|　Opera　|　Opera 9.6以降　|
|　Safari　|　Safari 3.0以降　|

主要ブラウザの対応状況　タグごとに細かく○×チェック~
その１　http://html5-css3.jp/useful/css3-html5.html~
その２　http://www.htmq.com/html5/browser.shtml~

caniuse.com - HTML5のブラウザの対応状況をチェックするためのサイト~
http://caniuse.com/


*HTML5のためのツール [#v99d6f55]

マークアップに間違いがないかどうかを確かめるため、「W3C Markup Validation Service」を用いて検証~
http://validator.w3.org/
~

HTML5 API チェッカー~
http://www.html5.jp/tutorial/apicheck/index.html

~

HTML5 Please - HTML5の対応状況をチェックするためのサイト~
http://html5please.com/

The HTML5 Test - HTML5の対応状況をチェックするためのサイト~
http://www.html5test.com/

The CSS3 Test - CSS3の対応状況をチェックするためのサイト~
http://css3test.com/

Another HTML Lint 5 - HTML構文が正しいかチェックするサイト~
http://www.htmllint.net/　（終了した？）~
http://htmllint.info/htmllint/htmllint.html~
http://potato.2nd-half.jp/tips/html5/html5validatornu_xhtml5_validator.php

*サンプル [#he951538]

[[サンプル>http://www.google.co.jp/search?q=html5&ie=utf-8&oe=utf-8&aq=t&hl=ja#hl=ja&q=html5%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB&revid=229564600&sa=X&ei=EGQaUMfLLMLKmQXn8IDQDA&ved=0CFwQ4QIoAQ&bav=on.2,or.r_gc.r_pw.r_qf.&fp=bb4d84bb49ea3323&biw=1024&bih=681]]


http://b.hatena.ne.jp/search/tag?q=html5+%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

~

[[戻る>Chinsan's Laboratory Colum]]
ＨＴＭＬ５ の変更点

ＨＴＭＬ５の変更点
