黄金比をサイトに取り入れるためのCSSグリッドシステム「Golden Grid System」をご紹介。

黄金比とは、「1:1.618033988..」からなる比率で、最もバランスが取れていると感じられる比率の事を指します。

画面の分割は、
ワイドスクリーン用に16分割、
タブレット用に8分割、
スマートフォン用に4分割しているようです。

メディアクエリを使用し、240〜2560ピクセルの画面サイズに対して、
バランスの取れたページを作れるとの事。

ただ、iPhone用のSafariに一部バグがあるのと、
IE6〜8に対してはIE用のクラスを作らないと行けないようです。

そのまま使えるフレームワークというわけではありませんが、参考にはなると思います。

作者の方はLess Frameworkを作った方のようです。興味のある方は下のリンクからどうぞ。

スマフォでの動画再生の際に、キューポイント（再生開始位置）を指定できるライブラリが良さそうなのでメモ的にエントリー。もちもんPCもOKですよ。

「Cuepoint.js」はHTML5のビデオに、
字幕とキューポイントを追加するためのオープンソースのJavaScriptです。

デモサイトを訪れると動画が埋めこまれているのですが、
画面の下にあるサムネイルをクリックすると、
それぞれに対応した箇所から再生が開始されるようになっています。

長い動画を見せたい時に、見て欲しいポイントを分かりやすくできて良いですよね。

とても単純な処理なのですが、何回かお仕事でこういうものを探していたので
そのうち使いそうです。

興味のある方は下のリンクからどうぞ。

HTML5でAudioを便利に使うライブラリ「Buzz」

HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。

それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、
色々なAPIが用意されています。

対応しているファイル形式

ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。

音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。

ブラウザによっては動作しないものもあるようですが、
フェードイン/フェードアウトも実装されていました。

デモも非常に面白いサイトに出来上がっていました。
こういった便利なライブラリは覚えておくといつか使えそうです。

詳細&ダウンロードは下のリンクからどうぞ。

PDFを読み込んでcanvasに描画するJavaScriptライブラリ「pdf.js」

通常PDFをブラウザ上で閲覧するにはAdobe Readerやビューワー用の拡張が必要ですよね。
Mozillaの人達がこうした問題を解決するために、pdf.jsというライブラリを公開したようです。

HTML5が動作するブラウザさえあればPDFが表示できるようになる便利なライブラリになっています。

まだ開発中との事で、日本語表示がうまく出来なかったりFirefox以外では動作しないなど問題はありますが、
これからが楽しみですね。

サンプルのソースコードもありますので、興味のある方は下のリンクからどうぞ。

いいものを作るには、いいものをたくさん見ているべきだ。

「25 Amazing HTML5 Portfolio Web Designs For Inspiration」では、HTML5を使ったアイデアが盛りだくさんのサイトが紹介されている。

video、Canvas、ドラッグ＆ドロップなどを使用しているサイト集です。

参考になると思うので一度見てみてください。

CSS3を使ってフォームを作成したい。
そんな時におすすめなのが「Top 10 CSS 3 forms tutorials」。

スライダや日付処理などのHTML5のフォーム要素を取り入れつつ
デザインされたフォームを作る方法が紹介されています。