先進サイトはやっている「？キー」押下でキーボードショートカットのヘルプが作れる「QuestionMark.js」:phpspot開発日誌
QuestionMark.js 先進サイトはやっている「？キー」押下でキーボードショートカットのヘルプが作れる「QuestionMark.js」 キーボードの？を押すとサイトに実装されたキーボードショートカットが表示されます。 なんと、TwitterやGithub、GmailやGoogle+ではこの機能が実装されていますが知っていましたか？ 依存ライブラリがなく軽量サイズなライブラリとなっています 関連エントリ CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットだけど立体的なCSS3アニ
バッテリーが必要な場合やネット接続がない場合に警告を表示できるjQueryプラグイン「FailSafe」:phpspot開発日誌
FailSafe - A jQuery Plugin to make your App Robust バッテリーが必要な場合やネット接続がない場合に警告を表示できるjQueryプラグイン「FailSafe」 次のように、バッテリーがなかったり、接続状態が悪い場合に警告を出してくれます。 操作時にバッテリーやインターネット接続が必須なサービスの場合は使うと便利そう。 尚、バッテリー残量を取得する場合はFirefox等の対応ブラウザのみとなります。 関連エントリ ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 タッチができてレスポンシブなカルーセル実装jQuery
ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」:phpspot開発日誌
ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 2013年09月19日- jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 パララックスというと最近よく見ますが、殆どはたて型のスクロールですよね。 横にスクロールすることでまた違った印象を与えることができそうです。jQueryプラグインなので超簡単に実装が可能です 横スクロール型にすることで２DアクションゲームのようなWEBサイトにしてみても面白いかも。 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装
テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」:phpspot開発日誌
Treegrid jquery plugin デモ：TreeGrid for Bootstrap 3.0.x テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」。 Bootstrap3なサイトでも使うことができるようです。マークアップ上はただのテーブルですが、これを階層化して開閉できるUIは便利そうです。 こうしてますますBootstrapが強化されていって作り手としては嬉しい限りですね 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるア
iPhone5Sのベクター形式のPSD素材が早くもUP:phpspot開発日誌
iPhone 5S Psd Vector Mockup | Psd Mock Up Templates | Pixeden iPhone5Sのベクター形式のPSD素材が早くもUPされました。 新色のゴールドもあります。docomoからもiPhoneということで今後よりiPhoneの重要度が増していくと思いますが、サービスの作り手としてもこういう素材は重要になってきますね 関連エントリ RubyでPhotoshopのPSDデータを操作できるライブラリ「PSD.rb」 AppleやFacebook等、有名サイトのUIをPSD形式でダウンロードできる「Popular UIs」 iOS7のUIが詰まったPSD「iOS7 GUI PSD」
軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」:phpspot開発日誌
SCEditor - A lightweight WYSIWYG HTML and BBCode editor - SCEditor 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 ユーザインタフェースがシンプルなので、どんなサイトでも簡単に使えそうです。 Youtube動画の挿入機能や顔文字の挿入機能等も便利そうです。 Bootstrapを使ったサイトでもマッチしそうなデザインです。 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 簡単にクールな他言語サイトがWYSIWYGで作れる「Edicy」
iOSスタイルのオーバーレイ通知を実現するJS「iosOverlay.js」:phpspot開発日誌
iosOverlay.js iOSスタイルのオーバーレイ通知を実現するJS「iosOverlay.js」 webviewを使ったアプリ等でよく見られるローディング表示を通常のブラウザでも実現できるライブラリです 分かりやすくて既存デザインを崩さないローディングということでAjaxアプリなどで使えそうです 関連エントリ ボタンに直接ローディングアニメーションを付けられる「Ladda」
ブラウザ上でサイトの画面サイズを自由に切り替えてレスポンシブ開発に使えるWEBアプリ「Screenfly」:phpspot開発日誌
Screenfly / Test Your Website at Different Screen Resolutions ブラウザ上でサイトの画面サイズを自由に切り替えてレスポンシブ開発に使えるWEBアプリ「Screenfly」。 まずURLを入力するとサイトがiframeで表示されます。で、次のようにツールバーにデバイスが表示されており、クリックで簡単にサイズ変更や回転ができるため、各種デバイス対応のためにブラウザ一本あれば便利かもしれないツールです。 色々と便利な物が出てきますね 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 フラットデザインが美
Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」:phpspot開発日誌
Bootstrap Magic : Generate your own bootstrap theme quickly and easily Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 ベースカラーや、フォントサイズ等、かなり多岐に渡るBootstrapのカスタマイズをWEB上で簡単に実施して、そのままCSSに保存できます（Minify化もOK) Bootstrapベースサイトを作る場合は覚えておいて損はないですね。 関連エントリ BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Twitter BootStrap に追加できる５つのコンポーネントパック
バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」:phpspot開発日誌
バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 2013年09月04日- AnimateScroll - jQuery Plugin for Animating Scroll バウンドさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 通常のアニメーションスクロールであれば、jQueryのanimate等で簡単に実現できますね。 このプラグインを使えば、リンクをクリックすると指定位置までスクロールし、バウンドやゴムのように伸び縮みするようなエフェクト付きでアニメーションが実装出来ます プロモーションサイトなどでインパクトを重視したい場合は使ってみるといいかもしれません 関連エントリ スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit
PCサイトでもスマホサイトのようにサイドバーを実装するデモ:phpspot開発日誌
Sidebar Transitions PCサイトでもスマホサイトのようにサイドバーを実装するデモ 画面のサイドにメニューを出すのが一般的になってきましたが、タブレット等でも同様のインタフェースを実装したい場合に使えそうな様々なエフェクト付きデモが公開されています サイドバーを出すといっても出し方が色々とデモされており、カッコイイだけでなく勉強になります。 Safariなどでみてみましょう 関連エントリ フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ 複数階層のサイドメニューを実装するデモ＆サンプル CSSアニメーションでページを紙芝居の様に切り替えるデモ フラットで小気味よく動くボタンスタイルのデモ＆サンプル
フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ:phpspot開発日誌
Creating CSS3 Animated Modal Windows in an Image Gallery | InsertHTML フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ。 フラットデザインなのに立体的なUIはなかなかクールで、フラットデザインを実装する上で今後欠かせない要素となってきそうです。 そのモーダルダイアログを実装するデモが公開されており、一見の価値ありです。 関連エントリ ハイクオリティなソーシャル向けのフラットアイコンセット BootstrapベースのフラットUI実装フレームワーク「Furatto」 文具等のフラットなステーショナリーアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」
複数階層のサイドメニューを実装するデモ＆サンプル:phpspot開発日誌
Multi-Level Push Menu | Codrops 複数階層のサイドメニューを実装するデモ＆サンプル スマホのFacebookアプリ等でおなじみのサイドメニュー。タッチ端末では結構使いやすいわけですが、これを階層化してみたデモです。 単に折畳み型のUIでもよさそうですが、こちらのデモでは更にサイドバーを被せるようにしてクールに下層のメニューを展開できます。 １つの実装方法として覚えておくと便利そうですね。 関連エントリ Nexus7のページっぽいカッコいいページ作成チュートリアル「Google Nexus Website Menu」 邪魔にならない検索ボックスを作るチュートリアル レスポンシブなアイコングリッド作成チュートリアル モダンなサイトを作成するためのCSS3チュートリアル集
リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」:phpspot開発日誌
リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 2013年08月22日- Menutron リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」。 メニューがリストで並んでいるよくあるサイト。ブラウザの幅をせまくすると・・・ selectボックスけいしきのナビゲーションに変換してくれます。自動でやってくれるのは便利です。 リストを縦に並べるだけだとなんだか使いにくいサイトになってしまいそうですが、Selectにするのはなかなかスマートかも。 関連エントリ タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応でCSS3アニメーションを使った超クール
世界のモニュメントのアイコン２５０個セット:phpspot開発日誌
Exclusive Vector Freebie: 250 Ultimate World Monuments Icon Pack by Freepik - noupe 世界のモニュメントのアイコン２５０個セット 自由の女神や、エッフェルタワー有名な建物等がセットになったものがダウンロード可能です 旅行サイトなんかにつかるかもしれませんね。 関連エントリ 200種類のフリーな汎用ベクターアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」 ピュアCSSで描かれたアイコンセット「Cikonss」 ハイクオリティなソーシャル向けのフラットアイコンセット フリーな1262種類のフラットアイコン「COSMO MINI」
スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」:phpspot開発日誌
スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 2013年08月08日- Sticky-Kit | jQuery plugin for sticky elements スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 スクロールしても、ナビゲーションは固定位置に表示させたいという場合があります。最近流行りですね。 かなり複雑なレイアウトであっても、簡単に要素を固定し、ユーザビリティ向上に繋げられるのは便利。 実際にこれを１からやろうとするとかなり大変ですが、jQueryプラグインのため、1行でサクッと実現できるあたりが素晴らしいです 関連エントリ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ドラッグ＆ドロップで再編成できるPinteres
スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」:phpspot開発日誌
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin. スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 次のようにスマホでも階層を開閉できるレスポンシブなメニューが実装できます。デザインもいい感じ。 PCでも横長に違和感なく表示することが可能 スマホサイトを作る上では覚えておいて損はなさそう 関連エントリ 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 レスポンシブなiPhoneのサイドメニューっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」:phpspot開発日誌
フリーのiOS7アイコン800個セット:phpspot開発日誌
iOSスタイルのヘッダーが作れるjQueryプラグイン「Stacks」:phpspot開発日誌