もうかれこれ10年以上。
テキストメニュー
最新テキスト
コメント
■遂にやってしまいましたよ・・・
 + 元新人(10/27)
 + 6years(10/24)
■夏の日の1993
 + Vl(10/27)
■次回予告メーカーが!
 + 元新人(10/27)
■嫁の職場での一言。
 + 元新人(10/27)
<< 2018/08 >>
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
月別テキスト
人気テキスト
リンク
■ブログ・モジュール関連
 + ぶろぐん+様
 + nJOY BLOG様
 + ゲットネット様
■友人サイトとか
 + アクアラビュー専門店
 + ホーネット買うまでがんばるブログ
検 索
プロフィール
ログイン
現在のモード: ゲストモード
USER:
PASS:
俺つぶやき
なんか買うてやー








■関連記事■


■関連記事■


■関連記事■
月1万はイケるね


月100万とか夢みたいなこと
言ってないで、目先の1万円に
飛びついたらいいと思います。
俺は大体月2万くらい、これで
稼いでます。パソコンで文章を
打つのが得意だったら、絶対に
おすすめ。月1万はでかいよー


お知らせ
■ゲーム実況やってます。 ニコニコ動画→こちら Youtube→こちら

>> HOME > 普通日記 > FireFoxとIEでのCSS動向
2009,06,02 / 21:30

昨日から何時間、HTMLやCSSと向き合った事か。何時間borderとmarginとpaddingとwidthとdivで悩んだ事か。もうしばらくCSS見たない・・・orz

でもまあ折角色々いじって何とかなったんで、今回勉強になった事をつらつらと羅列していこうかなと。なんでHTMLやCSSに全く興味がない人は、読む気しないと思います。しかもかなりな長文。とにかく形に残したいという自己満足ですイェー。



■!DOCTYPEが相当重要

HTMLの頭に書く宣言ですが、HTMLだけならそう意識しなくてもいいっていうか、書かなくてもなんとかなるんですが、CSS使う人にはめっちゃ重要。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">みたいな感じのやつです。HTML書いた人なら見たことあるかと。

俺はこれを全く理解してませんでした。挨拶みたいなもんかと思ってたわけで。でもこの!DOCTYPEによって、ブラウザのCSSにおける解釈が、標準準拠モード後方互換モードに切り替わります。

わかりやすく言っちゃうと、標準準拠モードは折り目正しいマニュアル君なだけに融通が利かない、後方互換モードは融通が利くが、多少の間違いも勝手に解釈してしまうクセがあると、こんな感じですね。

CSSをしっかり正しくやりたいのであれば、迷わず標準準拠モードの!DOCTYPE宣言をしましょう。さきほど書いたタグがそれにあたります。俺はそれを知らなかった為に、今回の間違いを起こしました。



■FireFox3での不可思議な現象?

今回の俺は、ブログスキン制作の際、どのブラウザでも後方互換モードになるよう宣言してた(後で知ったんですけどね)わけです。しかし不思議な事に、IE6や7では後方互換で解釈されるのに、なぜかFireFox3では、標準準拠で解釈されていました。

これが今回のレイアウト崩れの最大の原因でした。だったら、IEでも標準準拠モードで認識されるようにすれば・・・と宣言しなおしたら、今度はIEがレイアウト崩れ発生・・・しかもFireFox3でもさほど崩れは治らず・・・orz



■borderとpadding

この2つの要素が今回最大の難敵。今まで俺が使ってたCSS、つまり後方互換モードにおける動向と、今回採用した標準準拠モードにおける動向とでは全く異なります。これを知らないとまず間違いなくレイアウト崩れを起こします

例えばwidthで300px指定したブロックがあるとしましょうか。

後方互換でそのブロックにborderで1pxの線を引くと、そのブロックの横幅は合計で302pxになります。罫線はブロックの外側に引かれるという事。

でも標準準拠では、罫線はブロックの内側に引かれ、その分ブロック自体が外に押し広げられる事に。結果としては同じですが、標準準拠の場合、borderだけではなく、paddingでも同じ。

