スポンサーサイト
-------- -- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事のURL | スポンサー広告 | | | ブログトップページへ
Firefoxを入れて気づいたこと (IEとの表示の違い)
2007-10-10 Wed 14:20
2007年10月10日(水)

前回書いたように、しばらく前に、firefoxをインストール
してみた。
入れる前から、ある程度の予備知識はあった。
afiliateさんの「アフィリエイトは儲かんないってば」で
 ・うはw超便利Firefox
 ・FirefoxとIEのfontの表示の差
などの記事(その他、firefox導入の関連記事多数あり)
を、いくつか読んでいたからだ。
IEとFirefoxの表示の差を埋めるのは、厳密に考えると
途方もなく大変そうなのだが、実は私にとって一番わかり
やすく、なおかつ重要な差異に思えたのは、「心が折れそ
うなアイコン
」という記事の中でさらりと書かれていた、

 IE用にalt属性、Firefox用にtitle属性を入れて
 お使いください


という記述。
…え?

【Firefoxでは、画像のalt属性は無効?】
ふだん私は、ブログ記事中に画像を挿入する時は
<img src="http~.jpg" alt="○○○">
というタグを使い、alt="○○○"の、○○○の部分には、
日本語で画像の説明を入れるようにしている。
これは本来、画像が表示できない際(キャッシュページ等
でよく見かける)の「×」の横に表示される代替テキスト。
IEでは、画像の上にポインタを乗せれば、この○○○が
表示される。
○○○の文字列は検索の対象にもなるので、私はなるべ
くちゃんと書くようにしているのだが、firefoxユーザーには
見えていなかったのか…(ちょっとショック)。

せっかくなので、afiliateさん作の「心が折れそうなアイ
コン」をお借りして、実験。

もう勘弁してください(泣)

これはalt属性しか書いてないから、Firefoxだと、絵の
上にポインタ乗せても、確かに何も見えない…。

では、こちらはどうだろう?
もう勘弁してください(泣)


こちらはtitle属性も書いたから、firefoxでも見られる。
ちなみに、このタグでは、alt属性とtitle属性の内容は、
あえて変えて、
<img src="http~kokoro-oresou.gif" alt="もう勘弁してください(泣)" title="もう許してくれた?">
のようにしてみた。
こうすれば、IEで見た時と、Firefoxで見た時、見え
る文字が変わるだろうと思ったのだ。
ところが、どちらのブラウザでも、title属性の方が
表示されたのだ。
…となると、両方書いたら、alt属性は、本当に画像が
非表示の場合しか役に立たない…?
これならtitleだけ入れて、むしろaltは入れなくていい
ような気もするのだが、IEやFirefox以外のブラウザ
では違いがあるのだろうか?

これからは、画像表示のタグにtitle属性も入れるべき
か、ちょっと思案のしどころである。

【FirefoxはIEより、きまじめ?!】
afiliateさんの記事中にも何度か出てくるのだが、IEは
結構いい加減なところがあって、HTMLに多少の間違い
があっても、気にせず表示してくれる。
良く言えば融通がきく。
でも、Firefoxは結構デリケートで、指示の仕方にミスが
あると、言うことを聞いてくれない、という傾向があるよ
うなのだ。
Firefoxを導入して、まず自分のブログを開いて、「アレ?」
と思ったのは、記事本文の行間だった。
 
[ 続きはここから… ]

私は自分の老眼が始まっていることもあり、文字は大きめ、
行間は広め、の「高齢者にも見やすいサイト(笑)」を心が
けているつもりだ。
行間は、このくらいにしてある。

IE6で見る当ブログの行間


なのに、Firefoxで見たら、行間が狭い!(9/26時点)

Firefoxで見た当ブログの当初の行間


何で、何で~~?
このブログのCSS(スタイルシート)には、

.entry_text {
font-size: 14px;
color: #4D4D4D;
margin: 5px 30px 10px 20px; 
line-height : 170%;
}

