スロットマシンのようにスライド このアイデアの元となったのはfluxiomのfeaturesで、「Overview」「Organize」「Deliver」のボタンをクリックすると、その下のコンテンツがスロットマシンのようにスライドします。

シンプルだけどマルチプルにカスタマイズできるモーダルボックスのスクリプトをOpen Source Projectから紹介します。 modal box デモ サイトのデモでは、ボックス内にHTMLコンテンツを配置したもの（上キャプチャ）をはじめ、AJAX、画像とよく使用されているものの動作が確認できます。

Sponsor Flip Wall With jQuery & CSS デモページ デモではグリッド状に配置されたパネルにマウスでフォーカスするとハイライトされ、クリックすると各パネルはくるっとひっくり返ります。 ひっくり返ったパネルには、個別のテキストやリンクが配置されています。 各パネルはdiv要素で配置されており、ハイライトのエフェクトはCSSでホバー時にボックスシャドウを適用しています。 CSS ボックスシャドウのスタイルシート <textarea name="code" class="css" cols="60" rows="5"> .sponsorFlip:hover{ border:1px solid #999; /* CSS3 inset shadow: */ -moz-box-shadow:0 0 30px #999 inset; -webkit-box-shadow:0

スライド、フェード、ティッカーと三種類のモードが選択できる超軽量のコンテンツスライダーのスクリプトを紹介します。 bxSlider demo 各コンテンツはdiv, li, p要素でそれぞれ実装されており、スクリプトのオフ時にはそのまま表示されるようになっています。 スクリプトのオプションでは、三種類のモードの選択、オートとマニュアル、スピードなどが調整できます。 bxSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

PHPやデータベースなどを使用せず、jQueryとCSSで実装するスライドショーギャラリーのスクリプトをTutorialzineから紹介します。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery デモページ デザインはAppleにインスパイアされたもので、角丸、グラデーション、ドロップシャドウ、鏡面反射などが美しく使用されています。 サムネイルの仕事も丁寧です。

div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。 DivCorners デモページ ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。 上記キャプチャは、外側（outside）のデモです。 スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。

ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単

オブジェクトをパスに沿って、さまざまな方向に回転させることができるスクリプトをFredHQから紹介します。

「Next」ボタンで次の画像を表示 スクリプトは使いやすさとフレキシビリティを前提に開発されており、実装が簡単で、柔軟性をもったものとなっています。 スクリプトの特長 ブラウザのサイズ変更時に表示を自動調整。 アニメーションで軽快に動作します。 画像はバックグランドでキャッシュすることが可能。 言語、背景色、スライドの間隔などオプションで簡単に設定。 多彩なインスタンス。 多言語対応。 ※現在は日本語用の画像は未。 スライドショーは自動再生に対応。 キーボードでの操作も可能。 操作方法は拡大時の「？Help）」に掲載。 サーチエンジンにもフレンドリー。 スクリプトの実装方法は簡単で、jQueryを使用しますがjQueryの特別な知識は必要なく実装が可能です。 YoxViewの実装方法

apycom ナビゲーションの主な特長 クロスブラウザ対応 アクセシブル スクリプトのオフ時にもCSSで動作可能 検索エンジン最適化 リスト要素で実装したクリーンなHTML セットアップもアップデートも簡単 アニメーションとトランジションのエフェクト 複数のカラースキームを用意 使用スクリプトはjQuery 3KBと超軽量 ナビゲーションのスタイル 現在は、7タイプが揃っています。

<textarea name="code" class="html" cols="60" rows="5"> <div class="slidegrid"> <div class="cell bigcell">Big Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </textarea>

ユーザーのアクションで、タブコンテンツを生成・削除するスクリプトのチュートリアルをJanko At Warp Speedから紹介します。 Dynamic tabs using jQuery - why and how to create it デモページ デモでは、「open tabs」の各リンクをクリックすると、指定されたタブコンテンツが生成され、各タブの「×」アイコンをクリックすると削除されます。 実装は、タブがリスト要素、コンテンツがdiv要素となっています。 スクリプトのベースにはjQueryが利用されており、数行のスクリプトを追加するだけとなっています。

Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。 jQuery imageless buttons a la Google デモページ サポートしているブラウザも多く、下記の通りです。 Opera 10 beta Opera 9.6x Firefox 3 Firefox 2 Safari 4 Safari 3 Internet Explorer 8 beta Internet Explorer 7 Internet Explorer 6 Chrome Adobe AIR 1.5+ 実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。 UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。 styl

フォームの入力時に、入力欄に配置されたラベルが枠外にアニメーションで移動するスクリプトをCSSKarmaから紹介します。 Form Design with Sliding Labels デモページ スライドするアニメーションもクールですが、フォームのデザインをすっきりできるのもこのスクリプトの大きな特長です。 通常のマークアップ、スタイルシートの適用、スクリプトの適用と三段階を比べてみます。

IE7をはじめとしたクロスブラウザ対応の、マウスのホバー時にツールチップを表示するスクリプトを紹介します。 TipTip 実装のサンプルでは、マウスのホバーに合わせて、フェードでツールチップが下部に表示されます。 スクリプトのオプションで、ツールチップの表示位置の変更、幅の最大値の設定、フェードイン・アウトのタイミングなどが簡単に指定できます。 対応ブラウザはIE7/8, Fx, Op, Safari, Chromeとのことです。 TipTipはjQueryのプラグインのため、実装にはjquery.jsが必要です。

jQueryでアニメーション機能を実装する際に使用する「.animate()」のスタディをCSS-Tricksから紹介します。 Fully Executing jQuery Animations Without Queuing demo デモでは、マウスのホバーをトリガーにアニメーションが始まり、そのアニメーションを止める際に「.stop()」または同様の機能をもつものをそれぞれ比較しています。 ゴールは、三つに並んだバーがそれぞれ期待通りによりスムーズに動くことです。 最もスムーズに動作するのは、デモページの下にあるグリーンのデモで下記のように記述しています。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $("#animate-test div").hover(function(){ $(this).fi

2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連

余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demo このスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:

マウスをフォーカスすると、アニメーションで色が少しずつ変化するボタンを作成するPhotoshopとHTML/CSSとJavaScriptの三つのチュートリアルをSix Revisionsから紹介します。 Create an Animated "Call to Action" Button demo チュートリアルは三部構成で、Photoshop編、HTML/CSS編、JavaScript編となっており、デモページではアニメーション有り版（JavaScript）、無し版（HTML/CSS）があります。 simple demo(アニメーション有り版） simple demo(アニメーション無し版） ボタンはCSSスプライトで実装されており、画像の作成もそれ用になっています。

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る