- ベストアンサー
影の消えたフラットなプルダウンメニューを作成する方法
- ホームページ制作中に、影の無いフラットなプルダウンメニューを作成したい
- 現在使用しているスタイルシートではFirefoxでは問題ないが、IE8では立体感と影が表示されてしまう
- 助言を求めている方には、影の消えたフラットなプルダウンメニューを作成する方法を教えて欲しい
- pocopen2nd
- お礼率42% (3/7)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
DOCTYPE宣言は、入れておられますでしょうか？ DOCTYPE宣言を入れれば、IEでもfirefoxでも同じように表示されるのではないかと思います。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ご提示のサイトはCSSで指定しているようです。 手元にIE6しかありませんが、やはり影が出ますね。ＩＥはセレクトボックスのborder指定を無視するみたい。（どのバージョンまでかはわかりません） No1様が回答なさっているように、無理に合せる必要もないとは思いますが、どうしてもなんとかしたいのであれば、これをなんとかしようという試みもいろいろあるようで、『form element skin』あたりをキーに検索してみるといろいろ出てきます。 例えば、 http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html （↑）にあるものないもの含めて幾つか（探せば他にもいろいろあると思います） （基本的にそのままでは表示できないので、javascriptで同様の動作を実現しながら別の要素に置き換えるという仕組みで実現しているようです） ◇NiceJForms http://www.lexcat.ro/nicejforms/nicejforms.html ◇jqTransform http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ ◇tofsla_forms http://maus2maus.narod.ru/ それぞれの動作は確認していませんのであしからず。
お礼
fujillinさん、ご回答有難うございます。 全て解決いたしました。 皆さんのお陰です。 本当にお世話になりました。
- jein
- ベストアンサー率49% (2799/5705)
各ブラウザの表示のされ方の差をゼロにすることは不可能です。 そのため、アクセスする人の環境を問わずにだいたい同じように デザインを見せられるFlashが有効であったので普及したのです。 デザイナーズサイトなどを見ると閲覧者の環境に左右されずに デザインを見せるためにオールFlashで構築している場合も よく見られます。 また、同じブラウザでもMacとWindowsとLinuxではフォーム などの見え方が異なります。OSのバージョンでも異なります。 この差異をなくすには各ブラウザの開発元がお互いに 情報公開をして表示の互換性を高めないといけませんが 現実的にそんなことは無理な話です。 ですからどこまでで妥協するかという話になります。 ブラウザの差異が出るのは仕方ないのですが、IEは 何かと独自仕様（独自タグ含む）を使いたがるので WWWコンソーシアムが定めた規格に基づいてサイトを 構築してもIEでは表示が崩れてしまうとか、逆にIEの 機能を活かしたサイトを構築すると他のブラウザでは 挙動が異なるなど、厄介なブラウザという認識です。 今は従来のようにほとんどのサイトがIEを推奨環境とする 時代ではないのです。 実際、OKwaveのQ&Aコミュニティ（このサイトです）の 推奨環境をみると、（情報が古く更新されていないので 現状何を推奨としているのかは不明ですが） IE6を推奨としていて、IE8を使う場合一部機能が正常に 表示されないかもしれないという文言があります。 IE8から独自仕様が追加されるなどしてIE6と互換性が 低くなったのだということがこの表記から推測できます。 FirefoxだとかChromeなどはオープンソースであることを 活かして不具合の修正への対処が比較的迅速に行われ、 更新間隔が短いのでみるみるバージョンが上がっていくのですが 旧バージョンで見えていたサイトと新しいバージョンとで 見え方が異なるとかはほとんどありません。 独自の技術をアピールするための媒体としても使われるIEと サイトを正確に表示することを目的としている（と思われる） Firefox、Chromeとでは表示の見え方に差異があるのは 仕方ないと言えます。 MacのSafari5とChrome8で貼られてるアバクロのサイトを 見る限りは画像を貼られているIE側のような影は見えません。 Windows 7とIE9およびChrome8の組み合わせでも同様です。 IE8固有の問題なのかどうかについては、現状手に入る ブラウザでお使いのパソコンに入れられるものを全部 試してみるなどしないと判断できません。 それらを比較して表示の見え方がIE8だけ違うならIE8 の問題なので、閲覧者向けに「IE8はサポート外です」 などと表示して自分が意図したように見えるブラウザを使って 見てもらうしかありません。
お礼
jeinさん、有難うございました。 DOCTYPE宣言を入れれば上手く行きました。 本当にお世話になりました。
補足
jeinさん、早々のご回答有難うございます。 ご回答を拝見させて頂いていて「なるほど」と 思い当たるふしがたくさんありました。 「なるほど、そうだったんだ。」と、有難うございます。 プログラム素人の私ですが非常に勉強になりました。 参考にしたいアバクロのサイトは私のパソコンを使い、 FireFox、IE8どちらもプルダウンメニューの 影が消え非常にスッキリして見えます。 この現にアバクロが行っている影を消す手法を 何とか知りたいと思っております。 本当に素早いご回答に感謝です。 有難うございます。
お礼
outbraveさん、始めまして。 ご回答の「DOCTYPE宣言」を一行目に入れましたら 全てが上手く行きました。 「style="border:none;」の設定そのままで いけましたので本当に助かりました。 心よりお礼を申し上げます。