6(IE6)で開くと、ドラッグ操作時にハンドラー部分のテキストやWebページの一部が選択状態になってしまう場合があります。この問題は、IE6のテキスト選択機能がドラッグ処理に関係なく動作してしまうのが原因で、ドラッグ操作時だけIE6の選択機能を一時的にオフにすることで解決できます。IE6の選択機能は、mousedownイベントとmouseupイベントに以下の記述を追加するとオフにできます。false」を設定するとIE6の選択機能を一時的にオフにできます。ドラッグが終わった時点でselectstartをunbind()に設定すれば、選択機能を元のようにオンに戻せます。今回のサンプルでは、ページ上に浮いている感じを出すために透過PNGを利用していますが、透過PNGに対応していないIE6では適切に表示されません。IE6で透過PNGを表示するには、backgroundプロパティではなくAlphaImageLoaderを使います(関連記事)。以下のCSSでは、スターハックを利用して、IE6の場合のみAlphaImageLoaderで背景を表示するように設定しています。AlphaImageLoaderを設定した要素の子要素にはposition:relativeを指定しないと、mousedownイベントやmouseupイベントが動作しなくなるため、*(ユニバーサルセレクター)を利用してすべての要素にposition:relativeを設定しています。透過PNGのフェードイン/アウトが黒くなるサンプル01/02のように透過PNGを含む要素をIE(6~8)でフェードイン/フェードアウトすると、一瞬、透過部分が黒で塗りつぶされて表示されることがあります。サンプル01の表示、非表示をfadeInやfadeOutに変更した場合、透過部分が黒くなってしまうこの現象はjQueryのfadeIn()/fadeOut()とIEとの相性で起こってしまう問題です。しても透過PNGを使いたい場合は、IEのみアニメーションを切ってしまう方法もあります。次のようにif文で処理を分岐させれば、IEの場合はshow()/hide()で、それ以外のブラウザーの場合はfadeIn()/fadeOut()で表示/非表示を切り替えられます。かずま)to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。TypeなどのWeb制作にかかわるさまざまな情報を発信している。主な著書に「現場のプロから学ぶXHTML+CSS」(共著、毎日コミュニケーションズ刊)がある。一覧へDESIGN実務で使えるjQueryプラグイン3選Web制作者のためのjQuery入門。最終回は、現場で使える便利なプラグインを3つ紹介。具体的な使い方もサンプル付きで解説する。572DESIGN制作現場で役立つjQueryプラグインの使い方Web制作者のためのjQuery入門。今回と次回は、制作効率を上げる「jQueryプラグイン」の概要と使い方について解説する。241DESIGNjQueryとAjaxで作るスムーズページングWebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。8916DESIGNjQuery+CSSによるカルーセルパネルの作り方Web制作に活用するjQuery入門。アマゾンでおなじみの「カルーセル」(Carrousel)作り方をチュートリアルで解説する。タイマーを使った改造法付...14113DESIGNjQueryでバリデーション付きメールフォームを作ろうWeb制作者のためのjQuery入門。今回はバリデーション(検証)機能付きの問い合わせフォームの作り方をチュートリアルで解説する。11420DESIGNjQueryで自作するフローティングウィンドウドラッグ&ドロップで動かせるフローティングウィンドウをCSS+jQueryで作ってみよう。IE対策のポイントも解説。UIデザイン入門(目次)Webデザイナー、(X)HTML/CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラム...9020PROGRAMMING【短期集中連載】この冬作ろう!jQueryプラグイン講座2008年、最も勢いのあったJavaScript/Ajaxライブラリ「jQuery」。その特徴でもある「プラグイン」を、冬休みを利用して楽しみながら作ってみよ...1030DESIGNjQueryで作るAmazon流リキッドレイアウトAmazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジし...1470DESIGNjQueryで作る“Amazon風”インターフェイス国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介...2903DESIGNあのFlashサイトのUIをjQueryで作る海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。970DESIGNjQueryアニメ&エフェクト合わせ技で画像を拡大jQueryを使ってWebサイトのブラッシュアップに挑戦。コンテンツの魅力を引き立てるシンプルなWebデザインに、ちょっとした華を添えるアニメーシ...672DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。スマホお気に入り一覧マイページ。