要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
スマホでも多階層のメニューが作れるレスポンシブな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のサイドメニューっ
grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」:phpspot開発日誌
Beyond grep: ack 2.04, a source code search tool for programmers grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」。 サーバに入ってコードを書いている人はかならず使うgrepですが、grepよりも高速に検索でき、git,svn等のソースコード以外のソースはgrepしないで検索できるツールらしいです。 Perlで書かれていて、Perlの強力な正規表現が使え、ハイライトしてくれます。ソースツリーの下で「ack 検索ワード」で検索するだけというシンプルさもいいです WEBサービスを書いているとhtmlやphp等色々なソースをいじりますが、ファイルの検索対象も選べるため、便利です。 ack --php <検索ワード> でphpのソースのみを対象とし、ack --nophp <検索ワード>でphp
要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」:phpspot開発日誌
Hover Captions (HCaptions.js) 要素の上にクールに表示できるCaption実装jQueryプラグイン「HCaptions.js」 画像等にカーソルを合わせるとCaptionが出る、というのをカッコよく実現できるプラグインです。 キャプションの上にボタンなんかも表示できて、編集画面等でつかえそうです アニメーションが色々とカスタマイズでえらべるのでサイトの特徴に併せて動きを調整できます 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなアナログ時
PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」:phpspot開発日誌
PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」 2013年05月24日- Browser code editor awesomeness : ICEcoder PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」 ブラウザ上だけどツリービューでファイルを開けたり、タブでファイルを複数開けたりIDE顔負けのインタフェースを持つエディタ。 OSSなので自分のサーバに設置して使うことができます。リモート開発の方法は色々ありますが、Chromeだけでサクサク開発するっていう手法もなかなか便利なのかも。 こういうのを１０年ぐらい前の人に見せてあげたいですね。 そういう意味では１０年後が恐ろしかったりします。 関連エントリ フルスクリーン編集可能なWYSIWYGエディタ実装jQ
ピクトグラムアイコンの検索に便利な「IconsDB」:phpspot開発日誌
Icons DB - free custom icons ピクトグラムアイコンの検索に便利な「IconsDB」 フリーのピクトグラムアイコンを探してICO,PNG,GIF,JPG等でダウンロードが可能。 cloudで検索してみた例。目的の物を簡単に発見出来ます 関連エントリ ソーシャルサイトのピクトグラムアイコン112個セット WEBサイト制作に使えるベクターアイコンセットｘ２５ スマホ用のアプリアイコンのりサイズを一発で作成できる「Makeappicon」 ゲームに使えそうな960種類以上のアイコンセット「Game icons」 手書き風だけどリアルなソーシャルメディアアイコンセット１５ Windows8風デザインのソーシャルアイコン９６個セット「Simple Icons」 分かりやすいフリーのスマホ用ジェスチャーアイコン12種類
jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」:phpspot開発日誌
Hello jQuery.PrettyTextDiff - Arnab's Universe jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」 次のようにdiffをjQueryでやってくれます。テキストのbefore,afterをブラウザ上でやってくれます。 ブラウザ上で動的にDIFFを表示できるので、投稿前に、こう変わったよってところを表示できてかなり便利ではないでしょうか。 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン１０ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columni
jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」:phpspot開発日誌
Canvas Query jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 canvasのコードが次のようにjQuery風かつ直感的に記述できます jQueryを使っている人にとってはCanvasがより身近になりそうなライブラリですね スマホ・タブレットの普及でCanvasも重要な技術要素になっていく可能性を秘めていますが、基本を学んだ後はこうしたライブラリを使って便利に扱うのもよさそう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 canvasを使って画像をスタイリングするチュートリアル Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 CanvasとWebcamで作られたブラウザ上で動作する面白デモｘ２
アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」:phpspot開発日誌
Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」:phpspot開発日誌
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」 2012年09月12日- TideSDK | Create multi-platform desktop apps with HTML5, CSS3 and JavaScript HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」。 元々はTitaniumDesktopとして開発されていましたが、TideSDKという名前になったっぽい。 Windows, Mac, Linux のアプリをWEB開発言語で開発できるTitaniumMobileみたいな仕組みです。 スマホだけじゃなくてやっぱりデスクトップアプリも欲しいということがありますから、こういう仕組みでさっくりとやってしまいたいですね。 Windows版アプリ Linux版アプリ Mac
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」:phpspot開発日誌
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」 2012年08月13日- AuthManager - StitchApps もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」。 ユーザ認証型のサイトを１から作るとなると面倒な上に、もう誰かが良い物を作ってるんじゃないかという事を誰もが作り直してる気がします。 こういうもの自体をオープンソースにしちゃって誰もが使えるっていうのは素晴らしいですね。 Facebookによる認証やreCAPTCHAによるスパム防止、メールアドレスの認証機能といった標準で必要な機能が入っており、便利に使えそう。 で、ユーザ登録できるのはいいんだけど、肝心の制限はどうやってかけるの？というところは、次のように簡単にやってね、ということらしくお手軽。 ($sesslife自体がどこか
CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２:phpspot開発日誌
12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
使えるHTMLエンティティ文字 - raquo,laquo:phpspot開発日誌
使えるHTMLエンティティ文字 - raquo,laquo。 HTMLオンリーで横矢印の文字を表示できるのですが、あまり知られていないようなので紹介です。 以下のような記号をHTMLエンティティ文字で表現することが可能です。 « (＆laquo;) » (＆raquo;) これは例えば、「ダウンロード » 」といったような使い方が出来ますね。 「ダウンロード→」 のように、右矢印記号よりも断然カッコよく表示できます。 これまで、画像でこういったイメージを作っていたという方も、この文字を使うことで楽を出来るということで覚えておきましょう。 他にも、「HTMLエンティティ文字を検索「HTML Entity Character Lookup」」で紹介したサイトで便利なエンティティ文字が見つけられるかもしれません。 エンティティ文字を活用して、デザインを楽にしましょう！
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クールなローディングエフェクトのアイデア＆サンプル集:phpspot開発日誌
世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌
JavaScriptのコードでPDFを生成できる「jsPDF」:phpspot開発日誌
node.jsで超カッコいいリアルタイムチャット「Balloons.IO」:phpspot開発日誌