- 締切済み
macで見たＣＳＳで作られたページについて
今までテーブルレイアウトをしてきましたが、 ＣＳＳレイアウトに移行しつつあります。 WIN XPで作成しているのですが,MACのIEで見るとレイアウトが崩れます。WINのIEではエラーはないんです。 MACの方だとスペースや余白などが失われてレイアウトが崩れているようです。 また、ココログのブログなどもずれたりしてレイアウトが崩れます。 様々なブラウザに対応するＣＳＳを使うにはどうしたらいいでしょうか。 わたしは、「”CSSレイアウ践講座” CSSレイアウトでSEOに強く、ソースも軽く、表示も速いホームページを作ろう」というページや「スタイルシートによるレイアウトデザイン見本帖」という本などを参考にしてやっています。
- go_and_goes
- お礼率50% (43/86)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- rody555
- ベストアンサー率0% (0/0)
当方OS9のmacIEを使っております。。 気にかけてくれるだけでも嬉しいです。 使用者に言わせていただければ、レイアウトは大幅にくずれても「読めれば」許容範囲です。 （ちなみにこちらの教えて！gooもずれまくっておりますが読めるのでOK） 解決策としては、多少めんどくさいですが、javascriptでCSSをwinとmacに読み分けさせています。 きちんとした方だとブラウザやバージョンごとまで分けているようですが大雑把な私にはこれで充分です。
CSSレイアウ実践講座というページをちょっと見ました。初心者用に分かりやすくしているつもりかもしれませんが、間違った記述を多々発見したので参考にしない方がいいかと。 cssだっつってるのに、紹介してるテンプレでいきなり<div align="center">とか書いてあるし…。 （どうでもいいけど、このサイト、自らサイト名をいきなり間違えてますね。実践の実が抜けてるw） #1でも言っていますが、winのIEはcss関係のバグが多いので、他のブラウザと表示が違うという場合、大抵正しいのは他のブラウザで、間違ってるのはIEです。 確認するブラウザですが、Netscape6以降はFirefoxと殆ど同じなので、winならIE、Firefox、Operaの3つでいいと思います。 IEだけレイアウトが変わるという場合、paddingやmarginあたりに関するバグが原因であることが多いです。 IE5.5以前と6の互換モードだと、widthやheightの値がpadddingとborderまで含めた値になってしまうとか、floatした要素と同じ方向（float:leftならleft）のmarginが2倍になるとか。 表示を統一させるには、まずDOCTYPEスイッチでどのモードになってるのかを把握した上で、それにあったcssを書いていく。 確認はIE以外（Firefoxがお勧め）でして、IEでどうしても狂う部分はcssハックを使う。 それとcss書く時は、全称セレクタで全てのmarginとpaddingをリセットしてから個々に指定し直すと管理し易いと思います。 *{ margin: 0; padding: 0; } ついでにもうひとつ。cssは正しいhtmlありきです。まず正しいhtmlを書きましょう。css用に無闇矢鱈とdivやspanを使うのは、ややこしくなるだけなのでやめた方がいいです。
お礼
お礼が遅れてすみませんでした。回答有難うございます。 marginとpaddingを見直してみます。（使っていたと思います） DOCTYPEスイッチですが、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> になっています。このDOCTYPEで良いのでしょうか？ <div id="">のようなカタチでよく使ってしました。<li id="">に修正してみます。 よくclear:bothを使っています。これもバグの原因になっているでしょうか。 Firefoxですが、以前インストールしたところ、IEが使えなくなってしまったのですが、 どちらも一つのパソコンで使えますか？ 回答していただいたのにまた質問攻めですみません。 もし、参考になるページなどがありましたらお時間のあるときでいいので、 教えていただけたら幸いです。 とても参考になる回答を有難うございました。
- 345itati
- ベストアンサー率48% (795/1639)
Win版IEとMac版IEは、バージョンが同じでも全くの別モノですのでそれは前提として。 Macユーザーとしては、現在開発もダウンロードもサポートも終了したIEよりも、SafariやFirefoxをメインに使われる方が多いです。 OS9以前ではIEという方が多いようですが。 Macでもきちんと見られるようにCSSを修正するには、W3Cの推奨する標準に準拠したCSSやタグの記述をして、Firefox等で確認するのがいいと思われます。 IEは現在の最新版である6.0はCSSへの対応が不十分な事と、バグの多さで、IEでまともに見られるサイトでもFirefoxやSafariではレイアウトが崩れているという場合が多いのが実情です。更に厄介なのは、IEは「独自拡張」というIEのみが使えるタグやCSSの存在が多くある事で、知らずに使っていると他のブラウザでは誤動作の元になります。 Windows側で、IE、Firefox、Opera、Netscape(レンダリングエンジンの違いで大体この四つに大別されます)で確認をしてレイアウトの崩れや誤動作が出ないように作成すればMac側でもまず大丈夫だと思います。 Mac Safariはこれらとも違うKHTMLエンジン搭載なので少し難が出る場合がありますが・・。
お礼
お礼が遅れてすみませんでした。回答有難うございます。 WinとMacのIEは別物なんですね（＞＿＜） FirefoxやSafariで動作確認し、正常に動作しても、IEでエラーが出るということも可能性ではありますよね。 その場合、何を基準にして修正していくべきなのか…悩みます。 あと”W3Cの推奨する標準に準拠したCSSやタグの記述”とありましたが、W3Cを調べてみたところ、 説明などしかなく具体的なことがわかりませんでした。 もし、参考になるページなどがありましたらお時間のあるときでいいので、 教えていただけたら幸いです。 とても参考になる回答を有難うございました。
お礼
回答ありがとうございます！ javascriptでCSS読み分けですね、難しそうなのでちょっと考えてみます。firefoxで見たところ、唖然、全くの違いに驚きを隠せませんでしたが、左寄せで作っていたものはそれほどずれがなく、ほっとしています。