スポンサーサイト

今日は何位かな?→人気ブログランキングに参加しています♪

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-) | [編集]

ブラウザで見える色が違うのはどうしてなの?

今日は何位かな?→人気ブログランキングに参加しています♪

マーチャント.jpで仲良くしてもらってるゆきなさんの
ブログが更新されて出ていたこんなタイトルが見えたので、
早速お邪魔してきました。




ブログアフィリエイトで楽しく稼ぐ基本のキホン!


IEだと思い通りにプラグインのタイトルが黒に表示されているのに、
Firefoxだとピンクになってしまっているとのことでした。


(画像はクリックすると拡大します)


確かにIE系ブラウザ・Sleipnirで見ると

yukinasan_blog_3s.jpg


この通りタイトルは黒なんです。


でもFirefoxで見ると

yukinasan_blog_4s.jpg



ピンクになっちゃってますね。


でもその上のプロフィールはFirefoxでも黒です。


yukinasan_blog_1s.jpg



で、アヤシイとにらんだのはこの辺り。

yukinasan_blog_2.jpg



早速ソースを覗いてみます。
なるほど。


私の診断結果はこうです↓

yukinasan_blog_5.jpg



<FONT>と</FONT>はセットで
しかもこの順番で使わなくてはいけないタグなんです。
でも何故か上に</FONT>が…。


そこを修正してもらったら


yukinasan_blog_7.jpg




きちんと元に戻りました♪

yukinasan_blog_6.jpg




このパターンの間違いは以前から何度か質問を頂いていました。


IE7またはSleipnirなど
IE系のブラウザのみで表示確認をしている場合に
起きているようです。


Firefoxなどmozira系のブラウザでも表示確認すると
こういった表記ミスを早く見つけることができます。


二つ確認するのが面倒!って場合は、
Firefoxでのみ最低限確認することをオススメします。


意図しない表記で訪問者さんを逃してたら寂しいですから。
(今回のゆきなさんの場合は、ピンクの背景にピンクの文字だったので
非常に読み辛いと指摘をもらって修正されていました)



何故このように異なる系統のブラウザで
表記差が出てしまったかというと、
FirefoxがHTMLの文法に対して
非常にマジメなブラウザであるからだと考えます。


だから、<FONT>で定義したタグを閉じられていないと判断し、
ブログの両サイドのカラム全体に引っ張ってしまったんですね。


IE系の場合、該当のタグが閉じてなくても、
他のタグを閉じると一緒に閉じたと判断してしまうようです。


バグのようであり、
今回のように勝手に閉じてくれて
都合の良い時もあります。


ブラウザによって違うと思いますが、
細かく言い始めると文字のサイズや解像度の違いから
必ずしもあなたのパソコンと同じ状態で
全ての訪問者が閲覧しているとは限らない。


それは理解しておいて欲しいと思います。



アフィリエイターはMTを使う必要がない限り、
必ずしもHTMLマスターである必要はありません。


それでも最低限のチェックは必要になってくるので
閉じる必要があるタグがあるといったような
基本的な部分だけは押さえて下さい。



余談ですが、、、
スタイルシートでfontの定義をした方が
閉じタグが不要になるので間違いも減ると思いますし、
検索エンジンにも好まれるようです。


スタイルシートももちろん完全マスターの必要はありません。
最低限の知識だけ持っていたら十分です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

[tips]tips | 【2009-02-23(Mon) 14:46:47】 | Trackback:(0) | Comments:(3) | [編集]
コメント
確かに、HTMLのちょっとしたミスよくやっちゃいますよね。

応援、ポチッ!
2009-02-23 月  14:57:11 | みんなでお金持ち [編集]
えあさん、ごきげんよう。
ゆきなです。

今回は本当にありがとうございました!!
自分では「ミスしてない!」という思い込みもあったよなあとちょっぴり反省してます( p_q)

でも、こういうことがあったから、勉強にもなったし、記事にもできたし(笑)なので結果はよし!と考えてます。

これからもよろしくお願いしますね~。
応援します☆キラッ
すいかのたねです。
コメントありがとうございました。

リンク切れのご指摘ありがとうございます。
実はこれも一部のブラウザによって不具合がって感じのようです。(^^;)

IEとFFではかなり見え方に差の出ることがありますね~。
仕事ではちゃんとチェックしているのに、
ちょっと手を抜いてしまったことに反省です。(-_-;)
コメントの投稿


管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする(FC2ブログユーザー)


Copyright © ホームページ&ブログ作成tips All Rights Reserved. Powered By FC2. 
skin:*cuteblog*   
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。