ＨＴＭＬ５
をテンプレートにして作成
[
Wiki TOP
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[戻る>Chinsan's Laboratory Colum]]
~
~
**目次 [#d7bf5b68]
#contents
~
**参考 [#c0e8ee6c]
[[参考：Wikipedia - HTML5>http://ja.wikipedia.o...
[[参考：HTML5.jp - HTML5解説サイト>http://www.h...
[[参考：Yahoo Developers Network - HTML5とは何...
[[参考：CodeZine - HTML5が注目を浴びる理由とは...
[[参考：多摩美メディアリテラシー - HTML5+CSS3 ...
[[参考：HTML5でサイトを作ろう - HTML5で製作され...
[[参考：4Gamer.net - HTML5とJavaScriptによるア...
[[参考：1日でマスターできるHTML５まとめ。>http:...
[[参考：ゲームエンジンのGameSalad、HTML5に対応>...
[[参考：DeNAが明かすHTML5でのソーシャルゲームの...
[[参考：わずか数秒で自分用のHTML5のテンプレート...
[[参考：AdobeがHTML5のアニメーションツール『Ado...
[[参考：HTML5アニメ作成ソフト｢Hype｣登場>http://...
[[参考：HTML5の勉強に役立つチートシートやリファ...
[[参考：HTML5をはじめる人、勉強したい人用のテン...
[[参考：HTML5＋CSS3時代のプログレッシブ・エンハ...
[[参考：HTML5サイトを作ろう - WEBデザインの参考...
[[参考：SlideShareで見つけたHTML5資料まとめ>htt...
[[参考：グリーに学ぶ、スマートフォン開発向けWeb...
[[参考：実用的なデザインがたくさん揃ってる、HTM...
~
~
*HTML5 [#g7d49b4d]
**経緯 [#g8169c63]
1999年にHTML4.0というバージョンになった後は、しばらく動...
HTML5 は WHATWG によって2004年に定められた Web Applicat...
**なぜHTML5 [#a58706fb]
-話題のきっかけの1つとして、iPhoneとiPadが挙げられるでし...
-HTML5によってもたらされる本当のインパクトは、HTML、JavaS...
-ウェブ標準のスキルだけで、ネイティブ・アプリケーションと...
-簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーシ...
-HTMLは様々なOSで動作するクラスプラットフォームである~
// といっても、まだまだ策定される範囲は狭く、第一歩...
// JAVAも同様に言われてきたことから、
-HTML5 が普及すれば Adobe Flash などのプラグインは不要に...
~
**[[2012年のWebはこう変わる>http://jp.techcrunch.com/arch...
-Webサイト同士がお互いに接続できる
-ブラウザはプッシュノティフィケーションや位置情報、アプリ...
-HTML5で何でもできるのでダウンロードして使うアプリケーシ...
-Internet ExplorerとMicrosoftは信じられないほどクールになる
-ブラウザのメーカーがアプリストアをビジネスとして開店
-大ヒットゲームはWebGL化
-オフラインのアプリケーションキャッシュがHTML5アプリケー...
-Flashの広告にできたことは、すべてHTML5にもできるから、HT...
-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...
-デバイスアクセス - Geolocation API、マイク・カメラ、アド...
-接続性 - WebSocket、Server-Sent Event
-マルチメディア - audio, video要素
-3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL...
-パフォーマンスと統合 - 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.htm...
**HTML 要素 [#qa2683e5]
[[HTML5.jp - HTML要素 - タグ一覧>http://www.html5.jp/...
~
** ３Ｄグラフィックアプリケーション [#s468d41c]
3Dグラフィックアプリケーションを可能にするAPI、「O3...
「O3D」を試すには、ChromeでPluginの導入が必要。
**ＹｏｕＴｕｂｅ も ＨＴＭＬ５ の Ｖｉｄｅｏタグで可能 [...
**位置情報はJava Scriptで取得可能 [#qb83636e]
**オンライン/オフラインの区別がなくなる [#j940378d]
**注目のウェビーなモバイルプラットフォーム「webOS」も登場...
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は下線...
***frame、frameset、noframes [#vfec815f]
ホームページの領域を区切り、それぞれ独立したフレームとし...
***よく使用される属性 [#ne2ff338]
タグの中に使用される属性にも、よく使われているものが一部...
*ブラウザの対応状況 [#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 M...
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_xht...
*サンプル [#he951538]
[[サンプル>http://www.google.co.jp/search?q=html5&ie=utf-...
http://b.hatena.ne.jp/search/tag?q=html5+%E3%82%B5%E3%83%...
~
[[戻る>Chinsan's Laboratory Colum]]
終了行:
[[戻る>Chinsan's Laboratory Colum]]
~
~
**目次 [#d7bf5b68]
#contents
~
**参考 [#c0e8ee6c]
[[参考：Wikipedia - HTML5>http://ja.wikipedia.o...
[[参考：HTML5.jp - HTML5解説サイト>http://www.h...
[[参考：Yahoo Developers Network - HTML5とは何...
[[参考：CodeZine - HTML5が注目を浴びる理由とは...
[[参考：多摩美メディアリテラシー - HTML5+CSS3 ...
[[参考：HTML5でサイトを作ろう - HTML5で製作され...
[[参考：4Gamer.net - HTML5とJavaScriptによるア...
[[参考：1日でマスターできるHTML５まとめ。>http:...
[[参考：ゲームエンジンのGameSalad、HTML5に対応>...
[[参考：DeNAが明かすHTML5でのソーシャルゲームの...
[[参考：わずか数秒で自分用のHTML5のテンプレート...
[[参考：AdobeがHTML5のアニメーションツール『Ado...
[[参考：HTML5アニメ作成ソフト｢Hype｣登場>http://...
[[参考：HTML5の勉強に役立つチートシートやリファ...
[[参考：HTML5をはじめる人、勉強したい人用のテン...
[[参考：HTML5＋CSS3時代のプログレッシブ・エンハ...
[[参考：HTML5サイトを作ろう - WEBデザインの参考...
[[参考：SlideShareで見つけたHTML5資料まとめ>htt...
[[参考：グリーに学ぶ、スマートフォン開発向けWeb...
[[参考：実用的なデザインがたくさん揃ってる、HTM...
~
~
*HTML5 [#g7d49b4d]
**経緯 [#g8169c63]
1999年にHTML4.0というバージョンになった後は、しばらく動...
HTML5 は WHATWG によって2004年に定められた Web Applicat...
**なぜHTML5 [#a58706fb]
-話題のきっかけの1つとして、iPhoneとiPadが挙げられるでし...
-HTML5によってもたらされる本当のインパクトは、HTML、JavaS...
-ウェブ標準のスキルだけで、ネイティブ・アプリケーションと...
-簡単に言うと、ブラウザの業界標準のHTMLにWebアプリケーシ...
-HTMLは様々なOSで動作するクラスプラットフォームである~
// といっても、まだまだ策定される範囲は狭く、第一歩...
// JAVAも同様に言われてきたことから、
-HTML5 が普及すれば Adobe Flash などのプラグインは不要に...
~
**[[2012年のWebはこう変わる>http://jp.techcrunch.com/arch...
-Webサイト同士がお互いに接続できる
-ブラウザはプッシュノティフィケーションや位置情報、アプリ...
-HTML5で何でもできるのでダウンロードして使うアプリケーシ...
-Internet ExplorerとMicrosoftは信じられないほどクールになる
-ブラウザのメーカーがアプリストアをビジネスとして開店
-大ヒットゲームはWebGL化
-オフラインのアプリケーションキャッシュがHTML5アプリケー...
-Flashの広告にできたことは、すべてHTML5にもできるから、HT...
-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...
-デバイスアクセス - Geolocation API、マイク・カメラ、アド...
-接続性 - WebSocket、Server-Sent Event
-マルチメディア - audio, video要素
-3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL...
-パフォーマンスと統合 - 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.htm...
**HTML 要素 [#qa2683e5]
[[HTML5.jp - HTML要素 - タグ一覧>http://www.html5.jp/...
~
** ３Ｄグラフィックアプリケーション [#s468d41c]
3Dグラフィックアプリケーションを可能にするAPI、「O3...
「O3D」を試すには、ChromeでPluginの導入が必要。
**ＹｏｕＴｕｂｅ も ＨＴＭＬ５ の Ｖｉｄｅｏタグで可能 [...
**位置情報はJava Scriptで取得可能 [#qb83636e]
**オンライン/オフラインの区別がなくなる [#j940378d]
**注目のウェビーなモバイルプラットフォーム「webOS」も登場...
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は下線...
***frame、frameset、noframes [#vfec815f]
ホームページの領域を区切り、それぞれ独立したフレームとし...
***よく使用される属性 [#ne2ff338]
タグの中に使用される属性にも、よく使われているものが一部...
*ブラウザの対応状況 [#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 M...
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_xht...
*サンプル [#he951538]
[[サンプル>http://www.google.co.jp/search?q=html5&ie=utf-...
http://b.hatena.ne.jp/search/tag?q=html5+%E3%82%B5%E3%83%...
~
[[戻る>Chinsan's Laboratory Colum]]
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
