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
プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集:phpspot開発日誌
25 Excellent Photoshop Web Design Layout Tutorials プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集。 かなりクオリティが高くて、１つの仕事としてうけちゃったほうがよいぐらいのチュートリアルが沢山です。 本などでこうしたチュートリアル集を買うと千円以上したりしますから、なんとも有り難いですね。 英語で書かれていますが、英語力も同時に向上させちゃえるという意味では本当にいい教材です。 関連エントリ 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル フレッシュなPhotoshop用WEBレイアウトチュートリアル２５ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
シネマグラフGIFアニメで驚きの効果を作成するPhotoshopチュートリアル:phpspot開発日誌
How to Make Cinemagraph GIFs with Photoshop - Video Tutorial シネマグラフGIFアニメで驚きの効果を作成するPhotoshopチュートリアル。 次のような、ちょっとサプライシングなGIFアニメが作れます。実になめらかですね。 作成のチュートリアルムービーは以下。作成にはPhotoshopCS5のExtendedバージョンが必要ですが、体験版でも試すことが可能です。 Extendedバージョンが欲しくなりますね。 関連エントリ プロレベルのPhotoshopチュートリアル集 広告デザインのためのPhotoshopチュートリアル１５ 動画で学べるPhotoshopチュートリアル２０ 光のエフェクトを与えたクールなイメージ作成Photoshopチュートリアル２５
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
写真のようなリアルなオブジェクトを作るPhotoshopチュートリアル３１:phpspot開発日誌
31 Must Try Photoshop Tutorials in Creating Photorealistic Objects 写真のようなリアルなオブジェクトを作るPhotoshopチュートリアル３１。 次のようなリアルなオブジェクトを作るチュートリアルです。素材がない場合などはスキルのある人はこうしたものを１から作るスキルを持っていますが、これらチュートリアルから色々と学べそうですね。 ゲームボーイ。懐かしいですね・。 関連エントリ プロレベルのPhotoshopチュートリアル集 2009年の凄いPhotoshopチュートリアル100種 ポートフォリオデザインのためのPhotoshopチュートリアル２５ 動画で学べるPhotoshopチュートリアル２０
どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」:phpspot開発日誌
どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」 2011年05月12日- FitText - A plugin for inflating web type どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」 iPhone/iPadやPCでも文字をフィットさせられます。 ブラウザをリサイズしてもちゃんとフィットしてくれます。 文字を大きくしてインパクトあるように見せたい、でもズレたらなんかカッコ悪いという場合に使えますね。 PCの通常サイズ。 幅を小さくしたところ。 使い方は $(element).fitText() とやるだけでOKみたい。 １からやるとなるとちょっとめんどくさそうですが、これだけ簡単にできる「jQuery最高！」という声が聞こえてきそうですね。 （
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」:phpspot開発日誌
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプラグインを使えばブラウザ幅に応じて自動伸縮してくれます。 使い方はプラグインを読み込んだ後、次のように１行書くだけで実装できます。 <script type="text/javascript"> $.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg"); </script> 背景に大きな画像を指定し
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」:phpspot開発日誌
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」 2011年04月25日- 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」。 この春、会社に入って、サーバに入って vim でプログラミングさせられている人はそれなりにいそうですが、その場合に速攻でプログラミングをマスターできるquickrunプラグインを入れておきましょう。 プログラミングを覚えるには作って動かすが一番いいですが、「書いて」→「保存して」→「実行して」を一瞬で行えます。 具体的にはプログラムを書いていて、コマンドモードで「￥r 」をタイプするだけでペインが分かれてプログラムの実行結果が得られます。 VPSなどを借りて、これからプログラミングをはじめようって方にも有効です。 かなりインスタントに実行できるので、こう書くとこう出る、がサクサク進められる
ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」:phpspot開発日誌
CJ Object Scaler 3.0 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」。 幅300pxのブロックに、幅500の画像がきたらデザインが崩れてしまいますが、これをjQueryで自動補正してくれるプラグインのご紹介。 スクリプトでやってくれるため、予め自分でサイズを計算して指定しておく必要はなく、かつデザインを崩しません。 ブログなんかで、画像をアップしたけど、ちょっと大きくてデザイン崩れるかもっていう場合にも、自分でリサイズしなくてもやってくれるというのは楽でいいですね。 調整方法も２種類選べます。 ぴったりと埋める Fill 画像の表示領域をそのままで表示するFit 使い方は $(element).cjObjectScaler(options, callback) で、調整後のコールバック関数も呼べます。 $(element)
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
シンプルなポートフォリオサイト構築用WordPressテーマ25:phpspot開発日誌
25 Free Wordpress Minimal Portfolio Themes シンプルなポートフォリオサイト構築用WordPressテーマ25がまとまっていました。 かなり斬新な物がおおかったのでコメントと共にご紹介。 どう見てもWordPressサイトに見えない写真がメインコンテンツのブログ。 すごくオシャレでいい感じのフォトログが作れます こちらも写真をオシャレにならべたWordPressテーマ。これもWordPress使ってるとは思えません。 かなり斬新でクール なんと写真がメインで、カーソルを合わせることでテキストが出るという全く新しいインタフェース。 WordPress入れてこのテーマを入れて名刺に書いとけば、インパクトが大きいでしょう。 こちらはシンプルな写真ベースの記事サイト。 写真をメインのコンテンツにしつつもテキストも見やすいテーマ 他にも色々あるので参考にしてみ
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
高級っぽさを演出できるPhotoshopパターン500:phpspot開発日誌
500 Exceptionally Beautiful Photoshop Patterns For Classy Designs | Multy Shades 高級っぽさを演出できるPhotoshopパターン500がまとめられたエントリのご紹介です。 絨毯地やグラデーション等、背景にすればサイトがとたんに高級っぽくなりそうなパターンには困らなさそう。 単なる画像なわけですが、高級感が簡単に出せたりするところはWEBサイトのデザインの面白いところですね。 関連エントリ 200を超える非常に美しいPhotoshopのパターン集 背景画像に使えるPhotoshopの背景パターン2000 PhotoShopのブラシやパターンがいっぱい「myphotoshopbrushes.com」 サイトの背景に使うと印象を際立たせられそうな50のPhotoshopパターン集 背景画像に使えるレトロなPhoto
ブログを58の言語に瞬時に対応させるWordPressプラグイン「GTranslate」:phpspot開発日誌
WordPress GTranslate WordPress Plugins ブログを58の言語に瞬時に対応させるWordPressプラグイン「GTranslate」。 Google翻訳のAPIを使い、ページを５８の言語に対応させます。驚くべき部分は、Ajaxを使い画面遷移なしで、ブログそのままを瞬時に翻訳してくれるところ。 更に一度設定すればクッキーを使って設定が保存され、別のページに移動したとしても自動でページが翻訳されます（記事だけでなくナビゲーションも全て)。 インストール＆設定すると次のような言語選択ウィジェットが追加できます。 設定方法 インストールして、有効にすると、「設定」→「GTranslate」の項目が現れますのでクリック。 設定画面ではデフォルトの言語を「Default Language」→「Japanese」を選択して日本語に設定しましょう。 また、選択する言語が
超カッコいい確認ダイアログをjQueryで実装するチュートリアル:phpspot開発日誌
How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナー向けPhotoshopテクスチャファイル１０５:phpspot開発日誌