と、指定してある。line-height : 170%; という指示は
Firefoxでは無効なのか?と諦めかけていた時、やはり
afiliateさんの記事「IEとFirefoxの表示の差」中のボー
ダーに関する記述を思い出した。
同じCSSなのに、IEで表示されるボーダー(枠線)が
Firefoxで表示されない原因を調べたら、borderの記述の
前に全角スペース(空白)が入っていたというのだ。

もしかしたら、ここにも全角スペースが紛れ込んで
いるのかも…?
という疑惑浮上。

空白部分に全角スペースが入っているか、半角スペース
が入っているか、ちょっと見には全くわからない。
そこで、上のCSSを TeraPadで表示したものをお見せ
しよう。
(TeraPad(テラパッド)は、半角・全角スペースがきっちり
 表示できる、スグレモノのフリーのテキストエディタだ。)

全角スペース入っちゃってます!

ああ、やっぱり~!
全角スペース()が1個紛れ込んでた…。
そしてこれを削除したら、Firefoxでも、IEと同じように、広
い行間で表示されるようになった。
Firefoxが悪いのではなく、CSSが正確に書かれていなか
ったことが原因だったのだ。
(しかし、問題なく表示しちゃうIEも鷹揚だな…笑)

これはたまたま行間の指示の例だけれど、IEとFirefox
で原因不明の表示の違いがあって悩んでおられる方は、
一度、全角スペース探しをやってみるのもいいのではない
かと思う。

【firefoxユーザーはブログのカラム落ちに注意】
たまに、レイアウトが崩れて、記事部分や、メニューバー
部分が、ページの下方に落ちて、いわゆる“カラム落ち
を起こしてしまっているブログを見かける。

ブログに見られるカラム落ちの例


お友達の場合は知らせてあげるのだが、ご本人は気づい
ていないことが多く、そういう方はだいたい、IE以外のブラ
ウザを使っておられる。
IEユーザーから見ると、規定の横幅サイズを超えた写
真や文字列を使って、ワクに収まりきれなくなっているの
がわかるのだが、ご本人のブラウザから見ると、ちゃんと
ワク内に収まって見えるようなのだ。
何でこういう違いが起こるのか、かねがね不思議に思って
いたのだが、これもafiliateさんの記事で納得した。
今日はafiliateさんのお世話になりっぱなしなので、つい
でに画像もそのままお借りして説明させて頂く。

CSSで、「width: 250px;」と同じように指定しても、
border(枠線)幅が10pxだった場合、こんなに表示に差が
出るという。 “width”の数字を、内寸と見なすか、外寸と
見なすかの違いである。
(詳しくはafiliateさんの「IEとFirefoxの表示の差」の記事
 へどうぞ。)

IEとfirefoxの幅計測の違い


つまり、最初からFirefoxでの表示に合わせて横幅一杯
に作ってしまうと、IEでは表示しきれずに、カラム落ちが
起こる可能性があると考えられるのだ。


【わからなかったこと】
表示の違いに気づいたが、自分では原因も対策もわか
らなかったこともあった。
それは、私のホームページ(本館)内の「リンク集」の
ページの背景。 私としては、背景画像は固定したまま、
文字だけがスクロールされるようにしてあるつもりなの
だが、今回Firefoxで見てみたら、背景も文字と一緒に
動き、画像が繰り返し表示されていた…。

body, {
line-height:120%;
background-position:left;
background-attachment:fixed;
background-image:url(sozai/sky_in_1280-800.jpg);
background-repeat:no-repeat;
}

というCSSの指定だけではダメなのだろうか?
もし、対策をご存じの方がいたら、教えて頂ければ幸いで
ある。


