HTML5/CSS3の情報をクリップ！

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

ニュース

HTML5でスマートフォンのバイブ機能を制御、点字に変わるUIの可能性も (hon.jp DayWatch)

http://hon.jp/news/modules/rsnavi/showarticle.php?id=3355

http://www.smartjava.org/content/html5-remotely-vibrate-phone-morse-code-using-web-sockets-and-vibrate-api

Flashに対応、UI刷新のAndroid版「Firefox Beta」に日本語版 (ケータイWatch)

http://k-tai.impress.co.jp/docs/news/20120521_534283.html

StatCounterではChromeユーザが増えている (fragmentary)

http://myakura.hatenablog.com/entry/2012/05/21/233601

http://www.itmedia.co.jp/news/articles/1205/22/news020.html

http://internet.watch.impress.co.jp/docs/news/20120522_534411.html

http://wirelesswire.jp/Watching_World/201205221148.html

イベント・セミナー

Liberated Pixel Cup

http://lpc.opengameart.org/

コンテストでアートワーク部門とゲーム部門があるらしい。モジラらクリエティブコモンズが協賛しているらしい (英語)

書籍

つくって覚えるJavaScript+HTML5入門

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

1,890円、出版社：アスキー・メディアワークス、著：オフィス加減

サイト・アプリ

http://styloapp.com/

http://blog.alexmaccaw.com/stylo

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

http://www.moongift.jp/2012/06/20120602-2/

HTML5で作られたペイントツール。canvasではないらしい (英語)

ツール

5/24の発売日だけ「Coda 2」が半額のようですな (IDEA*IDEA)

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

http://panic.com/coda/

http://news.mynavi.jp/news/2012/05/22/052/

http://dothtml5.com/archives/20101108_coda.html

wysihtml5 - A better approach to rich text editing

http://xing.github.com/wysihtml5/

https://github.com/xing/wysihtml5

http://hon.jp/news/modules/rsnavi/showarticle.php?id=3371

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

http://www.chrome-life.com/html5/5293/

HTML5で作られたWYSIWYGなテキストエディタ。ウェブアプリなどに組み込める。ライセンスはMIT (英語)

作ろう！HTML5用Webアプリケーションフレームワーク「Brunch」 (MOONGIFT)

http://www.moongift.jp/2012/05/20120521-3/

TIPS

RDFa - Linked Data in HTML

http://rdfa.info/

RDFaの解説ページ。ツールなども載っている (英語)

ドコモのSPモードでXSSっぽい文字列を含むURLへ接続できない (Masato Kinugawa Security Blog)

http://masatokinugawa.l0.cm/2012/05/docomospurl.html

jQueryをロードする際のナイス！と思った書き方 (jdash2000)

http://dtp.jdash.info/archives/51941752.html

Android 4.0でHTML5 Test (WebTecNote)

http://tenderfeel.xsrv.jp/memo/1200/

世界のみんなときりんさん

http://world.kirinsan.org/

socket.ioを使った実験ページ。

HTML5 videoタグを活かした、フルスクリーンの動画再生サイト (tadashiku)

http://bit.ly/Lpo6t7

HTML5のaudio要素で効果音を鳴らす (All About)

http://allabout.co.jp/gm/gc/385187/

古記事。

HTML5では、data-* の書式でカスタム属性 (Custom Data Attribute) を定義できるらしい (ハブろぐ)

http://havelog.ayumusato.com/develop/html/e158-html5-custom-data-attribute.html

古記事。

CSS3

Make a stopwatch using CSS3 without images or javascript (TheCodePlayer)

http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript

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

http://dothtml5.com/archives/20120312_stop_watch.html

JavaScriptナシのCSS3だけで作られたストップウォッチ！Start/Stop/Resetがきちんと動く (英語)

Animated 3D Bar Chart with CSS3 (Codrops)

http://tympanus.net/Tutorials/Animated3DBarChart/

http://tympanus.net/codrops/2012/05/21/animated-3d-bar-chart-with-css3/

JavaScriptナシでCSS3で作るアニメーションするグラフ (英語)

Google Play's minimal tabs with CSS3 & jQuery (Red Team Design)

http://www.red-team-design.com/wp-content/uploads/2012/05/google-play-minimal-tabs-with-css3-jquery-demo.html

http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery

CSS3+jQueryで作るGoogle Play風のページ遷移ナシのタブ (英語)

Animated CSS3 Gradients Demo (Impressive Webs)

http://www.impressivewebs.com/demo-files/animated-css3-gradient-buttons/

http://spyrestudios.com/case-study-into-css3-effects-on-popular-websites/

CSS3で作られたマウスを載せると背景がアニメーションしながら変わるボタン (英語)

Diving Into CSS Regions (Nettuts+)

http://net.tutsplus.com/tutorials/html-css-techniques/diving-into-css-regions/

http://dothtml5.com/archives/20110617_regionsjs.html

CSS Regionsのチュートリアル。デフォルトでは無効だけど実装され始めているらしい (英語)

SVG

KnockoutJS + SVG (Junkyard)

http://u.hinoichi.net/tag/svg/

http://knockoutjs.com/

jQueryで作られたMVCフレームワーク「knockout.js」とSVGの連携。

cssの背景グラデーションがIEでうまくいかない場合はSVGファイルを作る (さくっとホームページPC)

http://bit.ly/LdOHKp

http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

Inkscapeで作ったSVGファイル (PHP Go)

http://bit.ly/JvHLxq

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