紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bxSlider 多彩な表示方法に対応したコンテンツスライダー。 Sudo Slider 各パネルがブックマークできるコンテンツスラ

[ad#ad-2] 下記のプラグインは常に使用しているものをはじめ、適宜使用するものや以前使用していて別の機会に使用しそうなものも含まれています。 1. 管理画面（ダッシュボード）関連 2. データベース・システム・セキュリティ関連 3. コンテンツ・エレメント関連 4. Twitter 関連 5. Google 関連 6. テーマ・生成ページ・URL関連 1. 管理画面（ダッシュボード）関連

Mr. Data Converter [ad#ad-2] 変換できるフォーマットは下記のようになります。 ActionScript ASP/VBScript JSON PHP Ruby XML キャプチャのデータを変換後は、下記のようになります。 ActionScript

2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム

デザイナー、アーティスト、フォトグラファーなどのクリエイティブな作品を発表するのに適した、モダンでミニマリズムなWordPress3.0対応のテーマファイルを紹介します。 Portfolium 1.0 WordPress Theme デモ [ad#ad-2] Portfoliumの主な特徴 Valid XHTML Strict and CSS クリーン、ミニマリズム、グリッドベースのレイアウト WordPress3.0のメニューシステムをサポート カスタムポストに対応 使いやすい jQueryのイメージスライダー サーチエンジン最適化 WordPressのポストサムネイルに対応 サムネイルの自動化 クリーンなタイポグラフィ クロスブラウザ対応（IE7+, Firefox, Opera, Safari, Chrome） ファビコンの用意はありますが、あなた自身のものを用意してください Por

Vendor-prefixed CSS Property Overview [ad#ad-2] 一覧は、四つのレンダリングエンジンごとの指定方法がまとめられています。 下記は各レンダリングエンジンとその代表的なブラウザです。 Gecko系 Firefox Webkit系 Chrome, Safari Presto系 Opera Trident系 IE 各レンダリングエンジンの採用状況は、ウェブブラウザの一覧（Wikipedia）を参照ください。 一覧は下記のようになっており、右端には各プロパティのW3Cへのリンクも掲載されています。

最近リリースされた高品質なフリーのデザインフォントを紹介します。 Lintel Regular 個人・商用利用無料。 St Marie 個人・商用利用無料。 AW Conqueror Sans 個人・

HTML5では何ができるのか、各ブラウザの対応はどうなっているのか、が一目でわかる -What is HTML5?

当サイトで紹介した数多くのチートシートの中から、今まさに役立つであろうチートシートを厳選して紹介します。 ※未紹介のものも含まれています。 HTMLのチートシート CSSのチートシート jQueryのチートシート WordPressのチートシート [ad#ad-2] HTMLのチートシート

Photoshopの標準機能だけで、グラデーションやレイヤースタイルをつかった美しいボタンを作成するチュートリアルを紹介します。 Photoshop For Beginners: Creating buttons for web part 1 Photoshop For Beginners: Creating buttons for web part 2 [ad#ad-2] 上記、四つのボタンのチュートリアルはPart 1, 2に分かれており、それぞれ二つずつのチュートリアルが掲載されています。 各チュートリアルはPhotoshopのキャプチャ付きなので、英語が苦手な方でもどのようなフローですすめるか理解できると思います。 ボタンはグラデーションやレイヤースタイルといった王道のテクニックだけでなく、ノイズをのせたりライトをくわえたりと細部までしっかり手がはいった作りになっています。

写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方

IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並

user-agentを参照せずに、IE6, 7, 8, 9の各バージョンを判定するスクリプトを紹介します。 var ie = (function(){ var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : undef; }());

総務省によると世界の国の数は193（2010年1月1日現在）とのことですが、全部で240種類の国旗のアイコン素材を紹介します。 2400 Flag Icon Set [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNGで、サイズは16, 24, 32, 48, 64の五種類、それぞれ立体感のあるものとフラットなものが揃っています。 アイコンのサイズは五種類 国旗アイコンのファイル名は、国名とカントリーコードの二種類があります。 アイコンの利用にあたっては個人でも商用でも無料で利用が可能です。 商用の場合は特に寄付を受け付けています、とのことです。また、足らない国旗があれば随時追加するので連絡をください、とのことです。

追加したspanに個別にカラー指定したキャプチャ Lettring.JSの実装 実装は簡単です。スクリプトを外部ファイルとして指定し、下記のように記述します。

ダークグレー、シルバーグレー、反転したグレーの三種類のグラデーションを使用した各60個、計180個の無料のアイコン素材を紹介します。 Mono Gradient Icons Set: 60 Free Icons for Your Web Designs [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNG, PSDの二種類で、PSDは下記のように各レイヤーやレイヤー効果が保持された状態になっています。

あらかじめ用意された豊富なテンプレートから簡単にCSS3のナビゲーションを作成できる無料のソフトウェアを紹介します。 CSS3 Menuの画面 CSS3 Menuの使い方 使い方は簡単で、CSS3やHTMLに詳しくなくても作成できると思います。 「+」ボタンをクリックして、ラベルの数を増やします（下記キャプチャ）。 「-」ボタンは数を減らします。 右側のパネルのテンプレートからナビゲーションのデザインを選択します。 カスタマイズが必要な場合は、下のパネルからデザインをはじめ、文言・リンクなどが変更できます。 完成したら、「ディスクアイコン」をクリックしてCSS3 Menu用に保存します。 HTML+CSS+画像ファイルを生成する場合は、「Publish」ボタンをクリックします。

画像をはじめさまざまなHTML要素をスライド表示させるカルーセルのスクリプトを紹介します。 下記のデモでは、Example One（表示数4、移動数2、手動操作）、Example Two（表示数3、移動数1、自動操作）となっています。

AW Conqueror Carved Four フォントは「Solutions - Typefaces」からダウンロードできます。 Conqueror ※要メールアドレス フォントの利用は個人でも商用でも無料とのことです、詳しくはライセンス（PDFファイル）を参照ください。

フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点（面）をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行：10箇所、縦一列：5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space