ああ…いつもFireFoxを使用しているのでIEでの見え方に気を配るのを忘れていました…。
今日初めてIEで確認したらデザインが崩れまくり(泣)。気づかないまま1ヶ月以上放置していたなんて超絶恥ずかしい限りです!
…FireFoxでは正常に見えていたんですけどね。どうしてもブラウザに依存する部分もありますが今回は自分のスタイルシートの設定ミスです。
ネットサーフでデザインの崩れたサイトをたまに目にしますが、多分ほとんどの崩れの原因はHTMLタグの省略やスタイルシートにあるかと思います。
IEとFireFoxで自分のブログを閲覧してみて気づいた事をまとめてみました。
IE7
画像のborderリンク色:常にマウスオーバー時の色(スタイルシートの設定に問題有り?)
画像のaltタグ(画像の注釈):マウスを乗せるとツールチップで表示される
hrタグ(ライン):線が細い
字の大きさ:小さい時もある
字の見え方:小さい字は読みづらくなる
アイコン画像形式:icoファイル
FireFox2
画像のborderリンク色:マウスを乗せるとマウスオーバー時設定色に変わる
画像のaltタグ(画像の注釈):表示されない(titleタグで設定すればマウスオーバー時に表示される)
hrタグ(ライン):線が太い
字の大きさ:大きい時もある
字の見え方:大きな字はピンぼけするかも
アイコン画像形式:pngファイル
※あと、border(点線、破線など)の見え方はまるで異なる
両方を同時に立ち上げてチェックするのはちょっと辛いですが、どちらのブラウザでも正常に閲覧できればその他のブラウザにも多分対応出来ると思うので、たまにはIEも使わないといけませんね…。
使用シェア率はやはりIEがトップのようです。が、とりあえずFireFoxもプラグイン導入とカスタマイズで便利に使えるのでおすすめしておきます。一番のおすすめはマウスジェスチャー機能。「前のページへ戻る」を「右クリック+マウスを左へスライド」で実現できます。(IEにもある?)
それにしても、今回は恥ずかしくて頭に血が上る思いでしたので、今後は気を付けたいと思います(苦笑)。
でも、HTMLやスタイルシートについてはまだまだよく分からないんですよね。精進します!





