紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jQuery Gallery Slider Plugin ダイナミックにスライドする画像ギャラリー。 prettyPhoto a j

Helveticaのボールドをベースにデザインされた、ロイヤリティフリーのベクター形式のアイコンを紹介します。 Helveticons アイコンは、サイズ16x16～512x512がPNGで用意されており、PSD, EPS, PDF, AIなどのフォーマットが揃っています。 245個がセットで、$279で販売されています。 1個あたりだと、100円ちょいですね。 また、サイトでは無料のフォルダアイコンも配布されています。

ホバー時に浮かぶエフェクトがとってもリアルなスクリプトをAdrian Pelletierから紹介します。 Create a Realistic Hover Effect With jQuery demo デモはReflection（鏡面反射）とShadow（影）の二種類があり、それぞれホバーして浮かんだ際、鏡面反射と影が距離に合わせてサイズが変わります。 スクリプトのベースにはjQueryが使用されているため、実装にはjquery.jsが必要です。

jQuery Blend demo デモではCSSのみの動作と比較して、ふわっと光るように背景が変更するエフェクト、アニメーションが繰り返すループモード、オンとオフが入れ替わるリバースモードが楽しめます。 実装方法は簡単で、背景の変更はスタイルシートで行い、jQueryとBlendを外部ファイルとして下記のスクリプトを記述します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $("#demo a").blend(); }); </textarea>

スタイルシートで実装した、ドロップラインとドロップダウンを併用したナビゲーションをCSSplayから紹介します。 Professional dropline / dropdown / flyout version 2 demo デモではドロップライン型のナビゲーション（水色）のラベルから、更にドロップダウン型のナビゲーション（白色）が動作し、第四階層と深いレベルまで実装が可能です。 対応ブラウザは、IE6/7/8, Fx, Op, Safari(PC), Chromeとのことです。

ウェブサイトでよく使用するような117種類のフリーのアイコンをSome Random Dudeから紹介します。 Sanscons ※キャプチャは一部のみ ダウンロードできるアイコンは透過GIFで、HTMLで背景色を変更するだけで簡単にアイコンのカラーを変更できます。 アイコンのサイズは16x16で、他にも32x32, 48x48, 64x64, 128x128のサイズを下記ページからダウンロードできます。 Sanscons Plus アイコンの利用は、全てフリーとのことです。

Fresh eMediaから、個人でも商用サイトでも無料で利用できるPhotoshopのブラシを紹介します。 各画像をクリックすると、ブラシを表示します。

画像にビデオや砂の嵐のノイズをのせるスタイルシートをMatthew James Taylorから紹介します。

ウェブデザインにいつもと違うアイデアを入れてみるための10のTipsをWeb Designer Depotから紹介します。 10 Web Design Rules That You Can Break 下記、各ポイントをピックアップしてお届けします。 はじめに 1. 水平方向のスクロールバーを表示しない 2. フォントの書体は必要最小限の数だけ使用する 3. やたらと多くのカラーを使用しない 4. サイトのゴールを明白にする 5. ナビゲーションは理解しやすいものにする 6. テキストと背景には異なるカラーを使用する 7. コンテンツにはアニメーションを配置しない 8. ウェブ セーフ フォントを使用する 9. スプラッシュ（ランディング）ページを使用しない 10. tableは使用しない はじめに ウェブデザインの進化は、一貫した有用なデザインの保証とともに確立されてきました。そして、あ

先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画

PANTONE color formulas -fall 2009 サイトでは各カラーのファッションも楽しめるPDFファイルをダウンロードできます。

demo: calendar 仕組みは、通常表示用の画像・テキストとは別に、拡大表示用の画像・テキストを用意し、それをクリップして表示しています。 そのためデータが二重に実装するのが弱点です。 AnythingZoomerはjQueryのプラグインのため、実装にはjquery.jsが必要です。

jQuery sliding menu revisited demo デモではアイコンを配置した矩形のエリアにカーソルを合わせると、それぞれのパネルがアニメーションでスライドして、アイコンを変更しパネルのエリアを拡大します。 各矩形のパネルはリスト要素で実装されています。 sliding menu revisitedはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ユーザーに有用なウェブサイトをナビゲートする12種類のナビゲーションをOnextrapixelから紹介します。

