01:10cssCSSでDOM要素に対してアルファフィルターを適用させたいときは、クロスブラウザを意識すると次のような記述になると思います。今回はIEに絞った話のため、そのあたりは割愛します。実はIEはある条件下によってまったくfilterが効かない場合があります。ActiveXが無効そもそもの話ですが、filterはActiveXを利用したレンダリングを行っています。そのため、そもそもセキュリティの設定などでActiveXを無効にされていると、filterが効かず想定したようなレンダリングがされません。「インターネットオプション」の「セキュリティ」でセキュリティのレベルを「高」にする、ActiveXの設定を個別でOFFにする、などの設定を行うなどでfilterを無効にすることができます。標準的なユーザがこの条件下でfilterが効かない、という話はほぼ無いと考えてもいいと思います。実は次の問題が厄介です。NVidiaのグラフィックカードな条件下において、filterが適用されないことを確認しています。Vista")上記のActiveX無効の場合はJavaScriptでActiveXが有効/無効を判断できるので、何らかの対応をすることはできるのですが、この場合はハードウェアの話が絡んでくるので、実質的な回避方法はありません。後で詳しく述べますが、今回はfilter対象要素が2048pxを超えるような巨大なものをやめて、filter対象要素の面積を可能なかぎり小さくすることができたので、回避しました。巨大な要素にfilterをかける必要性そもそも、なんでそんな巨大な要素にfilterをかける必要があるのかという話になるのですが、今回はファイルアップロードのUIをゼロから作ったことに起因します。/>なんかでファイル選択ダイアログを表示し、対象ファイルを選択することになります。ところが、これはブラウザ標準のUIになるので、「もっと凝ったことしたい!画像など任意に要素クリックでこの選択ダイアログを表示させたい!」などとなると、途端に話は面倒くさくなり、Flashで実装JavaScript/CSSで巧みに実装の選択を迫られることになります。Flashで実装をとるという方法もあったのですが、カスタマイズ性や毎回publishすることの実装コストを考慮して、JS/CSSでの実装を選択することにしました。画像クリックでファイル選択ダイアログを表示させたい場合、次のような構成になります。img要素の上に大きめのinput要素を重ねあわせ、filterでalpha=0に指定します。これで画像をクリックしようとするとinput要素をクリックすることになり、結果的にダイアログを表示することができます。そのあとはinput要素のchangeイベントに対してハンドラを設定し、formを送信なりなんなりとしてあげると完了です。ところが、ここで1つマウスカーソルの問題があります。単純にinput要素を重ねただけだと、画像の上にカーソルを重ねたときにな形状になり、クリックできそうなことを連想できません。pointer;な、スタイルを設定する必要があります。これでカーソルの形状がになり、解決しました。言いたいのですが、実はこれでもまだ完璧ではなく、Firefoxではカーソルは変わりません。これはFirefoxの仕様のようで、いくらcursor指定をしても変わることがありませんでした。Firefoxだけ残念な形になっちゃうのか。思いきやそうでもなく、先ほどの画像とinput要素の重ね方を工夫するともうすこし頑張れます。結果から言うとこう配置します。(大きさはfont-size:で調整します)このとき、要素のサイズを巨大にして「選択」ボタンを画像に重ねることがポイントです。「選択」ボタンを画像にうまく重ねることで、画像のマウスオーバー時にと、することができ、最初の状態と比べて「クリックできそう感」が改善されます。ちなみにこのマニアックな手法はいろんなファイルアップロードライブラリを見ても、Flash実装じゃないものは全部この仕様になってあり、Firefoxのマウスカーソル問題はここが妥協ポイントのようです。(例:file-uploader)話をfilterに戻す大きく脱線しましたが、ようやく最初のfilterの話に戻します。ここまできてようやく「Flashで実装しない場合に、ファイルアップロードを実装する場合において、カーソルの形状の最適化のためにfilter対象要素を十分に大きくする必要がある」という話になりました。数百px}の巨大な面積の要素にfilterをかけることになります。HWスペックが十分なマシンだとIEだと問題なくレンダリングされるのですが、冒頭の条件であったりレンダリングスペックが十分でない場合、filterに失敗して表示が崩れる、という問題が起こります。この場合、セキュリティ設定やActitiveXなどOS、ブラウザの設定を操作することなくfilterが無効になるので、気づかない間にユーザが不便を被ることになるので非常に厄介です。pointer;だけしておけば表示位置はどこに設定してもOKなので、IEだけレンダリング要素を最小化しておけば大丈夫という最初で述べた結論に帰着するのです。(長い!)と、いうわけでここまでまとめるとたとえば130x130なサイズの画象にinput要素をかぶせるときは次のようなスタイルを設定します。サイズは各環境によって微調整をしてください。StarHackを使ってIEだけ適用。要素を必要十分なサイズで最小化。130px;結論CSSコーディングでグラフィックカードの特性を意識しないのは素人!ところで今回はたまたまレンダリング要素のサイズ変更で回避できましたが、本質的な解決にはなっていません。あと動的なサイズの要素の場合、回避は不可能そうです。ArchiveAboutこのBlogはクックパッドに勤めるWebエンジニアがLLネタや情報技術について直感で思ったことを何も考えず発信するサイトです。コメントやお問い合わせ、執筆依頼などは@ryo_katsuma宛のmention、またはメールなどでお待ちしています。