ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」:phpspot開発日誌
equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」:phpspot開発日誌
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 2012年04月12日- Retina.js | Retina graphics for your website Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 <img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。 インストールはretina.jsを読み込むだけというお手軽さがいいです。 単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。 <script type="text/javascript" src="/s
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチな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はなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
iOSのシェイクイベントを取得できるjQueryプラグイン「gShake」:phpspot開発日誌
Attach a function to iOS’s shake ? gShake | Webification iOSのシェイクイベントを取得できるjQueryプラグイン「gShake」。 このプラグインを使うことで、iPhoneをシェイクした際にブラウザ上でイベントを起こして処理を行うことができるみたいです。 iOS4.2以降で動作するそうです。 実装にはライブラリを読み込んで次のようにコールバックを設定するだけのようです。 動きなどは検証していないのですが、HTML5ベースでアプリケーションを作るぜ、という場合に便利に使うことができるかも。 関連エントリ スマフォでも使える３Dカルーセル実装jQueryプラグイン「Cloud Carousel Touch」 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 レイアウトに関する強力なjQ
手書き感がなんとも素晴らしいアイコンセット集:phpspot開発日誌
手書き感がなんとも素晴らしいアイコンセット集をまとめてみました。 アイコンというとキッチリしたものが多いですが、こうした手書きアイコンをサイトに盛り込むと温かみのある雰囲気に作れそう。 RM Kute Toolbar Icons by *Raindropmemory on deviantART 手書きなんですが、RSSとかスターとか、検索とかWEBアプリケーションに使えそうなアイコンセットです。 Red Little Shoes Icon set by *Raindropmemory on deviantART こちらもなんとも味のあるアイコンセット。WEBアプリに使えそうなものもいくつかありますね。 Watercolor Free Icon Pack | Tutorial9 こちらも少しテイストが違いますが手書きのアイコンセット。Twitterらしき鳥もありますね 絵を描くのが得意な方は
エクセレントな４５のイラストレーターのブラシ集:phpspot開発日誌
45 Excellent Sets of Adobe Illustrator Brushes エクセレントな４５のイラストレーターのブラシ集。 次のようなハイクオリティのブラシセットの紹介です。 どれも応用範囲は広く、活用すればデザインの仕事もすぐ終わってしまうかもしれません。 35 Free Abstract Illustrator Brushes 104 Incredible Retro-Style Pixelated Illustrator Brushes 30 Illustrator Pattern Brushes for Making Flowers and Circular Designs Fresh Brushes Floral n Veins Brushes ClickPopMedia Brushes 16 Sketchy Illustrator Brushes Illus
3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリ集:phpspot開発日誌
3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリ集 2008年08月22日- Adrian Parr’s Blog Blog Archive AS3 Code Libraries 3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリが紹介されていました。 ActionScriptというとライブラリもあまり知らない人が多いのではないでしょうか。 3Dエンジン Papervision3D http://blog.papervision3d.org/ Away 3D http://www.away3d.com/ Sandy 3D http://www.flashsandy.org/ Alternativa Platform http://blog.alternativaplatform.com/en/ FIVe3D http
Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル:phpspot開発日誌
PSDTuts - Photoshop Tutorials and Links - A Slick Supernatural Text Effect In this tutorial we'll be creating a smokey night effect on text to give it an eerie supernatural sort of feel. Photoshopで幻想的なファイナルファンタジー風のロゴ作成チュートリアル。 次のようなロゴを素材を使わずに1から作成していくPhotoShopチュートリアルが公開されています。 フィルタのみで星空を作ったり、波形フィルタを何度もかけて煙のようにしていくテクニックは色んな場面で使えそう。 チュートリアルを辿って次のような画像を作成してみました。 チュートリアルをこなすことで様々なテクニックを身に付けられるので一度こなして
線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル:phpspot開発日誌
線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル 2007年11月21日- CornOnCob : SwooshyLines Tutorial In this tutorial, I will show you how to make an abstract ribbon-like effect using only Adobe Photoshop 線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル。 次のような美しい画像を作成するチュートリアルです。 PhotoSohpであれば、素材を使わずとも、こういった美しい画像が作れます。 応用することで、オリジナルの美しい画像が幾通りも作れそう 関連エントリ PhotoShopでMacOS、Leopard風ロゴを作るチュートリアル 煙風エフェクトをカッコよく作るPhotoS
プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」:phpspot開発日誌
Free online web template generator プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」。 doTemplateでは、基本となるテンプレートが12種類用意されており、「CUSTOMIZE」をクリックすることで自由にテンプレートをカスタマイズすることが出来ます。 カスタマイズを押すと、次のようなパネルが表示され、背景、コンテナ、タイトル、バナー、ナビゲーションなどの部分の色や各種サイズについてのCSSをカスタマイズすることが出来ます。 DOWNLOADボタンを押せばそのままテンプレートをダウンロードすることも可能。 ＺＩＰ形式でダウンロードでき、HTMLとCSS、画像が含まれたアーカイブを入手できます。 カッコよくデザインされたサイトを手軽に作るには非常に便利なツールですね。
映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル:phpspot開発日誌
PSDTuts Advanced Glow Effects In this tutorial we're going to create some really sharp looking glow effects using a combination of layer styles, the pen tool and colour blending. 映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル。 次のような画像を作成するチュートリアルです。 本当に綺麗で、パンフレットの表紙、WEBデザインのタイトル部分など、様々な部分に応用することが出来そうです。 チュートリアルを参考に画像を作ってみたところ、次のような画像が出来ました。 関連エントリ PhotoShopで７色に輝く美しいパーティクルエフェクトを作成するチュートリアル 壁に落書きをしたよう
Firefoxで別ブラウザのレンダリングエンジンを使う拡張いろいろ:phpspot開発日誌
Firefoxで別ブラウザのレンダリングエンジンを使う拡張いろいろ。 Firefoxに拡張をインストールすると、Firefox上で別ブラウザのエンジンを動かし、レイアウトの確認などを行えますが、色々と拡張が存在するようです。 IE View - IEエンジン使用 IE Tab - IEエンジン使用の別バージョン OperaView - Operaエンジン使用 FirefoxView - IE View 上で右クリックした際に「View This Page in Firefox」が表示 Safari View - MacOS X 上で動作するSafariビュー IE View Lite - IE View のライト版 Webデベロッパーの方は、ブラウザ互換を確認する際に非常に便利なのでインストールしておいた方がいいですね。
特定のIPアドレスからのアクセスを禁止する.htaccessジェネレーター:phpspot開発日誌
.HTACCESS IP, Referrer, and Hotlink Banning Generator The below form generates the appropriate .htaccess code to ban visitor(s) from your site based on their IP address. 特定のIPアドレスからのアクセスを禁止する.htaccessジェネレーター。 フォームに次のようにIPアドレスを列挙するだけで、必要な.htaccessコードが得られます。 次のような .htaccess コードが得られました。 ## USER IP BANNING <Limit GET POST> order allow,deny deny from 42.12.5.34 deny from 193.110.145.185 deny from 212.1
PhotoShopでMac風の美しいバックグラウンドを作成するチュートリアル:phpspot開発日誌
Creating a Mac-Type Background in Photoshop This tutorial is about making a “mac” style background. PhotoShopでMac風の美しいバックグラウンドを作成するチュートリアル。 次のような背景画像をPhotoShopで作るチュートリアルです。覚えておくとサイトデザイン時などにかなり活用できそう。 次がその流れ。 作っている工程も、徐々に背景が出来ていって、なかなか楽しい感じですね。 関連エントリ 人物の写真をPhotoShopで美しく修正するチュートリアル PhotoShopでRSS標準アイコンを作成するチュートリアル PhotoShopでタバコの煙風クール画像を１から作るチュートリアル
便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌
Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか？(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限
WEBデザインの際に参考になる50サイト:phpspot開発日誌
My 50 favorite design resources There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. WEBデザインの際に参考になる５０サイトの特集。WEBデザイナーの方にはありがたいリソースですね。 クールCSSサイトのまとめサイト Unmatchedstyle cssBeauty cssvault Stylegala CSS Drive css thesis Styleboost CSSElite CSS Import Web Cr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5動画プレイヤーを拡張させられる「jquery-video-extend」:phpspot開発日誌
2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」:phpspot開発日誌