最新のWordPress 2.8.2にも対応済みの最小限・最低限で構成されたテーマファイル「Starkers」を紹介します。 Starkers The completely naked theme for WordPress demo Starkersはデモの通り、装飾は一切無く、テーマファイルを作成する際のベースとなるテーマファイルです。 利用にあたっては、商業プロジェクトでも無料で利用できるとのことです。

ハイクオリティなスモークのエフェクトを描く、高解像度のPhotoshopのブラシColorburnedから紹介します。

ドロップダウンするパネルに複雑なレイアウトを適応したナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Professional droplist menu demo デモではドロップダウンで表示されるパネルにカラムを使用し、見出しを使って情報を整理し、フィーチャーリンクも設置されています。 対応ブラウザは、IE6/7/8, Fx, Op, Safari(PC), Chromeとのことです。

上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード：[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン

RightJS RightJSと他ライブラリとの比較 IE, Fx, Op, Safari, Chromeの各ブラウザでのパフォーマンスは、jQuery、Prototype、Mootoolsなどの主要なJavaScriptのライブラリと比較して、概ね高速なパフォーマンス結果となっています。 デモではモーフィング、ハイライト、フェード、スライドなどのビジュアルエフェクトを楽しめます。 demo RightJSのライセンスは、MIT licenseとのことです。

クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="t

HTML 5用のブラウザのスタイルをリセットするスタイルシートをHTML5 Doctorから紹介します。 <textarea name="code" class="css" cols="60" rows="5"> /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl,

シンプルなデザインからスタイリッシュなデザインまで揃った、商用サイトでも無料で使用できるナビゲーションのPSD素材をpsdGraphicsから紹介します。 PSD website navigation menus set preview ナビゲーションのPSD素材はレイヤーが保持された状態なので、テキストの変更も可能です。 他にもシンプルなデザインが揃ったナビゲーションのPSD素材もダウンロードできます。

スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。

滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li

8ptのサイズに最適化された、フリーのOpenTypeのピクセルフォント「Unibody」を紹介します。 Unibody フォントの使用例 ダウンロードできる「Unibody」のウェイトはRegular、Bold、Italic、Black、SmallCapsの5種類があり、ライセンスはフリーとのことです。

紹介する回転方法は二種類、左がテキストデータを回転して配置するもの、右が予め背景画像に回転させて配置するものです。 まずは、左のテキストを回転して配置する方から。 <textarea name="code" class="html" cols="60" rows="5"> <div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div> </textarea>

各種アイコン、アロー、ショッピングカート、検索、クレジットカードなどウェブサイトで使用するものが一通り揃ったフリーのアイコン素材をWeb Designer Depotから紹介します。 200+ Free Exclusive Vector Icons: 'Primo' ※クリックで拡大画像 ダウンロードできるアイコン素材のフォーマットはAI, PNGで、PNGのサイズは48x48, 64x64, 128x128となっています。 アイコンの利用にあたっては、個人、商用ともに完全にフリーで利用できるとのことです。

ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </

jQueryを使用して、画像に半透明の見出しとキャプションをスライド表示させるチュートリアルをQuenessから紹介します。 Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery demo デモでは画像にマウスをホバーすると、上から見出し、下からキャプションをスライド表示させます。 見出しとキャプションは画像の前後にdiv要素で実装されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="photo"> <div class="heading"><span>Telephoto Lens</span></div> <img src="images/fall.jpg" width="350" h

エレガントで使い勝手がよさそうなOpenTypeのフリーフォント「Juvelo」をThe Crud Factoryから紹介します。 Juvelo フォントのライセンスはpublic domainで、個人・商用に限らず無料で利用することができます。 下記は以前紹介しましたが、同サイトでは他にもフリーのフォントをダウンロードすることができます。

horinaja demo パネルのスライドの操作はマウスのホイールだけでなく数字のクリックでも可能で、オートプレイにも対応しています。 各パネルはリスト要素で実装されているので、リンクの配置やちょっとしたレイアウトも可能です。 horinajaはjQuery、もしくはPrototypeのプラグインとして動作しているため、実装にはjquery.js、またはprototype.jsとscriptaculous.jsが必要です。

Download Free Fonts | FontShop 以前は１ヵ月おきぐらいにフォントが入れ替わってましたが、今回は久しぶりの更新のようです。 現在、ダウンロードできるフォントは下記の3つです。

Lights Out ? Dimming/Covering Background Content with jQuery | Build Internet! これはカッコいい、テレビのノイズ画面風背景のLightBox作成。 次のように、テレビのノイズ画面のような背景がアニメーションするカッコいいLightBoxの作成チュートリアル。 デモページ 単純に背景をGIFアニメーションにしているだけっぽいけど、なんかオシャレです。 1ネタとして覚えておいて損はなさそう。サンプルもダウンロード可能です。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル jQueryやPHPを使った便利な仕組みのチュートリアル集

ドットインストール代表のライフハックブログ

Firefox 3.5のプライベートブラウジング機能は、Firefoxを通常起動した後に操作して、モードを切り替える必要があります。 これでは最初からプライベートブラウジングで開始したいような場合にちょっと面倒ですし、操作を忘れてそのまま通常のモードでブラウジングしてしまうかもしれません。 もし、最初からプライベートブラウジングにすることが決まっているようなことがあるのなら、Firefoxに「Private Browsing Command Line Flag」というアドオンをインストールしておけば、今後は切り替え忘れが無くなるかもしれません。 「Private Browsing Command Line Flag」は、Firefox3.5の起動ショートカットに、コマンドを追加しておくことにより、プライベートブラウジングでFirefoxを開始することができるというアドオンです。 アドオンを

IE8では、新規タブを開くと、従来のように空白のページではなく、「次に何をしますか？」という総合的なページが開くようになっています。 ここには、最近閉じたタブの一覧へのアクセスや、プライバシーモードへの切り替えなどが用意されており、次のアクションを簡単に起こせるようになっています。 Google Chromeなどでも同様の機能が装備されていますが、Firefox3.5ではこのような機能は見送られ、現在のところ、ブランクタブが開くだけとなっています。 このような機能が欲しい方、不要な方と好みは分かれるところですが、似たような機能が欲しい方は、「New Tab Page」というアドオンをインストールしてみてはいかがでしょうか。 「New Tab Page」をFirefoxにインストールすることにより、新規タブを開くとIE８ライクなページを表示できるようになります。 アドオンをインストール後、新

忙しいときや、情報を集めているだけのときなどは、ページの内容を精査したり、リンクを開いていられないような時もあります。 このような時、ソーシャルメディアなどにリンクを送ってあとでじっくりと読むというような方法もありますが、読む際にそれらにアクセスする必要がありますし、不要なものまで貯まっていく可能性もあります。 Firefoxアドオンには、このような場面で役立つ「あとで読む」系ツールが数多くありますが、今回は、その中から非常にシンプルなページ・リンクストックツール「Instant Watchlist」というアドオンを使ってみました。 「Instant Watchlist」は、ユーザー登録や設定も不要な非常にシンプルなアドオンです。 使い方は非常に簡単です。 表示しているページ内のリンクで、今は開かずにあとで読みたいものがあれば、そのリンク上で右クリックし、コンテキストメニューから[Add

通常のプロバイダメールでも、GmailのようなWebメールでも、ほとんどの場合、メッセージに添付できるファイルのサイズの上限は１０－２０MB程度となっています。 しかし、最近のPC事情では、動画や音楽、高解像度の写真などを扱うこともあり、サイズオーバーで遅れない場面も多々ありますね。 ヘビーユーザーなら、こんなとき、ネット上のストレージなどを巧みに利用して送信するところですが、それでも最初にユーザー登録が必要だったり、受信側も受け取る際にパスワードなどを求められることがあり、とてもスムーズに受け渡しできるとは言えません。 こんな面倒なラージファイルの受け渡しも、Firefoxに「ArunaSend」というアドオンをインストールしておけば非常に簡単になります。 「ArunaSend」は、「Go Aruna」という無料のファイルストレージサービスからリリースされているアドオンで、Firefox

FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox

仕事の予定や友達との約束、大事なイベント情報など、メールメッセージには重要な情報がたくさん含まれています。 このようなメッセージのやりとりから、カレンダーツールなどに予定を作成することもよくあると思います。 こうした作業は、スタンドアロンアプリだけでなく、GmailのようなWebツールでこそスマートに行いたいものですね。 今回は、このようにメッセージから予定を作成するようなシーンでGmailとGoogleカレンダーを関連付けるGreasemonkeyスクリプト「GMail - GTD Tickler」というものを試してみました。 ＊本記事は、Firefoxにアドオン「Greasemonkey」をインストール済みであることを前提にしています。 「GMail - GTD Tickler」をインストールしたら、Gmailにアクセス（日本語版でOK）しメッセージを開いてみましょう。 最下部の返信/

長いURLを短縮URLに変換してくれるサービス「bit.ly」 Twitterを使ったことがある方なら、投稿に記載されているURLが[http://bit.ly/****]になっているのを見かけたことがあると思います。 このような短縮URLは、便利な反面、どこに飛ばされるかがクリックしてみるまでわからないというところがあり、友人・知人などの投稿からジャンプするのならともかく、知らないユーザーやスパムユーザー投稿に記載されているURLはちょっとクリックするのが不安な場合もありますね。 Firefoxには、このような短縮URLをデコードして、本当のURLを知ることができるようなアドオンがいくつもありますが、今回は、サービスを[bit.ly]に特化し、元URLを視覚的に知ることができるFirefoxアドオン「bit.ly preview」を試してみました。 「bit.ly preview」をイン

Firefox 3.5のリリース後も、アドオンの未対応などによりまだ完全に3.0.×系から乗り換えられていない方も多いと思います。 このようなアドオン互換性の問題を、インストールファイルの直接編集や「Nightly Tester Tools」などの利用により、クリアされている方もいらっしゃるでしょう。 今回は、このようにバージョンチェックを無視してインストールすることができるツールの中から、ローカルにダウンロードしたxpiファイルを最新のFirefox対応版に変換することができるソフトウェア「Update XPI」をご紹介します。 「Update XPI」は、ローカルに置いてある3.5未対応のFirefox用アドオン（xpiファイル）を、ツールにドラッグ＆ドロップするだけで、対応版にしてくれるというお手軽フリーソフトウェアです。 ツールは、配布ページの[Installation]部分より、

Twitterで一言つぶやいたり、URLだけをメモ的に投稿するような場合、わざわざメインサイトへアクセスするのは面倒ですね。 そんなユーザーのために、Firefoxアドオンには、Twitterを簡単に扱うことができるアドオンが数多くありますが、今回はその中から、かなり簡単ににつぶやくことができるアドオン「TwitterBar」を使ってみました。 「TwitterBar」は、他のアドオンと比べて派手な機能は無いものの、Firefoxのロケーションバーに記入したテキストやURLを、非常に素早く、簡単に投稿することができるアドオンです。 アドオンをインストールすると、ロケーションバーにおなじみのTwitterアイコンが表示されるようになります。 ついでに検索バーには、ソーシャルメディア専用の検索エンジンが追加されますが、こちらは日本語での検索ができませんので、不要な方は削除してしまえばいいでしょ

最近急に盛り上がりを見せているTwitterに管理者も参加しはじめました。 Firefoxアドオンには、このTwitterを使うための便利なアドオンがいくつかありますが、管理者はその中から「TwitterFox」というアドオンを、メインとして利用することにしてみました。 「TwitterFoxは、Firefoxのステータスバーに常駐し、フォローしているユーザーの投稿を逐一チェックしたり、投稿を素早く実行したりできるというアドオンで、シンプルかつ、簡単にTwitterをFirefoxに統合できるものとなっています。 アドオンをインストールしたら、まずはあなたのTwitterアカウントなどの設定をおこないましょう。 アカウントはいつもご利用のユーザー名、パスワードを入力するだけです。 必要なら、複数アカウントを登録しておくことにより、必要時に切り替えて利用することもできます。 そのほかの設定は

ほぼ同じ内容で夏休みがループするストーリー「エンドレスエイト」を７話連続で放映していたアニメ「涼宮ハルヒの憂鬱」は、７月３０日の放送においてもループが終了せず、８ループ目に突入することが確定した。あまりにも同じ内容のため、ネット上ではファンがループ回数や話数を書き間違えるなどの混乱も発生。エンドレスエイトだけに８ループで終了との期待が持たれているが、予断は許されない状況だ。

2009.08.06 NTV アナログ 放送事故 おもいっきりDON！　終了時