これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」:phpspot開発日誌
Image Zoom 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 <img>タグにsrcにサムネイル、data-*の形で拡大画像を指定して、後はプラグインで初期化するだけで超簡単に次のようなズーム機能が作れます。 ECサイトなどで実装すれば、製品画像を拡大できて便利ですね 実装は次のように超カンタン 関連エントリ マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
ビューティホーなHTML5＆CSS3テンプレート５０:phpspot開発日誌
50 Beautiful Yet Free HTML5 And CSS3 Templates | Free and Useful Online Resources for Designers and Developers ビューティホーなHTML5＆CSS3テンプレート５０ HTML5、CSS3のテクニックを学べる上に無料で使えるということでなかなか有用なまとめになってます。 学習がてら自分でも無料で公開しちゃうなんてのもよい学習メソッドかもしれませんね 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 Flash使ってなくてもHTML5でここまでクールにできるというプロフェッショナルサイト集
HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」:phpspot開発日誌
HTML5 Please - Use the new and shiny responsibly HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」 HTML5の学習や利用時に便利に使えそうです 条件指定でJavaScriptによってサクリと絞り込み可能。ページ遷移なしってのはいいですね プロパティの対応状況のサマリが見れます ９割がたのブラウザでHTML5が使える日はいつ頃でしょうね IEなどはどんどん強制アップデートをかけてもらいたいです 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 Flash使ってなくてもHTML5でここまでクールにできるというプロフェッショナルサイト集 サーバ送信不要なHTML5に
ハイクオリティイメージ作成のPhotoshopチュートリアル２０１１:phpspot開発日誌
Best Of 2011: Ultimate Collection Of High Quality Photoshop Tutorials | Free and Useful Online Resources for Designers and Developers ハイクオリティイメージ作成のPhotoshopチュートリアル２０１１ 今年も多数のPhotoshopチュートリアルがありましたが、そのまとめエントリです。 多くを学べそうです。年末などにやっちゃってスキルを上げて新年を迎えるみたいな感じに使えそう Photoshopもバージョンが上がって基本は同じとはいえ、すべてキャッチアップするのは大変だったりしますが、テクニックを覚えることで生産性があがってよい仕事ができそうですね 関連エントリ インパクトのあるグラフィックスを作成するPhotoshopチュートリアル３０ プロレベルでクオ
３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌
Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT
ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ:phpspot開発日誌
Path menu in pure CSS3 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ path.comのメニューというのは次のようなもので、クリックするとアニメーションしながらビローンと開くようなものです これをCSS3で実装したデモが公開されています。 アニメーションもしてJavaScriptも使っている気がしますがピュアCSS３とのこと。 気持よく動きます スマホサイトに導入してみるといいかもしれませんね。 関連エントリ フリーのCSSメニューテンプレートとチュートリアル集 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSSのナビゲーションメニューサンプル５５
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
jQueryの便利に使えるスニペット１０:phpspot開発日誌
10 awesome jQuery snippets | CatsWhoCode.com jQueryの便利に使えるスニペット１０。 次のような使えそうなスニペットが１０個あります 画像のプレロード rel="external"なリンクのtarget="_blank"化 アンカーへのスムーススクロール divカラムの高さを合わせる CSSプロパティに対応しているかテストする URLのパラメータを得る フォームでEnterキーを無効にする よく使う処理は覚えておくとよさそう 関連エントリ コンテンツをページ内でハイライトしつつ切り替えられるjQueryデモ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 ギャラリー等を面白く見せられるjQu
CSSで様々なアニメーションが実現できる「Animate.css」:phpspot開発日誌
Animate.css - a bunch of plug-and-play CSS animations CSSで様々なアニメーションが実現できる「Animate.css」 要素をバウンス、フラッシュ、フェード、シェイクといった多彩なアニメーションを使ってCSS3だけで変化させられる仕組みです。 CSSだけでもここまで出来るのかというところを確認する意味でも一度みておいてよさそうです 関連エントリ ピュアCSSでページ上に通知を出すチュートリアル Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5動画をフルスクリーンバックグラウンドに簡単設定できる「BIDEO.JS」:phpspot開発日誌
HTML5動画プレイヤーを拡張させられる「jquery-video-extend」:phpspot開発日誌
モダンで多機能な新しいPHP製CMS「Pagekit」:phpspot開発日誌
HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」:phpspot開発日誌
タッチデバイスでリストを並び替えたり削除したりできるUI実装ができる「Slip.js」:phpspot開発日誌
PHP製で自分のサーバで使えるリッチなWEBメーラー「RainLoop Webmail」:phpspot開発日誌
大きなパノラマ写真をGoogleMap風インタフェースで拡大縮小させられるライブラリ「PanoJS3」:phpspot開発日誌
立体的にアイコン付きでいい感じにデザインされたボタン作成Photoshop素材＆チュートリアル:phpspot開発日誌