"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Google Chromeでiframe内表示ページのCSSが読み込まれない原因と対処法(備忘)

今回は、メモ帳で作業して保存したHTML・CSSファイルが、IE11だと普通に表示されたのに、Google Chromeではレイアウトが崩れた(CSSが読み込まれなかった)という問題を調査対応したときの備忘録です。

f:id:arakan_no_boku:20190301193447j:plain

 

対象は普通の静的HTMLページ

 

対象は普通の静的HTMLのシンプルなページです。 

イメージとしては、こんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width"></meta>
<link rel="stylesheet" href="css/my-styles.css"></link>
<title>タイトル</title>
<meta name="description" content="ここに機能の説明を書く"></meta>
</head>
<body>
	<div class="out-f">
		<div class="inside-f">
			<div id="top" class="box">
				<img src="images/back_s.jpg" alt="画像" />
			</div>
			<br /> 
			<div class="line">
				<h2>テキスト</h2>
			</div>
		</div>
	</div>
</body>
</html>

 

まあ、実際にはCSSで多少凝ったことはしていて、見出しにする文字に下線を引いたり、背景色を薄い青にしたりとかはやってますが、なんの変哲もないとしか言いようがないものです。 

 

やろうとしたことと現象

 

これを直接ではなく、<iframe>内に表示する。 

ただ、それだけのものです。 

WEBサーバーはLinuxにNginxで、ほぼデフォルトのままと聞いてます。 

問題のおきる余地もなさげなのですが・・。 

IEInternet Explorer)11 で表示させたら、色も罫線もつくのに、Chromeで表示させると、背景も真っ白になって、レイアウトもぐちゃぐちゃになります。 

まったく、CSSの設定がきいてない感じなので、念の為にデベロッパーツールで見てみると「Chromeで表示させた時には、CSS自体が読み込まれていない」状態になっていました。

 

問題の直接原因はHTMLファイルの文字コード

 

結局、CSSかHTMLの文法にには何の問題もなく、原因はHTMLファイルの文字コードでした。 

誰かが保存するときに間違えたか、一括コンバート時に間違えたのでしょう。 

エディタ等でみれば、まったくおかしなところはありません。

f:id:arakan_no_boku:20180323222804j:plain

でも、ダンプで見れば一目瞭然です。 

こちらがChromeCSSが読み込まれなかった方。

f:id:arakan_no_boku:20180323222832j:plain

 

こちらが正しく表示できる方です。

f:id:arakan_no_boku:20180323223325j:plain

 つまり、うまくいかない方は、UTF-16で保存されていた・・という落ちです。 

なので、ファイルをUTF-8で保存しなおしたら、解決しました。 

わかってしまえば、なんてことはありません。 

でも、HTMLがUTF-16で保存されていると、IEInternet Explorer)だと普通に処理されるが、ChromeだとCSSすら読み込まれず(CSSUTF-8だからかもしれないですが)表示がむちゃくちゃになる・・というのは、知りませんでした。

いろいろありますね。

 

ついでにメモ帳の文字コード表現の件の愚痴

 

今回、どうも原因になったらしいのが、メモ帳で名前をつけ保存するときの、unicodeという選択肢です。

f:id:arakan_no_boku:20180323225117j:plain

作業したのは自分ではなくて、他の人だったので、また聞きですけども「文字コードはSJSじゃなくてユニコードだからね・・」と言われて、unicodeで保存したぽいです。

普段からコードを意識して作業している人間にとっては、ユニコードといえばUTF-8以外の選択肢はないだろうという暗黙の了解ですが・・。 

unicodeって「文字集合」で、その符号化形式として「utf-8」以外にも「utf-16」「utf-32」なんてのがあるけれど、どれもunicodeなんだと、知らない人には通じません。 

実際に、メモ帳でunicodeを選択すると「UTF-16」の符号化形式で保存されます。 

だから、選択肢は「UTF-16」「UTF-8」ということです。 

だったら、そう書いてほしいです。 

愚痴ですけど。