HTML5/CSS3のニュースやTIPSなどのまとめ (2012年5月22日)

ニュース

イベント・セミナー

Internet Explorer 10とマイクロソフトにとってのHTML5 in 松山 (SlideShare)

http://www.slideshare.net/ykasugai/internet-explorer-10html5-in-12990348

http://cssnite-matsuyama.com/vol01/

5/19に行われた「CSS Nite MATSUYAMA Vol.1」のプレゼン資料。

書籍

HTML5入門 - Flash代替として注目！最新マークアップ言語

http://www.amazon.co.jp/dp/4777516822?tag=dothtml5-22

http://blog.livedoor.jp/unahide/archives/52955824.html

1,995円、出版社：工学社、著：村山秀明

サイト・アプリ

HTML5 JavaScript Piano - with Data URIs

http://mrcoles.com/piano/

HTML5 audioで作られたピアノ。キーボードのmを押すとデモが始まる。右上のボタンをクリックするとヘルプが出る (英語)

漢字をMikke! (蟻の実験工房)

http://antlabo.jp/html5/kanjimikke/

似ている漢字を探すJavaScriptゲーム。ディレクトリに/html5/になているがあまり関係ない。けどシンプルで面白い。

HTML5 videoタグ、独自いいね！ボタンを実装したANA「IS JAPAN COOL?」 (tadashiku)

http://bit.ly/JKjDHn

https://www.ana-cooljapan.com/

ツール

これは新しい！クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」 (phpspot開発日誌)

http://phpspot.org/blog/archives/2012/05/jqueryjquery_ve.html

TIPS

requestAnimationFrame (CreativeJS)

http://creativejs.com/resources/requestanimationframe/

setIntervalよりスムーズなアニメーションを実現できるrequestAnimationFrameのチュートリアル (英語)

[HTML5 Dev] HTML5の位置情報機能、面白いアイデア12 (インターネットコム)

http://japan.internet.com/webtech/20120521/8.html

HTML5 Video Event + SVG Animation (@dynamitter)

http://dynamis.jp/demo/svg-animation-video/video.html

「HTML 5 video要素のplay/pause/endedイベントをひろってSVGアニメーションを開始/終了」Firefoxでのみ動作。

HTML5でスマホアプリを作ってみよう第１回じゃんけんゲーム (もとまか日記)

http://d.hatena.ne.jp/moto_maka/20120521/1337545455

Canvasを使ってみんなもお手軽に弾幕作ろうぜ！！ (凹みTips)

http://d.hatena.ne.jp/hecomi/searchdiary?word=HTML5

オレオレ専用のはてぶWebアプリを作る (ふにゃるん)

http://d.hatena.ne.jp/Wacky/20110213

HTML5 localStorageを使用。

html5のwebStorage(localStorage)でデータを保存する (Web.fla)

http://the-zombis.sakura.ne.jp/wp/?p=1347

html5のcanvasを使ってみた (あべさん日記)

http://www.abe3.net/2012/05/html5-canvas/

HTML5 AudioオブジェクトをJavaScriptで制御する方法 (無職のプログラミング)

http://himaxoff.blog111.fc2.com/blog-entry-97.html

古記事。

mayy - web、ファッションなど好きなものまとめブログ

http://mayy.me/

html5/CSS3のチュートリアルも載っている。

CSS3

Elitepack CSS3 Display Screens (SparkyHub)

http://www.sparkyhub.com/elitepack-css3-display-screensmays-free-file-of-the-month/

CSS3で作られたiPhone、iPad、Macbook Air、iMacのフレーム。液晶の部分に画像や動画をはめ込める (英語)

Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック (コリス)

http://coliss.com/articles/build-websites/operation/css/css-tricks-for-responsive-design-by-webdesignerwall.html

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

横並びのリストのセンタリング (hail2u)

http://hail2u.net/blog/webdesign/centering-horizontal-list.html

Single element Pure CSS Animated Sprite (ValidateThis)

http://www.validatethis.co.uk/news/single-element-pure-css-animated-sprite/

CSS3で作るアニメーションするスプライト。マリオの「？」ブロック的な何か (英語)

SVG

Data Visualization using d3.js and Telerik's KendoUI (Orbifold)

http://orbifold.net/html5/

http://dothtml5.com/archives/20110302_d3js.html

SVGアニメーションのデモ。カッコいい。d3.jsを使っている (英語)

IE9でSVGをdataURIにした時、4102文字を超えるとスタイルが効かなくなる謎に遭遇 (@yomotsu)

https://twitter.com/#!/yomotsu/statuses/200483861338128384

（＊価格は掲載時のものです。購入時にご確認ください。）