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

ニュース

「今から学ぶor教えるならHTML5から」

イベント・セミナー

HTML5ゲーム開発コンテスト「9leap 2012」開催 (wise9)

http://wise9.jp/archives/7297

http://9leap.net/2012/

http://www.atpress.ne.jp/view/26903

http://weekly.ascii.jp/elem/000/000/086/86011/

学生限定、賞品：MacBook Pro 15またはMacBook Air 13 他、募集期間：前期8月31日、後期12月31日まで。社会人もＯＫの「OpenLeapコンテスト」も同時開催、こちらは賞金100万円。

第28回 HTML5とか勉強会 HTML5ビジネス最前線 (B2C編) 活動報告 (技術評論社)

http://gihyo.jp/news/report/2012/04/2401

4/13に行われた「第28回 HTML5とか勉強会」のレポート記事。

徳丸本に載っていないWebアプリケーションセキュリティ (SlideShare)

http://www.slideshare.net/ockeghem/phpcondo

4/21に行われた「PHPカンファレンス北海道」のプレゼン資料。

サイト・アプリ

FAVRIS - Your favorite game in the FAVICON! (United Task)

http://favris.info/

ファビコンで遊ぶテトリス！画面右上のグレーボタンから「Play」で遊べる。カーソルキーで操作。Chromeのみ対応。

ツール

SoundManager 2 - JavaScript Sound For The Web (Scott Schiller)

http://www.schillmania.com/projects/soundmanager2/

https://github.com/scottschiller/SoundManager2

HTML5 audioにも対応した音を扱うJavaScpitライブラリ。かなり前からあるらしい。ライセンスはBSD (英語)

あなたのウェブページがどのくらいスクロールされて見られているかが分かるスクリプト「jQuery Scroll Depth」 (コリス)

http://coliss.com/articles/build-websites/operation/javascript/jquery-pluginscroll-depth.html

http://www.ravelrumba.com/blog/tracking-scroll-depth-jquery-google-analytics/

https://github.com/robflaherty/jquery-scrolldepth

http://kachibito.net/seo/scroll-depth.html

device.js - Semantic client-side device detection with Media Queries (GitHub)

https://github.com/borismus/device.js

http://borismus.github.com/device.js/

PC/スマホなどの端末ごとリンク先をクライアント側で変えられる？JavaScriptライブラリ (英語)

TIPS

[HTML5 Dev] HTML5の位置情報機能：より高度な例 (インターネットコム)

http://japan.internet.com/webtech/20120425/2.html

UFOを操ろう！ HTML5+JavaScriptで実装するスマホコントローラーの仕組み (KAYAC DESIGNER'S BLOG)

http://design.kayac.com/topics/2012/04/jsdoitGames.php

Google HTML/CSS Style Guide

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

グーグルのHTML/CSSのスタイルガイド (英語)

HTML5 Audio Tag Test (Transom)

http://transom.org/?p=26567

HTML5 audioの各ブラウザの対応度テスト (英語)

CSS3

これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール「CssGradientButton」 (コリス)

http://coliss.com/articles/web-services/online-cssgradientbutton.html

http://cssgradientbutton.com/

HTML5 Offers 'Scoped' CSS for Precision Styling (Wired)

http://www.webmonkey.com/2012/04/html5-offers-scoped-css-for-precision-styling/

http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped

CSSにもスコープの概念を導入しよう！という記事 (英語)

CSS3 Structural Pseudo-class Expressions Explained (Impressive Webs)

http://www.impressivewebs.com/css3-pseudo-class-expressions/

CSS3の擬似クラスの計算のチュートリアル。「:nth-child(4n+2)」みたいな (英語)

Code a Fantastic Animated Circular Thumbnail Gallery With CSS (Design Shack)

http://designshack.net/articles/css/circlegallery/

http://designshack.net/tutorialexamples/circlegallery/circlegallery-zoomout.html

CSS3だけで作られたサークル状の画像ギャラリー (英語)

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