幅が300pxで、1pxのボーダーで囲われた、左右のpaddingの合計が10pxのブロックを作りたい場合のwidthの値は


 1.後方互換・・・298px(左右の罫線1px、合計2pxをマイナス)
 2.標準準拠・・・278px(左右の罫線及び、左右のパディング、合計2px+20px=22pxをマイナス)



つまり、標準準拠の場合、paddingもブロック内に押し込められ、かつ数値分そのブロックが押し広げられるという感じ。

・・・なーんか変なの。width指定してんのに、他の要因で指定したwidth通りにならないって。一般的に正しいとされてるのは、標準準拠らしいんですけど、後方変換のほうがわかりやすいしめんどくさくないんだけどなあ。



参考例:ブロックの見え方の違い

幅300pxのブロック

width278px、padding10pxの表示

width298px、padding10pxの表示

※当ブログでは、標準準拠モードで見えるように!DOCTYPE宣言してる為、ほとんどの方が、上のブロックが300pxに見えていると思います。




■CSSファイル編集時のインデント

テキストエディタでCSSファイルを編集している際に

.menu_bar{
 font-size:12px;
 background-color:#FFFFFF;
}


こんな感じに、TABキー1回押して、左端に半角2文字分のインデントをつけて、ソースを読みやすくしてるんですが、まさかこれがネックになるとは思ってもみませんでした。

IEではこれで全然問題ないんですが、どうもFireFoxだとうまく読み取ってくれません。インデントとしてではなく、全角1文字として認識しちゃってんのかも。

試しに全部インデント消して、代わりに半角1文字分のインデントに修正したら、直ったんですねこれが。これに気づくまでが一番時間かかったし。



・・・というわけで、やたら時間はかかりましたが、一応IEでもFireFox3でも見た目ほとんど同じってところまで修正しました。ネット検索しても、なかなか知りたい情報を得られなかったのが最大の敗因。

IEでキレイに表示されてても、FireFox3では目も当てられないという状況はちょいちょいあるようで。ブロガーは一度FireFox3ダウンロードして、自分のブログ見てみるといいです。

試しにFC2でブログやってる友達のサイトみたら、罫線がほとんど表示されておらず、まっちろなページでした。うわー。業者側で用意したブログスキンにも不具合でてんのか。こりゃ大変だ。

なんで、まずFireFox3で見た目を確認して、IEで検討したほうが、作業が少なくて済むと思います。2日間でこんだけHTMLとCSSの勉強したのはじめてだわ。報告くれたSANITY君、ありがとーう!



・・・て長。こんなん誰が読むんだ・・・orz



■同カテゴリ最新記事■
おおおお疲れ様ですー!
綺麗に直っているのを見てびっくりすると同時に
憔悴しきった様子の元新人さんを見てあわあわしてる私です。

普段使いがFirefoxなのですよ。
色々なブラウザ使って、結局ここに戻ってきて。
IEがないとWindows関連のアップデートができないので
IEも一緒に入れてはいるんですが…。

な、何か余計な手間をかけさせてしまったようで申し訳なく…(ガタガタ)
でも、これでブラウザ切り替えずに快適に楽しむことができます。
ありがとうございます&本当にお疲れ様でした!
SANITY | EMAIL | URL | 09/06/02 22:18
ええ。憔悴しきりました。若干気持ち悪くなってきました。でも達成感が半端じゃねえっす。これやったからって何かもらえるわけでもないのに、気が済まずについ・・・

アクセス解析みてみても、FireFox使いって決して無視できない数字なんです。だからなんていうかこう、さにてぃくんが見られないからなんておこがましい考えじゃなくてね。誰も使ってなかったら「ごめん!IEつかSleipnir使って!」とか言いそうな勢いでしたからええ!

今回は本当にCSSの勉強になったし、さにてぃくんも喜んでるんだからまあ一挙両得とでもいいましょうか。結果よければ全て良しの方向で!
元新人 | EMAIL | URL | 09/06/03 00:53
コメントする








この記事のトラックバックURL
http://rouhi.jp/tb.php/396

Copyright © ジカンノロウヒペイジ All Rights Reserved.