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

ニュース

イベント・セミナー

HTML5入門＆jQuery 勉強会第二回 (ATND)

http://atnd.org/events/29886

2012/6/16(土) 13:30-18:00、gooya (渋谷区桜丘町)、無料

[SmartPhone Dev] Developer's Seminar in Early Summer 2012 - 今注目のTitaniumMobile/HTML5の最新事情 (パソナテック)

http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3500

2012/6/30(土) 14:00-17:30、名古屋プライムセントラルタワー (名古屋市西区)、会費 3,000円

CSS Nite in NIIGATA, Vol.3 with Microsoft 参加レポート (うか)

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

http://cssnite.deez.jp/vol03/

4/21に行われた「CSS Nite in 新潟, Vol.3」のレポート記事。

Mobile Hack Tokyoに参加してきた (車輪を再発明)

http://d.hatena.ne.jp/koba04/20120402/1333296663

3/29に行われた「Facebook Mobile Hack Tokyo」のレポート記事。

書籍

WebGL+HTML5 3DCGプログラミング入門

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

http://www.cutt.co.jp/book/978-4-87783-273-5.html

6,090円、出版社：カットシステム、著：松田晃一、高い！！！

サイト・アプリ

ドラゴンボールの物語と戦闘力 - 物語の可視化

http://antlabo.jp/html5/visualstory_db/

ドラゴンボールのキャラクタの戦闘力をグラフィカルに可視化したサイト。HTML5 canvasで作られている。

知的法人RAIZIN

http://raizin-japan.com/campaign/

エナジードリンク？のプロモサイトがHTML5で作られている。

HTML5 Webcam Toy - Special effects with WebGL and getUserMedia (Paul Neave)

http://neave.com/webcam/html5/

http://neave.com/

HTML5で作られたMacのPhoto Booth風のウェブアプリ。WebRTCやWebGLなどを使っているらしい (英語)

Inkscaped - HTML5 Canvas 2D Game dev (ADcomp)

http://adcomp.tuxfamily.org/code/game_2D_dev/

http://davidmadbox.wordpress.com/

HTML5 canvasで作られたパズルゲーム？カーソルキーの左右で移動、Xでジャンプ、Cでファイヤ (英語)

html5で構成された掲示板サイトを先日公開しました (@toro2027)

https://twitter.com/toro2027/statuses/211724789218426880

http://www.casquetteb.com/

ツール

Sequence Theme Demo - Modern Slide In

http://www.sequencejs.com/themes/modern-slide-in/

https://github.com/IanLunn/Sequence

カッコいいスライダーのjQueryプラグイン。ライセンスはMITとGPL (英語)

TIPS

HTML5/CSS3によるサイト構築 - 情報基礎授業資料 (慶應義塾大学)

http://ipl.sfc.keio.ac.jp/text/basic-2012-4/text/web/

https://github.com/morimorihoge/sfc-itb-html5

慶應大学の授業資料？サンプルコードはgithubに置いてある。

HTML5 canvasのピクセル操作 (kudox)

http://kudox.jp/html-css/html5-canvas-pixel

HTML5 canvasに画像を表示する (kudox)

http://kudox.jp/html-css/html5-canvas-image

HTML5 CanvasとJavaScriptを使って作る追尾サンプル (TM Life)

http://tmlife.net/programming/javascript/html5-canvas-javascript-pursuit.html

HTML5 pocket book

http://adactio.com/extras/pocketbooks/html5/

HTML5のシンプルなチートシート (英語)

HTML5 GeoLocation APIで現在地住所の自動入力 - ジオデコード (Kawa.net xp)

http://www.kawa.net/works/geo/html5geoform.html

古記事。

File APIを使って、アップロード画像のプレビューをする (at softel)

http://www.softel.co.jp/blogs/tech/archives/2799

http://www.softel.co.jp/blogs/tech/samples/20111201.html

http://www.softel.co.jp/blogs/tech/samples/20111202.html

古記事。

html5でvideoの任意のフレームをcanvasに描画するメモ (超自己満足プログラミング)

http://d.hatena.ne.jp/favril/20100225/1267099197

古記事。

CSS3

How to Create a Stylish Image Content Slider in Pure CSS3 (DesignModo)

http://designmodo.com/demo/css3slider/

http://designmodo.com/slider-css3/

CSS3で作る画像スライダー。切り替えエフェクトがそれぞれ違う (英語)

Responsive Horizontal Layout (Codrops)

http://tympanus.net/Tutorials/ResponsiveHorizontalLayout/

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

レスポンシブなカラムのレイアウト。ウィンドウを狭めると列でなくなる (英語)

CSS3 breadcrumbs (RedTeamDesign)

http://www.red-team-design.com/wp-content/uploads/2012/01/css3-breadcrumbs-demo.html

http://www.red-team-design.com/css3-breadcrumbs

CSS3で作られたブレッドクラム、４種ほど (英語)

CSS3「メディアクエリ」を使ってiPhone、iPadでの表示にもばっちり対応させる (MONODEZ)

http://monodez.com/?p=1042

古記事。

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