ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b2e47f19fcee7dd034648b387455a63f6a459e/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2010%2F06%2Ft_1.gif)
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説jQueryでシンプルにスライドショーを実装する方法が掲載されています。 スライドショーとして表示する画像をあらかじめimg要素で列挙しておき、z-indexを変更することで入れ替え表示しています。 スライドのスピードはミリ秒で指定可能です。 すべての画像を表示し終わると、また繰り返し最初からリピート再生されます。 スライドを開始する画像のimg要素にはactiveクラスを指定します。 設置イメージ A Simple jQuery Slideshowの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
スムーズな動きのナビゲーションメニューを作りたい。 そんなときにおすすめなのが、『Excellent jQuery Navigation Menu Tutorials』。jQueryを使った、動きのあるナビゲーションメニューチュートリアル集です。 いい感じのものが揃っていますね。 How to Make a Smooth Animated Menu with jQuery マウスオーバーすると、すとんとメニューの説明を表示 Animated Drop Down Menu with jQuery クリックすると、すっとドロップダウン型で表示されるメニュー How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery HTML5,CSS3でのドロップダウンメニューの作り方 How to Build a Lava-Lamp Styl
個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い(あるかもだけど、見当たらない)のがおしいところ。/tag/等も404なんですよね・・最新記事はサイドバーに表示されます。 css-tricks
個人的にjQueryプラグインを探す 時に結構時間が掛かっている のでどうにかしたいと思っていま したが、なかなか素敵なサイトが ありましたのでシェア。プラグイン のデモをサムネイルでギャラリー 形式にして紹介しています。 デモから探せるので、Webデザイナーさんには重宝されそう。量もなかなか揃っているのでここから探す癖を付けようかと思うくらいです。どこかで見たけどブクマし忘れた、なんてときに見るのもいいかもしれませんね。 こんな感じでデモのキャプチャがズラッと表示されていますよ。上と下は広告です。 個別ページにはデモとソース、DLのリンクが用意されています。 カテゴリもメニューやギャラリー、チュートリアルなどが用意されていますよ。 タグクラウドでより絞り込める。 APIの確認も出来る。 情報量も300ほどあるのでなかなか重宝しそうです。今後益々増えてくれると嬉しいですね。久々にRSS登録
既存のページに導入するのも簡単な画像をフェードで切り替えるスクリプトをDan Wellmanから紹介します。 フッタのアイコン 実装方法 フェードで切り替える画像のエレメントに対して、hover時に画像が切り替わるように設定します。その際に使用するクラス名は「hover-css」が初期設定です(変更可能)。 これはもしJavaScriptがオフの環境でも、ホバーがCSSで行われるようにするためです。 次にスクリプト用のクラスを用意します。初期設定は「hover-anims」で、「hover-css」と同様に画像が切り替わるように設定します。 これはスクリプトで利用するクラスで、その際にCSSのクラスは削除されます。 jquery.jsとhoverfade.jsを外部ファイルとして配置します。記述位置の理想はHTMLの終わりです。 HTMLにさきほどのCSS用のクラスを記述します。 また、初
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置(fixed)で表示。 ウインドウがモーダルボックスより小さい場合は固定配置(fixed)が自動的に絶対配置(absolute)に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
Earlier this week, while working on ZineScripts' coupon code system, I found the need to be able to dynamically create and present a message box to Zine's visitors. The usual routine would include digging through jQuery's plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today. S
20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine jQueryによってカスタマイズされたCSSボタン20としてエントリがあがっていたのでご紹介。 ボタンデザインのサンプル集として覚えておけばかなり使えそうなサンプル集になってます。 ボタンでクリック率は大きく変るということもあるので、クリック率を高めたい場合はこだわってみるとよいかも。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 綺麗にデザインされたCSS3ボタンのまとめ PhotoShopで美しいボタンを作るチュートリアル39個 CSS3なボタンをWEB上で作れる「Button Maker」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く