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

ニュース

「クールな順にWebSocket、次にコメット、最後にポーリングだよ」

サイト・アプリ

ichirou.org

http://www.ichirou.org/

個人のポートフォリオサイト？左右のボタンでHTML5を使ったデモが幾つか。このページ自体もHTML5で作られている。

スマホのブラウザで遊べるタワーディフェンス系HTML5ゲーム「Onslaught! Defense」 (Modern Syntax)

http://www.aivy.co.jp/BLOG_TEST/nagasawa/c/2012/03/html5onslaught-defense.html

http://m.lostdecadegames.com/onslaught_defense/

HTML5でコーディングされたシングルページWebサイトの作例まとめ (mBlog)

http://mantiddesign.com/archives/12262

http://designbeep.com/2012/06/06/showcase-of-html5-powered-one-page-websites-for-inspiration/

「Showcase of HTML5 Powered One Page Websites for Inspiration」

参考になったページスクロールダウンの上手い表現方法「Online Portfolio von Jan Ploch」 (Html5 Collect)

http://jp.html5collect.net/%e5%8f%82%e8%80%83%e3%81%ab%e3%81%aa%e3%81%a3%e3%81%9f%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%83%80%e3%82%a6%e3%83%b3%e3%81%ae%e4%b8%8a%e6%89%8b%e3%81%84%e8%a1%a8/

http://janploch.de/

ツール

TIPS

WebAudio Drum Machine

http://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html

Web Audio APIで作られたドラムマシンのデモ (英語)

Galaxy - JavaScript重力多体シミュレータ

http://misohena.jp/art/js_galaxysim/galaxysim.html

http://misohena.jp/art/js_galaxysim/

HTML5 canvasで作られた惑星の重力シミュレータ。「Start/Stop」をクリックで始まる。

HTML5 (TAG index Webサイト)

http://www.tagindex.com/html5/

HTML5タグのリファレンスサイト。

HTML5/Canvasアニメーションの基本 (スマホxHTML5 Web＆ハイブリッドアプリ開発者ブログ)

http://html5dev.jp/?p=259

HTML5+CSS3でWeb制作するための下準備 (Backstage)

http://www.sebata.net/backstage/backstage/?p=651

Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう！ (Taste of Tech Topics)

http://d.hatena.ne.jp/acro-engineer/20110616/1308271306

HTML5.jsとIE9.js (Webクリエイターネット)

http://www.webcreator-net.com/information/topics/20120309-topics11

Covers - A JS/CSS Experiment

http://bluedashed.com/covers/

HTML5やCSS3と音楽を組み合わせたデモが幾つか。下からアイコンを選び再生ボタンを押すと始まる (英語)

The Parallax Scrolling

http://blog.entheosweb.com/demos/parallax_scrolling/demo.html

http://blog.entheosweb.com/tutorials/parallax-scrolling-effect-with-css-jquery

「Home」「About」「Contact Us」のメニューをクリックすると、ページ遷移なく横のスクロールでコンテンツが切り替わる (英語)

Easy Parallax with jQuery (EG Studio)

http://www.egstudio.biz/easy-parallax-with-jquery/

jQueryでパララックスなサイトを作るチュートリアル (英語)

HTML5コンテンツを古いInternet Explorerに対応させるには？ (monoe's blog)

http://blogs.msdn.com/b/osamum/archive/2011/06/29/html5-internet-explorer.aspx

古記事。

CSS3

CSSだけで作るtableデザインテクニックVer.02 おまけ付き (Webクリエイターズマニュアル)

http://creators-manual.com/tablecss02/

SVG

複雑なアニメーション SVG版のGroovyFX版 (Groovyラボ)

http://d.hatena.ne.jp/ksky/20120615/p1

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