フルスタイルシートでフルブラウザ対応ってできますか

質問

お世話になります。

教えていただきたいのですが
デザイナーが作成したデザインをマージン、パディング、文字のサイズや行間とも、1ピクセルも違わずに表現することは可能でしょうか。
可能ならば、どういったことに注意してスタイルシートをかけばいいのでしょうか。
対応したいブラウザは
win IE6、7 Firefox
Mac Firefox Safari
（できればOSとわず、ネスケ、オペラなどすべて）
はかなり厳しいのでしょうか。

ご存知の方、経験者の方教えてください！よろしくお願い致します。

回答No.3

noname#83877 · ベストアンサー

昔は無理だったかもしれませんが、現在は可能です。
まずDTD宣言を決めます。
この時点でブラウザの挙動が決まるので、コーディングで気をつける部分が変わってきます。
とりあえず常に言えることはwidth・heightとそれに対応する方向のpadding、もしくはborderを同時に指定しないことです。
floatとmarginを一緒に指定した要素にはdisplay:inline;を指定してください。

それと基本的にはバグを潰したり挙動を同じにするためにブラウザのスタイルをリセットします。これは人それぞれで、私もけっこうカスタマイズしています。

有名なのは必要な要素にmargin:0; padding:0; を指定しますね。
IEでは条件付コメントを使って*{zoom:1;} ul,ol,li,acronym,abbr{zoom:normal;}を指定すると良いと思います。

フォントサイズは状況にもよりますがDTDがstrictの時はmediumを指定し、一部のIEに条件付コメントでsmallを指定してやると良いと思います。

言い出すときりがありませんが、正直IE4以下、opera6以下、netscape4.xが出てこなければなんとかなると思います。

回答No.4

神崎 渉瑠（@taloo）

> デザイナーが作成したデザインをマージン、パディング、文字のサイズや行間とも、1ピクセルも違わずに表現することは可能でしょうか。

たとえフォント名を指定しても、
OSが違えばインストールされているフォントも大幅に違ってきますので、そのフォントで表示されず、
結果的に文字幅が違うようになります。

> win IE6、7 Firefox
> Mac Firefox Safari
> （できればOSとわず、ネスケ、オペラなどすべて）
「すべて」のなかに音声ブラウザや画像を表示できないテキストブラウザが含まれるのかは知りませんが、
「スタイルシートに対応しているグラフィカルブラウザの全て」という非常に限定的な「すべて」であれば、
マージン、パディングはピクセルで指定すれば、可能です。

印刷した紙を虫眼鏡で拡大すると、１センチの幅が２センチに見えますが、
そういうことも考えるなら、
IE7やOpera9以上、および多くのPDFビューワー（PDFリーダー）には拡大縮小機能がついていますので、不可能です。

お礼

ご回答いただいたみなさま

お礼が大変おそくなりまして申し訳ございません。
metametamuさん、詳しくご回答いただきありがとうございました。

やはりすべてのブラウザとなると微調整しなければならなそうですね。

みなさんの意見を参考に、ずれないレイアウトを研究してみます。
ありがとうございました！

回答No.2

dezimac

完璧にというならオール画像かFlashにでもしないと無理。
印刷物と違って、Webページは見る環境に大きく左右されます。

画面サイズ（ブラウザのウインドサイズ）も人それぞれだし、読みにくいからと文字を大きめに設定する人もいますし。
OSによって書体も異なりますし。

文字サイズやウインドのサイズが違ってもある程度柔軟に対応できるようにした方がいいです。
デザイン上どうしても譲れない部分だけは画像にしたり、文字サイズ等を固定（○px）するとかして、そう出ないのはベースに対して○%といった指定をして。

Windows版IE以外はw3mの推奨する標準にほぼ準じているから、Firefoxででも確認すれば、OperaやSafari等の他のブラウザでほぼ同じに見えます。
書体の違いとか微妙な違いはあるけど。

問題はWindows版IE6以前で、好き勝手独自解釈する部分が多いので、そのままではレイアウトがかなり崩れます。

各ブラウザのCSS解釈のバグを逆手に取ったCSSハックと呼ばれる方法があるので、それでIEにしか理解できない書き方とか利用して調整して下さい。

CSSハック一覧　HTML│CSSタグ辞書
http://d-lover.com/css/hack.shtml

↓各ブラウザでの見え方確認できます。
http://www.browsrcamp.com/
http://browsershots.org/

回答No.1

ORUKA1951

デザイナー次第です。
　ウェブ技術を知り尽くしたウェブデザイナーなら、それを見越してデザインするでしょう。

　しかし、残念ながらDTP出身の方が多く、あたかもカタログを作るような感じでデザインする人が多く、多くはうまく行きません。

　そもそも、ウェブを良く知っていれば、デザイン自体をスタイルシートで行えるでしょう。
　そこで必要なのが、発注者側の知識です。自分で完璧にできる程度の知識があって、そのための時間が取れないから発注するのならよいのですが。

　しかし、拝見するところ
＞デザイナーが作成したデザインをマージン、パディング、文字のサイズや行間とも、1ピクセルも違わずに表現することは可能でしょうか。
　ですから、とてもそのようなレベルには発注者が到達していないと思われます。

　そもそも、示されたブラウザが今のままで停止しているわけではなく、日々進化しているのですから、半年後にはそのデザインは陳腐化してしまいます。IEは次期バージョンで他のブラウザ同様、ウェブ標準に準拠すると宣言されてますし。

　発注者側に必要なこと・・
　HTMLの仕様書を読破して、その目的や理念を理解すること。特に
Introduction to HTML 4 (ja)
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html
　このページはね。

　どこにも、
＞デザイナーが作成したデザインをマージン、パディング、文字のサイズや・・・・
は書いてありません。これは目的が違うということ。もしそれらを希望されるなら、PDFというより優れたフォーマットがあります。
　HTMLは、どんなユーザーエージェント(ブラウザだけでなく、音声端末、点字端末、携帯電話、PDA、サーチエンジン・・・）でアクセスしても、情報【デザインではない】を与えられるかということです。