現在大掛かりなサイト構築作業の真っ最中なのですが、今回は全面的にスタイルシートを利用してレイアウトしています。今までテーブルレイアウトにすっかり慣れきってしまっていた自分にはとても勉強になる作業なのですが。。。
ブラウザによってスタイルシートの解釈が違うのが何ともはや・・・
今でも一番使われているであろうIE(インターネットエクスプローラー）をメインに確認をしていたのですが、そうするとFireFoxでプレビューした場合に著しくレイアウトが崩れる場合があります。
特にボックス内側の余白（padding）と、外側の余白（margin）には、注意が必要。
IEでは、ボックスの内側に余白（Padding）を指定した分だけつくりますが、FireFoxではボックスに指定した余白分のピクセルを足してその内側に余白を作ります。書いているうちにもこんがらがりそうですが。
とにもかくにも、メインで確認するブラウザをFireFoxにして、その後にIEで確認するようにした方が良さそうです。
ブラウザを選べるのは、使う側にはとても良い事だと思いますが、サイトを製作する側にとっては負担が増える事であまり好ましい事ではありません(笑)
仙台人SNS引き続きテストモニター募集中です仙台にお住まいの方、仙台を愛しているという方に参加して頂ければ嬉しいです。
仙台人気ブログランキングは、参加ブログが110サイト突破！こちらも応援宜しくお願いします！
コメント (4)
そう、IEがおかしいんですよね(笑)
僕も同じでIEでちゃんと表示され、FirefoxやOperaでみたらアボーンみたいな事あって以来、全く逆な形でCSSレイアウトをする様になりました。
一応、CSSハックなるものがありますが、何かよく分からなくて..
Mac版、Win版ともにIE5.x系のブラウザは勘弁です(笑)
投稿者: ＠ndy | 2007年01月11日 17:26
日時: 2007年01月11日 17:26
でもね。
クライアント（だけではなく一般的なユーザー）のほとんどがIEを使っているのですよ。
IE（インターネットエクスプローラー）と言っても分からないくらい(笑)
WEBサイトの横幅を決めるのもそうですが、今現在のスタンダードを探る作業は難しいですね。
投稿者: 管理人 | 2007年01月11日 22:08
日時: 2007年01月11日 22:08
どうも、初めまして。ドリームエージェントと申します。
自分は、以前Web制作会社で制作していた時に、CSSには苦労しました・・
自分がしていたやり方は、DTDの宣言を標準モードにして、
CSSの最初に、
* { margin: 0px; padding: 0px; }
を書いて、すべての要素のマージン＆パディングを0pxにしておくと、作り易いです。^^
■文書型宣言と表示モードの参考にどうぞ^^
http://desperadoes.biz/style/mode.php
参考にして頂けたら幸いです。
過去に、全部CSSでレイアウトして作ったサイトです。
http://dento.cc/
ちょっとCSSを変えたサイトです。
http://662.jp/
※現在は、自分ではなく、制作会社が運営しています。
それでは、これからも宜しくお願い致します。
投稿者: ドリームエージェント | 2007年01月13日 19:08
日時: 2007年01月13日 19:08
>ドリームエージェント さん
コメントありがとうございます
参考にさせていただきますね
投稿者: 管理人 | 2007年01月15日 15:43
日時: 2007年01月15日 15:43