ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」:phpspot開発日誌
equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
ビューティホーな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でここまでクールにできるというプロフェッショナルサイト集
jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌
jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル
ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」:phpspot開発日誌
AutoAnchors jQuery Plugin ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 見出しに<h3>なんかを使っていたとして、このプラグインを初期化すると次のような目次があらわれてクリックすれば指定の場所に移動できるという物が作れます。 h3で記事を書いておいてとりあえず後で見返してナビゲーションを作るなんていう作業をしたことがありますが、自動でやることで文書の変更にも対応できますね。 次のように、h3とか好きなタグは自分で選ぶことが出来ます。 ナンバリングもやってくれちゃいます。 関連エントリ ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 Twitter OAuth認証をポップアップで行うjQueryプラグイン ファンシーなデザインのカウントダウンタイマー実装jQueryプ
テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」:phpspot開発日誌
テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 2011年10月21日- ottonascarella/TextBlur - GitHub テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」。 次のように最初はぼやけてるけど徐々にくっきりした文字にするなんていうことができるjQueryプラグインです。 単にテキストをその場で表示しちゃうよりも、徐々に表示するというエフェクトがいいですね。 使い方も次のように超簡単にできます。 $('h1').animate({textBlur: 20}, 0); 但し、IEでも一応対応はしているようですが、うまくは動作しないみたい。 スマホのプロモーション用のサイトなんかで使ってみてもよさそうですね。 関連エントリ テキストにグラデーションをかけられるj
Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」:phpspot開発日誌
Red Plugin Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」 YoutubeのAPIを使って独自の再生ボタンを作ったり、再生時間なんかを表示させたり、埋め込み動画をその場でリサイズしたりすることが可能です 独自のテキストベースの再生・停止ボタン 現在の動画時間のリアルタイム表示 右下のつまみをドラッグ＆ドロップで動画をリサイズ（これは便利） APIを調べるのが億劫でも比較的簡単に実装できそうです 関連エントリ APIを使わずにYoutube動画のサムネイルを得る方法 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
新しめのPhotoshopテキストエフェクトチュートリアル集:phpspot開発日誌
25 Best Photoshop Text Effects of All Times 新しめのPhotoshopテキストエフェクトチュートリアル集 古いものも含まれていたりしますが、新しめの面白いテキストエフェクトも多数まとまっていました。 テクニックは色々と応用できそうです 関連エントリ テキストと人物を組み合わせてカッコイイ画像を作るPhotoshopチュートリアル 動画で学べるPhotoshopチュートリアル２０ 広告デザインのためのPhotoshopチュートリアル１５
div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」:phpspot開発日誌
Div Linker | jQuery Plugins div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」。 次のようなマークアップがあったとして、この場合は「Link text」部分にしかリンクされません。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <br /> <a href="//www.google.com">Link text</a> </div> そこでこちらのプラグインを使って初期化します <script> $(".divlinker").divlinker(); </script> するとDIV全体がクリックできるようになるというもの。 デモページ HTMLをきれいにかきつつdiv全体を<a>みたいに動かすことができます 関連エントリ RSSやA
リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌
jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基本的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
綺麗なデザインで多言語対応、テーマやプラグイン対応のCMS「Fork」:phpspot開発日誌
Fork the Open Source CMS 綺麗なデザインで多言語対応、テーマやプラグイン対応のCMS「Fork」。 管理画面も綺麗で、肝心のページ用のテーマもクールなものが揃っており、WordPressのようにプラグインを追加できたり、アクセス解析画面を統合できたりします。 個人的にいいなと思ったのが、言語ごとにページを管理できる点で、日本語と英語のページを同じCMS内で切り替えて作成できる点。 例えば、スマホアプリなんかの紹介ページで国際展開したい場合なんかにも、言語を切り替えてそれぞれページを作れるので、便利だなと思いました。 管理画面の選択ボックスから言語を選べば編集対象の言語を選べ、それぞれの記事は区別されます。ので国際対応のサイトを作るにも便利 http://demo.fork-cms.com/en や http://demo.fork-cms.com/nl といった感じ
RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」:phpspot開発日誌
FeedEk jQuery RSS/ATOM Feed Plugin RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」 普通にコーディングするよりもはるかに楽で分かりやすいコードで実装できます。 表示例 とりあえずマークアップ記述 FeedEkメソッドにフィードのURLと表示数などをオプションとして渡してあげるだけです。 フィード先のサーバに負荷がかからないように注意したいですが、JSでやりたい場合の参考に。 関連エントリ ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」 Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 ソーシャルな活動を１個にまとめて配信できる
ページを直接編集できるHTML5ベースのWYSIWYGエディタ「Mercury Editor」:phpspot開発日誌
Mercury Editor - Home ページを直接編集できるHTML5ベースのWYSIWYGエディタ「Mercury Editor」。 起動するとページの上部にツールバーが現れて、ページをそのままWYSIWYGで編集することが可能です。 リンクや動画、画像、テーブルなどの挿入、テキストフォーマットがツールバーから行え、そのまま保存することが出来る仕組みのよう。 編集画面。ページ内のコンテンツ領域のみを編集させることが出来ます。 サーバに保存するにはサーバ側での保存処理が必要みたいで、ここら辺はRailsを使って動かすみたいです。 対応ブラウザは以下。 Chrome 10+ Safari 5+ Firefox 4+ 関連エントリ 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」 まだまだあったJavaScript製のWYSIWYGエディタコンプリ
複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」:phpspot開発日誌
jQuery.Smart3D Info for Coders 複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」 マウス位置に応じて画像をずらせて奥行きを表現できます。 実装方法が簡単で、ul以下にliとimgタグを並べて初期化するだけというものです。マークアップ的にあんまりよろしくないのかもしれませんが、こうしたUIが必要なときに手軽に実装できます。 単なる画像よりも、こうしたインタラクティブな要素を入れるとより注目を集められそうですね 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 ページの要素を3D化できる面白jQueryプラグイン「3Dify」 次世代のイメージマップを実現できるjQueryプラグイン「ImageMapster」
サイトのクロールを最適化するための１５のTIPS:phpspot開発日誌
15 Ways to Improve Website Crawling | PVM Garage サイトのクロールを最適化するための１５のTIPSが公開されていました。 検索エンジンにうまくクロールしてもらえないと検索ページにも表示されず、トラフィックをみすみすのがしてしまうことにもなりそうですが、クロールを最適化するTIPSが公開されており、サイト作成時や公開時の参考にできます 以下にその目次と個人的に知っていることを追記しています。 オリジナル記事の翻訳ではないので、元記事を読みたい場合は元記事を参照してみてください。 パンくずリストを作る - サイト構造を検索エンジンに教えることができる 検索結果にもパンくずリストが出ることがありますね。ユーザビリティだけじゃなくSEO的にも意味があるとのこと。 個別のポストに３〜５の関連エントリを添える 同種のエントリを加えることでグルーピングがで
3Dで本格的なプロダクトイメージを作れるPhotoshopアクション:phpspot開発日誌
3D Covers Pro: Create Photo Realistic High Resolution 3D eCovers 3Dで本格的なプロダクトイメージを作れるPhotoshopアクション。 まずアクションによって基本テンプレートを作成し、それをベースにデザインした後、アクションを実行することでソフトウェアパッケージ、DVD、書籍等のハイクオリティなイメージに変換することが可能。 DVDパッケージ。 本のパッケージの場合 ノートっぽいもの ソフトウェアパッケージ ＄３７の有償のアクションとなりますが、これだけ多数のパターンが使えれば、仕事を圧倒的に効率化してくれるだけではなく後々に色々な局面で使えることは間違いなさそう＆円高ということで入れておいてもよさそうです。 PayPalやクレジットカードによる支払いが可能です。 関連エントリ まるで魔法のようだ。２Dの図形を輝く３D画像に
WEBのデザイナーさんが持っておくと便利そうなPSD素材色々:phpspot開発日誌
100 Free PSD Files Every Web Designer Should Have - icanbeCreative WEBのデザイナーさんが持っておくと便利そうなPSD素材色々 WEBのレイアウトやパーツに関するPSDファイルが多数紹介されていて、素材として使えそうです。 PSDならレイヤー分けができていたりするものも多いので再利用性が高くて使い勝手がよいですね 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 クールなUIパーツを収録したUI作成用PSDキット「Transparent Glass UI」 色々使えそうなフリーのPSD素材ファイル３０
なんとなく和むイラストベースのWEBデザイン集60:phpspot開発日誌
60 Excellent Examples of Illustration in Web Design | Inspiration なんとなく和むイラストベースのWEBデザイン集が60サイトほどまとまったエントリのご紹介です。 イラストがうまい感じにWEBデザインに当てはめられており、イラストベースのサイト作りの際の参考に出来そう あえて探そうとするとなかなか無かったりするものですが、まとまっていると便利ですね。 関連エントリ 斬新なコメントフォームデザイン集 ビンテージ感が素晴らしいサイトデザイン集 デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 黒ベースのクールなWEBサイトデザイン集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーの曲を入手できる１３サイト:phpspot開発日誌