ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」:phpspot開発日誌
equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
ブラウザに分かりやすい通知を送れるスクリプト色々:phpspot開発日誌
あけましておめでとうございます。 今年も淡々と更新をしていきます。よろしくお願い致します。 今年一発目のエントリはブラウザに分かりやすい通知を送れるスクリプトを色々とまとめてみました。 jNotify ページ全体がグレーアウトし、メッセージが強調表示されます。 他の操作がしばらくできないので、確実にメッセージを読んでもらえるようにできます。 アイコンの変更や、メッセージにHTMLを使うことも可能。 Notimoo ページの右上なんかにフェードインしながらブロックをアニメーション表示させられるJSライブラリ。 複数メッセージを連続して出すことが出来ます。 jQuery Notify bar Twitterの通知バーっぽいＵＩでユーザ通知できるjQueryプラグイン。 これも非常に分かりやすい通知が行えます。 jQnotice 吹き出しっぽいデザインで通知が行えます SlideNote 指定位
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」:phpspot開発日誌
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記）じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日本語環境を前提には、考えていないように思われます。 ・ＡｃｔｉｏｎＳｃｒｉｐｔ の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした！ 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い
ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」:phpspot開発日誌
Plugins | jQuery Plugins ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」。 サイト巡回しているとたまに見かける、ブラウザの端っこについている次のようなボタンを簡単に実装できるjQueryプラグインです。 押下時に「ページの上にスクロールさせる」機能を実装できユーザビリティ的には上げられそうな場面がありそうです。 利用法としては、次のような感じです。 $(element).edgeButton({ buttonText: "ボタンのテキスト", buttonPrefix: "ボタンのプレフィックス", buttonDirection: "ボタンの配置位置 right, left で指定", buttonFunction: "ボタン押下時の動作指定" }); 自前でやるとなると、ボタンを配置して固定してクリック時にスクロールして
フォームのユーザビリティに貢献するjQueryプラグイン:phpspot開発日誌
Top 10 jQuery plugins for Form Usability ・Steve Reynolds フォームのユーザビリティに貢献するjQueryプラグイン。 入力制限やヒント表示といったフォーム入力に関する便利プラグインが色々と紹介されています。 AlphaNumeric アルファベット＆数字のみに入力を制限する JTip 入力ヒントボックスの設置 Password Strength Indicator パスワード強度の表示 Ajax Username Checker 使えるユーザ名か、ajaxでチェック Geogoer VChecks チェックボックスをファンシーなデザインにした上で押しやすくする 全部見る ブラウザが対応していなかったりすると、ユーザビリティ以前に使えないということになりかねませんが、そこら辺を検証してうまく使えばよいフォームが作れそうですね。 関連エン
AjaxなTODOリストをMySQL＋PHP＋jQueryで作成するデモとチュートリアル:phpspot開発日誌
AJAX-ed Todo List With PHP, MySQL & jQuery ? Tutorialzine AjaxなTODOリストをMySQL＋PHP＋jQueryで作成するデモとチュートリアルが公開されています。 プログラムのダウンロードも可能です。UIも次のようになかなかお洒落でシンプル 編集時はインラインでそのまま編集することが出来ます。 削除の際にはダイアログが次のように現れて削除の確認を行います。 なんらかのプログラムのベースとして使えそうですね。 入門としてもなかなか、やりごたえのあるチュートリアルではないでしょうか。 関連エントリ PHPとjQueryのAjax連携の学習用チュートリアル PHPによってCSSを動的に出力する初心者向けチュートリアル Ajax/CSS/PHP等のチュートリアルまとめ
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」:phpspot開発日誌
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
WEBデザイナ/開発者が覚えておくと便利なブックマークレット集:phpspot開発日誌
15 Must-Have Bookmarklets For Web Designers And Developers WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。 起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。 ReCSS - Reloads The CSS 起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる Edit Any Website - ブックマークレット XRAY - See Details Of Any Web Element 起動するとJavaScript製のＤＯＭインスペクタが起動します。 MRI 起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。 Design - Grid-Rule-Unit-Crosshair 起動すると、4
PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」:phpspot開発日誌
Free, Fast and Easy CSS webpages! | psd 2 CSS Online psd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」 PSDファイルをアップロードすると、内容を読み取った上で、レイヤーごとにブロックが分けられた状態のXHTML＋CSSを取得できます。 簡単なPSDファイルを送ってみたところ、完全ではないですが、再現することが出来ました。 PhotoShopにも同じような機能はありますが、必要な画像のみトリミングしてくれ
IEでのデバッグ/動作確認に便利なソフトいろいろ:phpspot開発日誌
IEでのデバッグ/動作確認に便利なソフトいろいろ。 沢山あるのでまとめてみました。 IETester IE5.5, IE6, IE7, IE8でのページレンダリングを1つのソフトで一括チェックできる超優れものソフト。 Vistaでも使えるようで今後のWEB開発に必須となりそうなツール。 IEとFirefoxの同時レンダリングはCSSVistaが便利。 DebugBar IEに便利機能のついたツールバーを追加 ブラウザ画面のキャプチャをメール送信 カラーピッカー 特定の画面解像度にリサイズする機能 ページの表示を 10% 〜 800% まで拡大/縮小表示できる( IE の Zoom 機能使用 ) 画像やFlashなどのobject も拡大縮小できます ソースコードをハイライト付きで表示 オリジナルのソースと、IEが解釈した後のソースを見比べることも可能 指定文字列ハイライト検索機能 Comp
CSSを書く際の5つのテクニック:phpspot開発日誌
CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はインデントして読みやすくしよう h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; } 確かに、これは分かりやすいかもしれません。今後導入しようと思います。 3. セクションごとにコメントを入れて構造化しよう /* Structure */ ...
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
