2012/05/09

スクロールによってリストの表示をダイナミックに変化させる「stroll.js」

WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変...

2012/04/13

Bootstrapを使おう！様々なカラーテーマ、プラグインを用意「Kickstrap」

最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマ...

2012/04/06

これは格好いい。Windows 8のMetro UIをHTML5で再現「Metro UI CSS」

次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリスト...

2012/03/11

HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション「reveal.js」

2012/02/02

Facebook風ボタンをCSS3でデザイン「CSS3 Facebook Buttons」

最近はFacebookアプリの開発も増えてきました。そんな開発の際に使えそうなのがCSS3 Facebook Buttons、Facebook風ボタンをCSS3で作成したソフトウェアです。 色は3種類から選択できるようです。 classを指定するだけ。使い方は簡単です。 サイズが少し大きいバ...

2012/01/24

みんなではむへいを育てよう。Grow!を使った例としても見たい「みんなのはむへい牧場」

ソーシャルチッププラットフォームであるGrow!を使ってはむへいを育てる、それがみんなのはむへい牧場です。 はむへいです。Grow!の力で成長するペットです。 こんな感じでGrow経由でポイントを送れます。 はむへいは動いていますが、JavaScriptは使っていません。 はむへいに送ったポ...

2011/12/03

CSS3を使った高度なアニメーションライブラリ「Animate.css」

Animate.cssはCSS3を使ってアニメーションを実現するライブラリです。何はともあれ、デモ動画を見て何が実現できるのか知ってください。 トップページです。ここの各ボタンを押すとアニメーションが実行されます。 デモ動画です。 Animate.cssの特徴としてはjQueryのようなJa...

2011/10/21

なぜ？CanvasではなくCSS3を駆使して描くドローライブラリ「Donatello」

HTML5を利用すればこれまで画像やFlashを使わざるを得なかった描画がJavaScriptとCSSを組み合わせて実現できるようになります。どれくらい奇麗なグラフィックスを描けるのか、さらにそれをいかに手軽に実現できるかを知るのにDonatelloはぴったりなライブラリです。 サンプルです...

2011/10/13

CSS3の角丸表示を使おう。レガシーなWebブラウザにはこれで対応「Curved corner」

Curved cornerはCSS3で実装されているborder-radiusをIE7などのレガシーなWebブラウザでも対応させるためのソフトウェアです。多数のWebブラウザにも対応すればborder-radiusが積極的に使えるようになりそうです。 こちらはIE7で表示した例です。実際に角...

2011/09/27

多彩なウィジェットで高品質なWebアプリケーションを素早く構築「Kendo UI」

Kendo UIはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア。WebのUIは表現力がとても高く、自由度が高い。それは良いことでもあるし、悪いことでもある。束縛が何もないために自由に発想できる反面、デザインする才能がないと情報が散らばってしまってどうにもならなく...

2011/09/18

あの機能が使えるかどうか。HTML5/CSS3の機能単位の判別ライブラリ「Modernizr」

ModernizrはJavaScript製のオープンソース・ソフトウェア。数年前まではブラウザによって動く機能、動かない機能というのがあった。それらを吸収するライブラリとしてPrototype.js/jQueryなどがもてはやされた。今、時代はHTML5に変わろうとしているが話はさらにややこ...

2011/08/13

WebブラウザごとのHTML5対応状況を調べる「haz」

hazはHTML5製のフリーウェア（ソースコードは公開されている）。HTML5の登場によって、Webの標準化が進みこれまでにあったようなWebブラウザごとの方言や互換性維持の手間が減る。そう思われているが実際にはそう簡単ではない。 Google Chrome Webブラウザによって実装状況は...

2011/06/21

圧倒的な存在感。HTML5/CSS3/JavaScriptで作られたイラストレーションアプリ「Ghost Writer」

Ghost WriterはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。HTML5は徐々に本格導入されつつあるが、まだまだ実験的なプロダクトが多い。だがプログラマーにとっては、今こそ遊べる状況だ。色々試し、遊ぶ中で新しい可能性を見いだすことができる。 もの...

2011/05/30

ジャストアイディアを素早く形にしていく。HTML5/CSS3デザインテンプレート「Perkins」

PerkinsはHTML5/CSS3製のオープンソース・ソフトウェア。アイディアを思いついてすぐにコーディングにとりかかるが、Webデザインで詰まって投げ出してしまったという経験はないだろうか。デザインが今ひとつだと開発する気力までなくなってしまうというものだ。 2カラム 必要なのはある程度...

2011/05/14

よく使うものをパッケージ。個人向けWeb開発で使えるPHPフレームワーク「G5 Framework」

G5 FrameworkはPHP製のフリーウェア。ちょっとしたアイディアがわいた時にさくっと実装したい時にPHPはちょうどいい。あくまでも個人向けであればPHPファイル中にHTMLを書いていってしまっても良いだろう。そんな混在もPHPの面白さと言えるかもしれない。 デモトップ 色々なWebサ...

2011/05/11

レガシーなブラウザでもCSS3の新技術を活用する「Selectivizr」

SelectivizrはJavaScript製のオープンソース・ソフトウェア。CSS3ではIDやclassによる指定の他にもセレクタが追加されている。例えば属性値による指定でスタイルを設定することもできる。機能が追加されれば、より自由度の高いWebデザインができるようになる。 使い方 しかし...

2011/04/26

画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン「CSSS」

CSSSはHTML5/JavaScript/CSS3によるオープンソース・ソフトウェア。最近はHTMLやJavaScriptを使って作られたプレゼンテーションが増えている。JavaScriptでキーの動きに合わせてスライドを動かす類のものだ。 奇麗なHTMLプレゼン コンテンツがHTMLベー...

2011/04/22

必見。スマートフォン対応、WebベースのHTML5オーサリングソフトウェア「Maqetta」

MaqettaはWebベース、Java製のオープンソース・ソフトウェア。HTMLのオーサリングツールと言えばDreamweaverをはじめとしてローカルソフトウェアで行うのが一般的だ。だがその結果をレンダリングするのはWebブラウザだ。この環境の違いで作りやすさが変わってしまう。 メイン画面...

2011/04/22

Firefox4の実力を知る。HTML5/CSS3による惑星情報「The Planetarium」

The PlanetariumはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。技術的にどれだけ面白かろうが、ぱっと見て分かるものでないとインパクトが薄れてしまう。逆に言えば見た目の迫力があるとみんなを虜にする可能性もある。 トップ Gmailが登場した時の...

2011/02/11

禅の心。機能美を探求したHTML5製音楽プレーヤ「ZEN-Player」

ZEN-PlayerはHTML5製のフリーウェア（ソースコードは公開されている）。Webサイトやサービスは時間が経つにつれてどんどんリッチに、そして複雑になっていく。決して悪いことではないが、時にあまりの激しさに疲れてきてしまうものだ。 プレーヤはこんなにシンプル Webサイト側もそれを認識...