Remodal クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブ対応のモーダル表示ライブラリもちらほら出てきていますが、こちらは、モバイル表示時にモーダルっぽさをなくした全面表示というのがカッコよく新しいライブラリです。 PC版はこれまで同様のモーダル表示。表示がフラットで若干モダン スマホの場合は全画面表示。なんかこの方がカッコいい気がします。 別にフローティングなエフェクトは画面の無駄ですし必要ないという所が合理的で表示もクール。 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 何でも埋め込めてカッコいいモーダ

Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応のメガメニュー実装jQueryプラグイン「Accessible Mega Menu」 ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 アコーディオン型のシンプルな階層メニューが作れるjQueryプラグイン「navgoco」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Nav

50 Awesome Twitter Bootstrap Templates フリー＆プレミアムなTwitterBootstrapテーマ50 Bootstrapベースとはいえ、Bootstrap臭があまりしないテンプレートが多数まとまっています。 通常サイトや管理画面等のテンプレートがまとまっていて、活用してサクっと仕事を終えられる事もあるかも Bootstrapの便利さを享受しつつ、うまくサイトデザインする際の参考にもできそうです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」

jakiestfu/Youtube-TV GitHub クールなプレイリスト付きのYoutubeプレイヤーを作成できるjQueryプラグイン「Youtube-TV」 次のように通常のプレイヤーに加えてサイドにプレイリストを表示できるプレイヤーが作れるようです レイアウトはCSSでより自分好みにカスタマイズ可能だそう。 動画が複数あって、それぞれ再生してもらいたいようなインタフェースを実装したい際に参考にできそうですね。 関連エントリ グラデーション生成ウィジェット実装jQueryプラグイン「GRADX」 LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 サイトの使い方をその場で表示できるjQuery

Countable.js ? Live word-counting in JavaScript リアルタイムに文字数、段落、単語数を計算して表示できる「Countable.js」。 テキストエリアに入力するとリアルタイムに文章の情報が出ます。文章作成時等に便利かもしれません。 単語は英語にのみ対応しているのであまり使えませんが、段落や文字数はなかなか使えそうです jQuery等は不要で、スクリプト単体で動き、1KB程度と軽量なのが特徴 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 グラデーション生成ウィジェット実装jQueryプラグイン「GRADX」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 サイトの使い方をその場で表示できるjQueryプラグイン「TourBus」 範囲指定が可能になるUI実装j

jQuery Unveil - A very lightweight plugin to lazy load images LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 LazyLoadプラグインの余分な機能（エフェクト、イベント）を省いて軽量化したものです。 LazyLoadでページ表示速度をあげようとしてLazyLoadで遅くならないようにしたい場合に使えそう とにかく軽くしたい場合に検討してみてもよいプラグインですね 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 レスポンシブに加えスマホ用のメニュー実装もできる

mtkopone/zelect GitHub selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 既存のselectは初期のブラウザで実装されたもので、大概古いインタフェースなわけですが、標準ではあのままです。 これを簡単にjQueryプラグインで、インクリメンタル検索対応にして入力を楽にできます。 選択肢が多すぎる場合なんかに便利 関連エントリ selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」 selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 selectボックスを超カッコよくするjQueryプラグイン「Chosen」

Drop-Down Navigation: Responsive and Touch-Friendly Osvaldas Valutis レスポンシブでクールなドロップダウンメニュー実装例 次のようなレスポンシブなドロップダウンメニューのデモです。デモページはこちら。 シンプルですがかなり良い感じに動いているみたいです。 そのまま使うのもいいですし、１から実装する際の参考にしてみてもよいかもしれませんね。 関連エントリ レスポンシブな画像ギャラリーが作成できるjQueryプラグイン HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「Coo

Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 2013年04月04日- Bootstro.js Bootstrap Intro.js Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」。 サイト上の要素をハイライトさせて説明を吹き出しで表示することが出来るBootstrapベースのライブラリ。 サイトで何をやったらいいか分からない、というユーザ向けの分かりやすいチュートリアルをBootstrapベースのサイトで実現出来ます ますますBootstrapが便利になりますね 関連エントリ Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Goo

Junior - A front-end framework for building HTML5 mobile apps with a native look and feel. HTML5でネイティブ風アプリを作るFEフレームワーク「Junior」。 BootstrapライクなUIのWEBアプリが作れます。 ビューはJSONを定義して挙動を指定することが出来ます 各種UIコンポーネントはある程度揃っています。 関連エントリ これは超使いやすいページネーションの次世代UI フルスクリーンでページめくりをするUI実装デモ 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」 美麗なデザインのUIキット（PSD) ３０ iOSのアイコンフォルダ風のUIを作れるjQueryプラグイン「App Folders」 jQuery UI をタッチイベントに対応させ

iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」 2012年12月26日- jQuery YouTube TubePlayer Plugin - By Nirvana Tikku iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」。 スマホ、タブレットが増えてPCユーザが減少していっているサービスをちらほら聞きますが、こうした実装でスマホでYoutube動画再生？問題ない、という状況にしておくとよさそう。 当然、Flashによるフェイルバックも対応しています。 プレイヤーのコントロール用APIも使いやすそう。 誰でも簡単に使えそうなところがよいですね 関連エントリ Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」 Youtube動画をページ

How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった

CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集

gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

Pretty Pie Menu Demo ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」 次のような円形のメニューを実装できます。アニメーションがカッコいいので実際に見てみましょう デモページ 使い方は以下のようにオプションを渡すみたいです。画像は自分で作れるので画像を変えれば全く印象の違ったものを作れそうです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 折り畳み可能なシンプルツリーメニュー実装jQ

こんなアイテムも好きかも？を実装するためのレコメンドエンジンのオープンソースまとめ 2011年03月30日- こんなアイテムも好きかも？を実装するためのレコメンドエンジンのオープンソースまとめ。 amazonや色々なCGMサイトが導入していますが、何かのアイテムを見ているとき、関連したアイテムを出してあげるという仕組みをまとめてみました。 協調フィルタリングともいいますが、CGM的なサイトなんかを作る際には覚えておくと利用者満足度やPV増に繋がりますね。 それでは以下にまとめます。 cicindela Perl+MySQL5で動作。WEB API 形式で呼ぶことが出来るため、PHP等の他の言語から呼び出すことも容易です。 vogoo PHPのソースからrequireして使うタイプのPHPライブラリ。MySQL利用。PHPソースから直接利用したい場合に使えます OpenSlopeOne こち

25 Quality Responsive WordPress Themes | Design Woop | The Web Design and Development Blog 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５。 WordPressを使うことで、いろんなことがプラグインで簡単に実現できてしまいますが、レスポンシブWEBデザインのテーマが出てきている模様。 更にレスポンシブなだけじゃなくて、めちゃめちゃカッコいいテーマが揃ってます 幅を少なくするとスマホ用のインタフェースに早変わり。 他にも以下のようなデザインが。是非幅を少なくして試してみましょう。 テーマとしての利用だけでなく、デザインの参考にもかなり使えそうです 関連エントリ フレッシュなWordPressテーマ１００ プロフェッショナルでクリエイティブで参考になるWordPressテーマ４０

Jquery Notification Plugin. Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン。 次のようなバーを通知としてページ上部にスライドさせつつ表示するプラグインです。 閉じるボタンなんかもついています WarningやInformationとしてバーの色を変えて出し分けることも出来ます 関連エントリ div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」

異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div