《追記》
afiliateさんに早速助言を頂き、最後の問題が解決した。
body, {  の部分から、コンマと半角スペースを除いて
body{   としたら、Firefoxでも、背景が固定されるよう
になり、感激!!
全角スペースだけが悪さをするわけではないことが、
これでわかり、勉強になった。
Firefoxって、本当にデリケート!

お忙しいのに、すぐにご自身のサーバーでの動作確認
までして下さったafiliateさんに、深く感謝申し上げる。
 
  
スポンサーサイト
この記事のURL | PCネタ・親指シフトネタ | コメント:8 | トラックバック:0 | ブログトップページへ
<<モミジの実(モミジのヘリコプター)って知ってますか? | ミセス・かんちがいのブログ日記 | IE以外のブラウザの話>>
コメント
--
どおも~ミセス・かんちがいさま。素敵にご紹介いただいて、ありがとうございます。最近あまり紹介されることも無く、さびしい秋を過ごしておりましたので(笑)、こんなにたくさん記事をご紹介いただいて、感激です。

ところで、Firefoxでの背景が固定しないとの事ですが、

body, {

body{

にしてみてください。
それから、各行の最後にスペースが入っていないか確認してみてください。
手持ちのレンタルサーバーにアップロードして確認しましたが、Firefoxでも背景は固定されましたよ~。
ではでは~。
2007-10-10 Wed 23:24 | URL | afiliate #-[ 内容変更]
-感激です! ありがとうございましたっ!!-
afiliateさん
さすが、afiliateさん!
すぐに問題点を見抜かれたのですね。
わざわざ、サーバーにアップロードして確認して下さ
ったとのこと、本当に恐縮です。
ご指摘の通りにやってみましたら、あっさり正常に
表示されました。
何だか自分の知識のなさが恥ずかしいですが、とても
助かりました。結構苦労して作ったページなので
(とは言ってもホームページビルダー頼みなのですが)
ちゃんと表示されて、すごく嬉しかったです。
本当にありがとうございました。

afiliateさんのことは、とても勉強熱心な方だと尊敬
しています。ユーモラスな文章にも、いつも親しみを
感じております。(私みたいな、ド素人のオバサンに
慕われてもご迷惑でしょうけど…(^^;)

afiliateさんを見習って、私も頑張ります。
師匠! 今後とも、よろしくご指導願います♪

※追伸
「IEとFirefoxの表示の差」の記事の方へ、
トラックバックを改めて送りました。
昨日送ったトラックバックは、消して頂いても
(もちろんそのままでも)構いません。
いろいろとお心遣いを頂き、感謝です(^_^)
2007-10-11 Thu 00:18 | URL | ミセス・かんちがい #bhhZubZs[ 内容変更]
-たしかに!?-
わがHPでは、TITLE 優先で使っています。
ALTは殆ど予備扱い。
ブラウザによってALT記述がマウスオーバーで表示されると
うるさいので、書かない場合も多いです。

構文は、ちょっとした気づかぬミスで表示されない事があるから
ミスを捜すのが結構手間で、イライラさせられることがありますね。
ブラウザによっても、表示がまちまちな構文や、表示されないのもあるし・・・
同じブラウザでも、バージョンによって、同じく読めないものもありますし。

ちなみに、Mac Safariも、だいたいFirefoxと同じ様な感じに
表示されます。 文字間の記述なども効かないのもありますね。
でも、ネスケが一番云うこと聞かない気がします。

結局は、単純な構文が一番だなっ、って思いますが
それだけだと機能が制限されてつまらないしなぁ~・・・

iCabと云うブラウザは便利で、見ているページのソースを表示させると
赤い文字で、間違っている箇所を指摘してくれるのが便利です。
分かっていて、書いているのと、気が付かないのとでは随分さが出ますし
念のため自身のHPも、新しいのを書いたら、確認用に利用しています。

HP、FONTの違いでも、レイアウトが変わるので、これまたやっかい
ユーザーによっては、カスタマイズしている人もいるし、モニター
解像度によっても見やすいサイズが違うし・・・・小生はFONT指定を
行わず、そのユーザーに合わせて、+1とか-1とかで大きさを指定してます。

ブラウザ、みんな同じ様に読んでくれるといいのにねぇ~・・・。


2007-10-11 Thu 09:39 | URL | koba2106 #M2laTCY6[ 内容変更]
-なるほど…-
koba2106さん
ALT属性は予備扱いって考え方もありますね。
私などは、あちこちのブログを見て回る時、わざわざ
画像にポインタ当ててチェックしてますけどね~。
管理人さんによっては、ALT属性で表示される
コメントが面白かったりもするので…^^

iCabというブラウザ、ソース表示させると間違いを
指摘してくれる、というのは便利でいいなあ!…と
思ったのですが、Firefox(最新・Win版)でも、
その機能はあるようですよ。
私が自分のサイトの「頂き物ギャラリー」のページ
のソースをFirefoxで見たら、間違いが赤い太字に
なっていて、すぐに直すことができました。
半角・全角スペースは表示されないのですけどね…。

ホームページビルダーなども、間違ったHTMLを
勝手に修正してくれるのだけど、直してくれても、
どうも、IEにしかうまく対応していないようです。

追伸…ホテイアオイの写真、キレイですね。
まだまだあるのでしょうね。楽しみにしてます!
2007-10-12 Fri 18:28 | URL | ミセス・かんちがい #bhhZubZs[ 内容変更]
-なるほど-

そうかぁ~、Altの使い方、そういうのもあるんですね
ただし、ブラウザによって表示されないから
TITLEにしておきます。 でも、あんまりピョコ ピョコ出てくるのもなぁ~・・

Firefox、間違い指摘ソース表示知らなかった!
と、いうより、動作確認やSafariの予備扱いだったので
あまり探求していませんでした。
ボタンとかのインターフェースがいまいち、カッコ良くないもので(笑)
Macでも出来るか試してみます、ありがとう。

ホテイアオイ、只今壁紙制作中です。
2007-10-12 Fri 20:56 | URL | koba2106 #M2laTCY6[ 内容変更]
-今頃、ホテイアオイ画像と格闘中かな^^?-
koba2106さん
alt属性にしても、title属性にしても、画像に
ポインタを当てなければ文字は出て来ないので
私は邪魔に感じたことはないんですけどね。。。
普通のブログ等だと、画像もそんなに大きくないから
見るつもりがなければ見ずに済む場合の方が多いと
思います。
むしろ邪魔なのはWindowsの場合、画像左上に印刷やら
保存やらの為に出てくるアイコン…アレが邪魔っ!(笑)
右下に拡大のためのアイコンは必要だと思いますが…。

title属性はまだ使い始めたばかりなのでわかりませ
んが、alt属性は検索の対象になるのはやっぱり魅力
ですよ。本文中に書かず、alt属性にだけ書いた言葉
で検索されたこと、随分あります。

Firefoxのアイコンボタンのデザインは確かにイマイチ
ですね~(笑)。
模様替えもいろいろできるみたいだけど、う~ん、
そこまでカスタマイズせんでも…という感じだし…。
Safariは、きっとスマートなんでしょうね♪

ホテイアオイの花、れんげそうさんの所で見ました
けど、ちょっと「シャガ」の花に似てますね~。
あんな花が咲くなんて、全然知らなかったわ^^
2007-10-14 Sun 21:43 | URL | ミセス・かんちがい #bhhZubZs[ 内容変更]
-確かに-

ALTは確かに検索対象になるから良いですね
TITLEはどうなのかなぁ???
これは、単純に吹き出しだけかもねぇ???
肝心な所だけはALT書いていますが
面倒なので全ては書いてませ~ん・・・・笑

2007-10-15 Mon 01:26 | URL | koba2106 #M2laTCY6[ 内容変更]
--
koba2106さん
ALT属性やTITLE属性をいちいち書くのは確かに面倒では
ありますね。。
私は当面、TITLE属性だけ記述してみようかと思ってます。
画像貼り付けタグはURLも含めて単語登録してますが、
title=""も含めて登録しなおしました。
何かまたわかったことがあったら、お知らせしますね^^
2007-10-16 Tue 15:06 | URL | ミセス・かんちがい #bhhZubZs[ 内容変更]
コメントの投稿














管理者だけに閲覧

トラックバック
トラックバックURL

FC2ブログユーザー専用トラックバックURLはこちら
| ミセス・かんちがいのブログ日記 |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。