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

ニュース

「ネイティブMetro UIアプリケーションは、JavaScript+CSS+HTML5でも作成可能」

イベント・セミナー

ありえるえりあミニ勉強会 #2 - Sencha Touch (connpass)

http://connpass.com/event/477/

2012/5/25(金) 19:00-、アリエル・ネットワーク (港区六本木)、無料。

サイト・アプリ

CTRL + [P]aper - Create and get your very own paper toyz

http://grouek.com/ctrlpaper/

http://creativejs.com/2012/03/ctrl-paper/

WebGLなどで作られたコンテンツ (冒頭はHTML5 video) ペーパークラフトのキャラクタをデザインしてPDFでダウンロードできる。みんなが作ったギャラリーもある (英語)

ゲームのつぼ for HTML5

http://www.afsgames.com/html5/

iOSやAndoroid向けのHTML5で作られたミニゲームが幾つか。

ぶっ翔べ！バット葬少女！！

http://galge.jp/

http://gigazine.net/news/20120401-aprilfool-matome/

http://getnews.jp/archives/179856

iOS/Android/PCで遊べるHTML5で作られたギャル？ゲーム。エイプリルフールのネタらしいけど今でも遊べる。

ツール

Flash Professional Toolkit for CreateJSの発表 (akihiro kamijo)

http://cuaoar.jp/2012/04/flash-professional-toolk.html

http://createjs.com/

Flash Professional CS6からHTML5コンテンツを作るツール。書き出されたデータをCreateJSと組み合わせて動くらしい。

TIPS

HTML5を使ってセマンティックなWebサイトを作ろう第2回実践！すぐに導入できるセマンティックなマークアップ、4つのパターン (Think IT)

http://thinkit.co.jp/story/2012/04/25/3536

HTML5のアウトラインは箇条書きで確認すると分かりやすい (うかブログ)

http://www.uka-blog.com/web/html_css/entry_001480.php

How to Create an Audio Player in HTML5 & CSS3 (DesignModo)

http://designmodo.com/audio-player/

http://designmodo.com/demo/audioplayer/

HTML+CSS3+jQueryでオーディオプレイヤーを作るチュートリアル (英語)

CSS3

3D it! (LAB!)

http://www.edankwan.com/lab/3dit

http://creativejs.com/2012/04/css-tilt/

http://june29.jp/2012/04/29/3d-mode/

http://www.ideaxidea.com/archives/2012/04/3d_it.html

いろいろなサイトを立体にできるブックマークレット。CSS 3D transformを使っていて、マウスの動きに連動して視点が変わる。DOM構造の解析にも向いている？ (英語)

hakimel/stroll.js (GitHub)

https://github.com/hakimel/stroll.js

http://thechangelog.com/post/21839218724/stroll-js-css3-list-scroll-effects

http://www.aivy.co.jp/BLOG_TEST/nagasawa/c/2012/04/css313strolljs.html

http://dothtml5.com/archives/20120416_clips.html#pickup4

先日紹介したCSS3+JavaScriptで作られた凄いスクロール・エフェクトがライブラリ化されてた。Hakim El Hattabさん作 (英語)

HTML5とあわせて知りたい周辺技術第3回 CSS3のキーフレームに基づくアニメーション (Think IT)

http://thinkit.co.jp/story/2012/04/26/3528

意外と多い!? Webフォントに対応していない環境 - 2012年のWebフォント事情 (てっく煮ブログ)

http://d.hatena.ne.jp/nitoyon/20120426/web_font_popularity

TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」 (phpspot開発日誌)

http://phpspot.org/blog/archives/2012/04/twitterbootstra_1.html

http://wrapbootstrap.com/

CSS3でゲームっぽいメニューを作ってみる (GEOQUAKE Backstage)

http://geoquake.jp/blog/2012/04/17/css3gamemenu/

http://geoquake.jp/experimental/HTML5/CSS3GameMenu/

A Pure CSS3 Cycling Slideshow (Smashing Coding)

http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/

JavaScriptは使わずにCSS3だけで画像スライドショーを作るチュートリアル (英語)

Scrolling shadows (kizu.ru)

http://kizu.ru/en/fun/shadowscroll/

http://lea.verou.me/2012/04/background-attachment-local/

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

スクロールの上下にシャドウが付いていて端に達すると消える。JavaScriptは使っていないらしい (英語)

SVG

svg-android - SVG parsing and rendering for Android (Google Code)

http://code.google.com/p/svg-android/

http://www.zerosugar.net/2012/04/androidnoclassdeffounderror.html

AndroidでSVGを描画することが可能になるライブラリ。ライセンスはApache License v2 (英語)

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