ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ

CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー

45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き

turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」

Useful jQuery Drop Down Menu Scripts - DesignModo 様々なドロップダウンメニューを実装するスクリプト集 ページをシンプルに見せつつ、機能性も損なわないようにできるドロップダウンメニューも色々な実装がありますね。 様々なタイプのドロップダウンと、それを実現するためのスクリプトが公開されていていざ自分がドロップダウンを実装するという時に参考にできます 最近はやってるサイトはナビゲーションなんかもシンプルになるように、それでいて十分な機能を提供している気がしますが、ドロップダウンなどをうまく活用していますね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSS3単体でアニメーションするドロップダウンメニューを実装 CSS3だけで実現する幅広で使えそうなドロップダウン実装チュ

40 Beautiful Free HTML5 & CSS3 Templates HTML5&CSS3を利用した美しい４０のフリーテンプレート集がまとめられていました。 HTML5とかCSS3をベースにしたサイトを作りたい方は参考にできそうです。 HTML5とかCSS3を使ったサイトのレイアウトの感覚をつかんで、そうしたサイト制作の際に参考にできますね これらがフリーとはすばらしい 関連エントリ HTML5＋CSS3ベースのテンプレート集１２ HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ HTML5＋CSS3でクールなオーディオプレイヤー「ZEN」

Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ

HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集

The Pure CSS3 Content Slider ピュアCSS3のコンテンツスライダーが公開されています。 色々できるのはわかってきたんですが、次から次とピュアCSSなものが出来ていってますね。 開発者としてはマルチプラットフォームで作りやすい方を選ぶのが自然ですがこういう可能性を知っておくことも重要かも。 良い感じにアニメーションしてます 関連エントリ ピュアCSS3でタイピングアニメーションするデモ ピュアCSSでページ上に通知を出すチュートリアル ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ

Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更

JQuery Datatables plugin example with Php & Mysql - Share My Code jQuery＋PHP＋MySQLでデータグリッドを作るサンプル。 PHPでMySQLのデータを出すことってあったりしますが、単にテーブルで出すとかっこわるいですね。 次のようなインタフェースで出してあげると、検索やソート、ページング処理がついてくるので便利そうです。 単に出力するのはやめてこうしたライブラリの力を借りれば少ないステップで簡単に便利な機能を提供できそうです。 サクッと保存されているデータを確認したい、けどphpMyAdmin程の機能は必要ないし、ちょっと危ないみたいな場合に使えそうですね。 関連エントリ かっこいいページ送り付きのグリッドを簡単につくれる「OpenJS Grid」 好みのグリッドを作成してPNGやPhotoshop形式でダウンロー

12 HTML5 CSS3 Beautifully Designed Themes HTML5＋CSS3ベースのテンプレート集１２ 色々とテクニックが使われており、学習後の実用例として参考にできそうです。 スマホ主流の流れでますます重要度が高まっているので本格的に学んでおきたいですね 関連エントリ ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ 綺麗にデザインされたフリーのHTML/CSSテンプレート１０ 34のフリーで綺麗なXHTML/CSSテンプレート フリーの(X)HTML/CSSテンプレート５０

13 Smart Wordpress Themes to Befriend Mobile Gadget Users - WPDressing.com スマートフォン対応の１３のWordPressテーマ。有償のものが殆どですが、デザインの参考にできたり、有償といっても数十ドルまでのものなので導入してもよさそうです。 WordPressを使ったカッコイイモバイルサイトがあっという間に作れちゃいそうです。 シェアでいうと携帯サイト＞PCサイトなんていう現象がありましたが今後はグローバルでこうしたことが起こるかもというところでスマホサイトの構築法はしっかりと覚えておきたいところですね 関連エントリ スマホで使えるフォトギャラリー実装セット「PhotoSwipe」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマートフォン向けサイトの作り方エントリのまとめ

jQuery plugin for Twitter OAuth via popup window (Facebook style) Twitter OAuth認証をポップアップで行うjQueryプラグイン。 サーバ言語はなんでもよさそうですが、PHPでのサンプルも公開されています。 認証等もPHP側なのでプラグインの機能としてはFacebook風にポップアップにするというものです デモページはこちら サービスのTwitter連携っていうのは最近は必須であるように感じますね。 関連エントリ TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 スマホ等のモバイル判定が簡単に行えるライブラリ「MobileESP」

15 Best Sites To Download Free Web Templates | ZoomZum フリーのWEBサイトテンプレートをダウンロードできる１５サイト フリーのテンプレートのまとめエントリなんかが色々とあったりしますが、フリーテンプレートのまとめサイト１５サイトのまとめになっています。 これでもうイメージ通りのテンプレートは手に入ってしまうのかもしれません。 関連エントリ フリーのWEBデザインテンプレート２５ WEB管理画面のテンプレート２２ フリーの高品質WEBデザインレイアウトテンプレートPSD７０

Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」

glDatePicker - A simple, customizable, lightweight date picker calendar plugin for jQuery シンプルデザインで使いやすい日付ピッカー実装jQueryプラグイン「glDatePicker」。 次のような大きめでシンプルデザインの日付ピッカーを簡単に実装できるプラグイン。デザインがよくても小さくて押しづらいものよりもよさそうです。 白黒のバージョンがあります。CSSデザインなのでデザイン変更も簡単でしょう。 $("#date1").glDatePicker();と書くだけで<input>にフォーカスした際に表示されクリックだけで日付を入力できます。 シンプルイズベストですね。 関連エントリ Mac OS XのDateLine風1行カレンダーをWEBサイトにも簡単実装できるjQueryプラグイン「Dateli

Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript

これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし

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