CSSの各ブラウザ対応 - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

CSSの各ブラウザ対応

法人・ビジネス ホームページ・Web制作 2007/09/13 02:12

現在、CSSハックを使用して各ブラウザ間の誤差を修正しているのですが、今後CSSハックは使えるかどうなるかわからないと思います。そこで今後対策としてどうお考えですか?または、良い案はありますでしょうか?
宜しくお願いいたします。

たっつんさん ( 奈良県 / 男性 / 25歳 )

回答:4件

ウジ トモコ

ウジ トモコ
アートディレクター

- good

私がいつもやっていること

2007/09/13 22:35 詳細リンク

たっつんさん

こんにちは ウジトモコです

普段、私のやっていることなので、正解かどうかわかりません。が、もし、参考になれば、と思いご紹介します。

「予測」と「予防」

に尽きると思いますが、簡単に言うと
1.ブラウザによって「崩れにくいデザイン」を提案する
2.「複雑すぎるCSSを作らない、使わない」です。

また、いやな予感がしたらお客様に「お勧めできない」と言ってしまいます。

時間効率や予算のしばり、メンテナンスの手間もありますから、CSSで見せ場は作らず、FLASHや気の効いた画像、配色に集中します。

テキストメニューなどずれが生じると明らかに判読性が悪くなるモノはマックスで見てバランスをとり、ユーザビリティを最優先しますし、どうしてもフィックスしてしまわなければならない時には、別のところで「遊び」を作ってつじつまを合わせるようにしています。

今後「ルール」が変わってしまいそうな危険があること自体にあまり深入りせず、本質の表現力を磨くような努力・・と言うんでしょうか。

凄くシンプルでも、かっこいいものや使いやすいデザインは出来ますから。

「デザインハック(?)」で乗り切る、ですかね。
あまり参考にならなかったかもしれませんが、もしよければ、デザインの勉強もしてみてください!(自社ブログで恐縮ですが・・↓)

http://ujipub.exblog.jp/
使える「デザインセミナー」

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
北窓 喜一郎

北窓 喜一郎
Webプロデューサー

- good

ハックする前に、作成されたCSSを見直されてみては?

2007/09/17 02:50 詳細リンク

こんばんわ、ブレスの北窓です。

CSS・・・各ブラウザに合わせるのはとても大変な作業ですね。
私の場合は、よほどクライアントさんが「全てをCSSにしないといけない」とか「システム上でどうしても・・・」と言われれば、各ブラウザやOSごとに用意したCSSを作成します。
そうでなければ、クライアントに提案する前に、崩れそうなデザインやレイアウトは極力避けるようにしています。

誤差については、多分よくあるのが「margin」「padding」などの余白調整や、「px」「em」「pt」・・・などの文字の大きさや「float」などのレイアウトズレなどで誤差が出てくるのだと思います。

私も結構苦労して調整した記憶がありますが、例えばCSSでレイアウトする前に、紙の上でレイアウト作成し、CSSでレイアウトブロックの背景に色を付け視覚的にわかりやすいようにします。
その後、各ブラウザ(私は作成するときHP作成用のエディターのプレビューは使用せずブラウザで実際に確認するようにしています)でレイアウトチェックをしてから、原稿を入れるようにしています。
そうすることで、floatなどでレイアウトしたところが解除忘れでズレてくるなど、色分けをしているので分かるようになると思います。

また、CSSハックを考える前に、作成されたCSSをもう一度見直すとことで、どこで誤差が出ているのか?一つずつ検証されてみてはどうでしょうか?私も自分で作成して不明になったら、最後の手段としてCSSを一つずつ検証しています。

後は、Firefoxなどのアドオンツールで(Firebug)等を組込んで確認されてみては?

■Firefox:http://www.mozilla-japan.org/products/firefox/
■Firebug:https://addons.mozilla.org/ja/firefox/addon/1843


あまり参考にならないかもしれませんが、頑張って作成してください。


JavaScriptかな

2007/09/13 07:34 詳細リンク

初めまして、マジック・プロジェクト 海岸ともうします。

10年ホームページ制作をやっていますが、ブラウザ間の誤差がなくなったことは、ありませんでした。
そもそも、WindowsとMacは、画面の解像度の違いで文字の大きさが違います。
いつの時代も見た目を合わせる苦労はなくならないと思います。

さて、ご質問の件ですが、CSSハックが使えなくなったらとのことですが、世界中の技術者が穴を探しているので、誰かしら何かしらの手法を見つけてくるものです。
但し、その技を仕入れる情報経路や技の特性を理解し組み合わせて利用する発想力は、利用者の能力ですので、磨き続けるしかないですね。

最悪、自分がやろうとしていることが、CSSハックでどうしても出来ない場合は、私なら、スタイルシートをJavaScriptで切り替えて対応するとおもいます。
ちなみに、この方法スタイルシートの管理が大変なのであまりやりたくないですね。


消極的な手段ですが、私の対策案

2007/09/13 13:56 詳細リンク

お世話になっております。

IE7の登場で、またもや混乱が生じていますので、ブラウザ周りの調整で苦しみます。先日は、JavaScriptのwindow.のあるメソッドでFFとIEで動作の違いが出てきてしまい、困ったことがありました。

CSSのみならず、過去のブラウザも含めて、色々な環境に対応するのは、とても大変な作業ですね。そんな製作の面から、参考にはならないと思うのですが、私の経験を書きます。

●CSSハックに依存しないデザイン
私は、ユーザーのスタンダード環境をWindwosXP/IE6,FireFox2としてバリデーション重視で書き、同じように見えるように構築します。フルCSSで作ろうという際の自由度が下がりますが、これは多くの方がデザインを調整していくなどをして、既に「やむを得ず」やっておられると思います。

●プログラミングでカバーする
「現行の様々な環境を想定して欲しい」などの厳しい要求がある場合、出来るレベルならJavaScriptでの振り分け、また、あまりにも古い環境まで想定する、厳しすぎるような指示の場合には、.phpや.cgiで、ブラウザに合わせた.cssをプログラムで吐かせたりする場合もあります。こういうのは、余計なことで無意味に複雑になりますので、出来ればやりたくない事ですが…

いや、本当に参考にならなくて申し訳ないのですが、現実的に作業を進めるには、現状のデファクトスタンダード環境から「妥協点を求める」ことで、対策案とせざるを得ません。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

CSSでの文字指定について tcnさん  2013-04-10 09:24 回答2件
自サイトに、見知らぬクッキーが…! Hajestiaさん  2013-01-23 22:46 回答1件
#を使ったページ外特定箇所へのリンクについて matumatukodomoさん  2012-02-17 23:14 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)