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

ニュース

イベント・セミナー

第30回 HTML5とか勉強会 - モバイルUIフレームワーク

https://docs.google.com/spreadsheet/viewform?formkey=dHM2MzFfZnNYcjh1MkpVNVBGUTFma2c6MA

2012/6/12(火) 19:00-21:00、グーグル東京オフィス (港区六本木)、無料

HTML5 API講座 (KENスクール)

http://www.kenschool.jp/Webdtp/sub/html5_api.html

http://sankei.jp.msn.com/economy/news/120724/biz12072414250008-n1.htm

10時間 42,000円 (入学金別途 10,500円)

東京渋谷 HTML5入門＆jQuery 勉強会(5/26)の資料を公開します (tonowp)

http://tonosamart.com/blog/html5-jquery-5-26/

5/26に行われた「HTML5入門＆jQuery勉強会」のプレゼン資料。

Windows 8時代のアプリ開発 - Metro: XAMLかHTML5で開発 (SlideShare)

http://www.slideshare.net/ufcpp/windows-8-13112988

http://www.atmarkit.co.jp/fdotnet/chushin/chushinmeeting_08/chushinmeeting_08_01.html

5/19に行われた「第8回 .NET中心会議」のプレゼン資料。

サイト・アプリ

Band Controller - iPhoneやiPadを使って操作するWeb Audio APIを使った音楽ゲーム (Eiji Kitamura)

https://plus.google.com/107085977904914121234/posts/QNzqvoSBoWA

http://www.bandcontroller.se/

凄い！まずMac/WinのChromeでアクセス、表示されてるURLにiOSからアクセスするとコントローラーとして連携する。いくつかのミニ音ゲーがプレイできる (英語)

Kamikaze Karaage

http://www.kamikazekaraage.com/

カミカゼカラアゲ？？謎のサイトがHTML5で作られている。canvasも使われている (英語)

CGFM

http://cgfm.jp/

福岡のWeb制作会社のサイトがHTML5で凄い！スクロールで見せるタイプ。

ヒント付でリアルタイムにHTMLの学習ができる「Mozilla Thimble App」 (IDEA*IDEA)

http://www.ideaxidea.com/archives/2012/05/m_thimble_app.html

http://thimbletest.org/en-US/

All White (furete.net )

http://furete.net/aw/aw.html

スマホ向けのHTML5ゲーム。オセロ風で全部白にするとクリアらしい。

1から10まで足したらいくつ？HTML5ゲーム「答えは55」を作りました (もとまか日記)

http://d.hatena.ne.jp/moto_maka/20120530/1338326275

http://moto-maka.net/calc55/

Windows8がHTML5でネイティブアプリ作れるって言うから東北ずん子ちゃんブログリーダー作ってみた (Be Unreasonable)

http://be-unreasonable.blogspot.jp/2012/05/windows8-html5.html

ツール

複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」 (phpspot開発日誌)

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

http://freshtilledsoil.github.com/champagne/

http://github.com/freshtilledsoil/champagne

TIPS

iframe要素のseamless属性を試してみた (WWW WATCH)

http://hyper-text.org/archives/2012/05/iframe_seamless_attribute.shtml

Webkitの開発版に実装されたシームレスIFrameの検証。

beyond html5: device apis

http://brian.io/slides/beyond-html5/

HTML5のDevice APIを説明したプレゼンスライド。このプレゼン自体がHTML5でページ切り替えエフェクトもカッコいい (英語)

jsdo.itを使ってStep by Stepで学ぶHTML5 and CSS3入門 (TM Life)

http://tmlife.net/web/html5/jsdo-it-html5-css3-guide.html

HTML5とjQueryでRotate - スクロールに応じて画像を回転させる方法 - How to rotate the image by scroll (SUPER C)

http://zxcvbnmnbvcxz.com/htmljquery%E3%81%A7rotate-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E7%94%BB%E5%83%8F%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/

ペンローズタイルの楔形をプログラムする｜HTML5 (Hiroshi Ogawa)

http://wiredhiro.jp/blog/2012/05/29/%e3%83%9a%e3%83%b3%e3%83%ad%e3%83%bc%e3%82%ba%e3%82%bf%e3%82%a4%e3%83%ab%e3%81%ae%e6%a5%94%e5%bd%a2%e3%82%92%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0%e3%81%99%e3%82%8b%ef%bd%9chtml5/

HTML5のWeb Workersを使ってみた (コイケアキヨシ)

http://akiyoshi220.blogspot.jp/2010/06/html5web-workers.html

古記事。

CSS3

New in CSS3 | CSS3 + HTML5 = Your Future

http://jasonspeaking.com/CSS3+HTML5/3-css3.html

CSS3のインタラクティブな？プレゼン資料。スライダーを調節して実際に効果を確認できる (英語)

SVG

外部のCSSを参照したSVGは思うように参照できるか (fragmentary)

http://myakura.hatenablog.com/entry/2012/05/30/014914

http://hail2u.net/blog/webdesign/from-html-to-css-to-svg-to-css.html

AI-SVGがObjective-Cに変換できる、Qwarkeeがすごい！＋きれいに拡大する方法 (Zero4Racer PRO Developer's Blog)

http://www.zero4racer.com/blog/714

SVGを埋め込んでみる

http://www.amrie.org/svg.html

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