先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ

ブラウザ上で物凄いアートが作れるHTML5ベースの描画ツール「The Endless Mural」 2011年06月23日- The Endless Mural ブラウザ上で物凄いアートが作れるHTML5ベースの描画ツール「The Endless Mural」。 マウスの軌道に追尾して予め用意されたシェイプがアニメーションしながら描画されます。描画の方式も色々選べます。 Photoshopのブラシでも似たようなことが出来ますが、シェイプがランダムで決まって描画されるものが予測できないところに面白さがあります。 さらに、描画の過程をアニメーションで保存してソーシャルサイトにシェアすることが出来ます ために超適当に描いてみたグラフィック。本当に適当なんですがなんとなく面白いグラフィックになってますね。 とりあえず触ってみるだけでも面白いツールなので是非使ってみてください。 関連エントリ ブラウ

Creating HTML5/CSS3 Forms: 30 Helpful Tutorials | Splashnology HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ CSS3を使ってフォームデザインがより簡単に自由になりましたが、そのサンプル集です。 どういう事ができるのか？を知ることができ、実装の際にも参考にできます。 CSS3なしで１からつくるとなると相当大変ですが、CSS3を使うことで画像を使わずきれいなフォームが作れるのは素晴らしいですね。 関連エントリ 立体的なCSS3でデザインされた検索フォーム実装チュートリアル フォーム要素をクールにするためのjQueryプラグイン集

世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

Initializr HTML5サイトの土台を作ってくれる「Initializr」。 １からHTMLを作っていくのもいいですが、Initializrを使えばウィザード形式で進めると基本的なファイルをzipでダウンロード可能です。 基本HTMLを含むか、jQueryを含むか？の設定や、サーバ設定も含んだ形でパッケージ化が可能です。 HTMLに初期コンテンツを含むかどうか？ jQueryを含むかどうか？ その他設定した後、ダウンロード デザインはHTML５のロゴをモチーフにしたのだと思いますが、UIはなかなか分かりやすいウィザードになっています。 関連エントリ HTML5を使ったサイトをまとめたギャラリーサイト色々 見ておくべきHTML5サイト集 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベース

10 Best HTML5 Video Player | denbagus blog HTML5な動画プレイヤー色々2011。 様々なHTML5動画プレイヤーがリリースされていますが、現時点での検討・比較に便利なエントリが公開されています。 HTML5非対応ブラウザにもFlashでフォールバックしてくれる物や、jQueryプラグインをベースにした物、UIがかっこいい物などニーズに分けて使い分けられそうです。 アクセス解析を見ていると、iPhoneやiPadがどんどん増えてきている中、HTML5プレイヤー+Flashフォールバックというのが今後重要になってくる気がします。 (Flash単体だとiPhoneやiPadで見れないわけなので動画を見せたい場合は致命的） 関連エントリ 見ておくべきHTML5サイト集 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS

HTML5の要素や属性、美しいコードの書き方、各ブラウザの対応状況などをまとめたチートシートやリファレンスを紹介します。 HTML 5 Visual Cheat Sheet（配布終了） HTML5のタグリファレンス、以前紹介した時から背景が白に変わり、目に優しくなりました。

HTML5/Canvasを使用して簡単にオブジェクトの描画したり、アニメーションを加えたり、ゲームなどのインタラクションコンテンツも実装できる、実用的でシンプルなJavaScriptを紹介します。 gury - an html5 canvas utility library デモ [ad#ad-2] guryはHTML5/Canvasでウェブアプリケーションの作成を簡単にできるようにサポートすることを目的に設計されたもので、ページにオブジェクトを加え、リサイズ、スタイル、アニメーションなどを簡単に与えることができます。 サイトでは現在、下記のデモを楽しめます。

HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート

35 Specialty Galleries for Your Design Inspiration | Vandelay Design Blog HTML5やCSS3を使ったサイトをまとめてギャラリー形式にしているサイトを色々とご紹介です。 HTML5はこうしたサイトを教材として学ぶのもよさそうです。 HTML5 Beauty サムネイル付きでサイト紹介。 HTML5 Gallery サムネイルによるサイト紹介やレーティング機能もついたギャラリーサイト Ars HTML5 Gallery サムネイルでサイト紹介。タグクラウドによる分類 Ars CSS3 Gallery 今後こうしたサイトはもっと増えてきそうですね 関連エントリ PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベースの音楽サーバ「streeme」 CSS3で描画されたHTML5のロゴ HTML5のロゴで将棋をするチュ