りんご大好き

りんご大好きです♪  Macintosh が大好きなのですが、何故か Mozilla の Firefox や Thunderbird を愛用しています(^^ゞ。


MacBook Pro(Mid2007) の購入が切っ掛けで、AppleのiWebを使用し『りんご大好き』と云うBlogを 2007年に立上げましたが、2012年6月のAppleのMobileMe (iWeb)サービス終了と供に御無沙汰していました^_^;


2013年から復活しましたので、また宜しくお願い致しますね。

2017年05月 ≪  123456789101112131415161718192021222324252627282930 ≫ 2017年07月
TOPWeb ≫ IE で 当BlogのCSSが全く適用されなかった件など

IE で 当BlogのCSSが全く適用されなかった件など

どーも、Ryoです♪

先日、某所に伺った際に、 Windows (Windows 7, Internet Explorer 9 (以下 IE9) )で ふと 自分のBlogを見たら、スタイルシート(CSS)が全く適用されておらず、レイアウトも色の指定もされておらず、単に文章が表示されているだけでした。 Σ( ̄□ ̄; ) ガーン

自分はWindows環境は無く、Mac環境だけなのですが、FirefoxやSafariやOperaでは表示を一応確認していました。
それに、以前のAppleのiWebで細々と行っていた頃と違い、FC2と云うBlogサービスを利用していたので、楽観していた事も有りますが^_^;。

FC2のBlogサービスも?、テンプレートを選ぶ時点で、自ずと テンプレートに即した ベースとなる HTML/CSS は出来る訳ですが、当初は何が原因か検討も付きませんでした。 只、IE9を開発者モードにしてIE7標準の表示からIE8の表示にすればCSSが適用されましたので、ちょっとしたところでダメになっている気がしたのです。

テンプレートは、気に入ったモノを選らんでいた訳ですが、 テンプレート の HTML/CSS は カスタマイズしていたので、何処に起因しているのか、 トホホ状態でした。

1)Windows環境が無い状態で、どの様に確認するか?
Sauce.app と云う、Mac OS X上でWindowsのIE6/7/8/9/10等、様々なWebブラウザの確認が可能な無料アプリを発見。
20130328-1036am.png 20130328-1044am.png
早速、Mac App Store からダウンロードして試用。
表示の確認は出来る様だけど、MacBook Air (Mid2011) 13" Core i7 でも、動作が重く 通常にWebブラウジングは出来ない状態。まぁ、仕方無いか.....。取りあえず表示確認出来るレベル。

2)Web で IE のみの表示不具合の場合の条件を探してみた
まぁ、色々なケースが有るらしいが判らなかったです。HTMLの「DOCTYPE宣言」あたりに原因が有るかと当初思ったのですが。

3)HTML/CSS の何れかに起因か調べてみた。
デフォルトのテンプレートを再度適用したら問題有りませんでした。改めて、HTML/CSS の何れかに起因か有るか HTML/CSS のデータを 相互にデフォルトのモノと差し替えて確認。
結果は、CSS側に起因していました。 てっきり HTML側に起因しているかと思っていたのでチョット意外。

CSSの場合の、意外な記事も発見。
インターネットエクスプローラーでcssが表示されない意外な原因
コメント用の「/*」「*/」の前後に半角スペースが入っていないとダメだとか。改めて自分のBlogのCSSを見てみると ダメじゃん!
早速、修正。 これで バッチリかと思いきや、修正効果は無し。 ガ━━Σ(゚Д゚ ;)━━ン!

4)CSSのデータ自体を検証してみる事に。
発見したWebサイトは CSS Validation Service です。
URL指定や 直接入力して CSSデータを検証出来ます。

因みに、HTMLの検証が可能なサイトは以下を発見。
Another HTML-lint gateway

で、上記サイトを利用して CSSの検証を行ってみたのですが、エラーが多過ぎ&エラー内容が素人の自分にはイマイチ判らないので最初から目視確認?していく事に。

そしたら、最初の設定で、いきなり あれ〜?? エ━━ヾ(*>△<*)ノ━━ッ!?
/* ****************************************** ▼ 基本設定 ▼ */

* {
margin:0;
padding:0;
font-family:ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;

font-family 設定の冒頭で『'』が無い!!

フォント名で指定する場合は、フォント名が日本語のモノや 間にスペースが入っているモノ(’Times New Roman’等)は引用符(”や’)で囲う。しかし、 sans-selifとか総称ファミリー名は引用符で囲ってはダメ、との事。

と、云う事で記述が間違っていました。 fontの設定はデフォルトから変えてみたんですよ。ホントに^_^;。
何はともあれ、早速修正し、例の Sauce.app を使い IE9 での表示を確認しました。
結果は、無事にCSSが適用されて OK!となりました。 \(^o^)/ヤッター!
一応、実機確認は @blog_han さん らに御協力頂きました。感謝。
しかし、チョットしたミスで IEではCSSが適用されなくなったんですね。 Mac環境のWebブラウザですが、FirefoxやSafariやOpera等では 表面上は問題無く表示してくれたのですが、どっちが良いのかは微妙ですね^_^;

ところで、皆さんは、フォントは 何を指定されていますか?
関連記事
スポンサーサイト



Comment













非公開コメントにする

Trackback

Trackback URL