うーん・・・

スマホからPCサイトを見られる際の文字化け対策htmlについて

解決済

質問者：utakou
質問日時：2016/05/20 00:53
回答数：4件

パソコン向けにhtml手打ちでサイトを作成しているものです。ちなみに作成は10年以上前に基盤を作ったもので、そこから根本的なhtmlはいじっていません。
PC向けに作っていたので、スマホから閲覧するとどのように見えるかまで気が廻っていなかったのですが、先日メールフォームを経由してOutlookに文字化けしたメッセージが届きました。その「&」「#」と数字の羅列で書かれたメッセージは、スマホで見てもPCで見ても読めませんでしたが、スマホでコピぺ→グーグル検索にかけてみたところ、検索ボックスの中で日本語となり読むことができました。まずここまで、どうしてそのような事態になったのかがわかりません。
メッセージの内容としては「トップから文字化けしていて読むことができません」というものでした。色々検索して、見て下さっている方と当方のサイトの文字コードが違うのか、というところまではたどり着いたのですが、どう対処すれば閲覧してもらえるようになるかがわかりません。また、トップページ以外のページも1ページごとにhtml手打ち→FFFTPでアップロードをしているため、全ページ一斉にhtmlの書き換えを行うことはほぼ不可能です。
サイト運営者としてはこちら側でなんとかできるならしたいのですが、対処方法はありますでしょうか。
ちなみに当方のPCの環境はWindows7、IEで、スマホはアンドロイド、グーグルクロームです。
文字コードを指定していると思しきhtmlは「<STYLE type="text/css">」でした。

どうぞよろしくお願い致します。

現在使用しているテキストファイルはWindowsに標準搭載されているメモ帳です。メモ帳にhtmlを打ち込んだのち、.txtを.htmlにして保存していましたが、エンコード確認をしたところ、「ANSI」のまま保存していました。これがスマホから当サイトを見られない原因でしょうか？
自分のPCではと確認すると、IEで閲覧していますが「Shift_JIS」を選択していたようです。この時点で既に差異が生じていますが、自分のPCで自分の作成したHPを見ても文字化けすることはありません。ここからの対策として考えられるのは、mai3456さんが教えて下さったサイトで指定されていた（続く）

補足日時：2016/05/20 10:09
通報する
「body {
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳＰゴシック", sans-serif;
}」を全ページに埋め込むか、それとも現在アップしている「ANSI」をすべて「utf-8」に保存しなおしてFFFTPでアップしなおす…という作業が必要になりますか？
ページ数が数百を超えているため、ひとつひとつソースを保存しなおしてのアップとなると途方もない作業に感じるのですが、この方法以外にありますでしょうか？
またtakaya.Aさんの助言のBOM確認もしたのですが、自分の作ったものではありますが、ページによって冒頭に（続く）

補足日時：2016/05/20 10:18
通報する
「<meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">」が挿入されている場合と挿入されていない場合がありました。挿入されていない＝指定されていない、ということでしょうか。この場合は前述の「body～」以下を挿入すれば解決するのか、同時にutf-8への変更も必要になるのか…
基盤を10年以上前に作ったままだましだまし更新していたので、ここにきてガタが出てきてしまったようです。お手数をおかけしますが、ご助言お願いします。

補足日時：2016/05/20 10:21
通報する
ご回答ありがとうございます！
本文に補足を付け足しましたので、ご確認いただけますでしょうか？よろしくお願い致します。

No.1の回答に寄せられた補足コメントです。補足日時：2016/05/20 10:23
通報する
ご回答ありがとうございます！
本文に補足を付け足しましたので、ご確認いただけますでしょうか？よろしくお願い致します。

No.2の回答に寄せられた補足コメントです。補足日時：2016/05/20 10:23
通報する
>・現在のHTMLは、文字コード(正確には"文字符号化方法の指定")がないが、誤っているかです。
どうやらこれにあたるようです。ご指摘の通りスタイルシートの指定しかせず、あとは都度のフォントやサイズ指定のみで文字コードはそもそも入れていませんでした。何年間も必要なタグをその都度調べて付け足して…という状態だったので、ソース自体はぐちゃぐちゃになってしまっていると思います…。文字コード指定の入れていないページの基本構造としては、添付した画像となっています。
またサイト情報としては、サーバーを借りて個人で細々と作成しているサイトです。現在使用しているテキストエディタはメモ帳で、すべて書きかえるにあたってはフリーソフトであるtss521を使用しようと考えていました。
また教えて頂いた文字コードを挿入するとすると、スタイルシートの前の部分に入れる形でよろしいでしょうか？

No.3の回答に寄せられた補足コメントです。補足日時：2016/05/20 11:00
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2016/05/20 10:28

＞文字コードを指定していると思しきhtmlは「<STYLE type="text/css">」でした。

　それは、スタイルシートを指定しているところで関係ないです。

＞html手打ちでサイトを作成
　HTMLと大文字でなければなりませんが・・

理由は簡単、ひとことでいうと「文字コードの不適合」です。

情報が少ないので、あくまで推測ですが、
・現在のHTMLは、文字コード(正確には"文字符号化方法の指定")がないが、誤っているかです。

該当のHTMLにDocTypeがないと、UTF8として判断されます。
HTML4.01 strictの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01移行型の場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5の場合はDTDを使いませんので
<!doctype html>

それに引き続いて、文字コード
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
　 Shift_JISの場合は、charset=Shift_JIS、JISの場合は、charset=iso-2022-jpになる。

　がありますか？？

　HTTPサーバーは、本来はHTMLのmetaを読んで応答ヘッダに、charsetを含めるのですが、現行の多くのサーバーはデフォルトのISO-8859-1とかを送ります。
　Live HTTP Headers( https://addons.mozilla.org/ja/firefox/addon/live … )で確認できる

　次いで、ブラウザはHTMLの<head></head>内のcharsetを参考にします。(上記)

　それがない場合は、HTML5以外は、文字コードを何とか判別しようとします。(以前のIEはShift_JISとか)それがない場合は判断できません。
　HTML5の場合はUTF-8がデフォルト

W3CのUnicorn( https://validator.w3.org/unicorn/?ucn_lang=ja )や、Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でも確認できる。（フォームからは判別できない）
　Html Validator( https://addons.mozilla.org/ja/firefox/addon/html … )
　ならローカルで可能かも。
　
もし上記に適合するなら
・すべて書き換える。
　手打ちなら、テキストエディタ使われているはずなので、それを使って一括変換すれば数秒で終わる。
　例えば、EmEditor(有償ですが１か月は試用できる)だと、
[検索] → [ファイルから置換]　で
<html [^>]*>
↓
\1\n<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">\n
で一瞬で済む。(「正規表現を使用する」と「大文字小文字を区別しない」をチェック)

・サーバーの.htaccessファイルに文字コードを加える。
AddType "text/html; charset=Shift_JIS" .html
　これで、拡張子がhtmlの場合、応答ヘッダに
Content-type:text/html; cherset=Shift_JIS
　が追記される。
　☆この場合、他に異なる文字コードのHTMLがあると

AddType "text/html; charset=UTF-8" abc.html
も併記しなければならなくなる。

　対策は簡単です。HTMLをキーボードから直接かけるくらいなら・・

　なお、ウェブ開発ならFirebug( https://addons.mozilla.org/ja/firefox/addon/fire … )のような開発ツール( https://addons.mozilla.org/ja/firefox/extensions … )の豊富なfirefoxをお使いだと思いますが、それを使わなくっちゃ宝の持ち腐れ。

- 0
- 件

通報する

この回答へのお礼

具体的なご意見をありがとうございました！大変参考になりました！

通報する

お礼日時：2016/05/21 00:17

No.4

回答者： ORUKA1951
回答日時：2016/05/20 13:28

★文字コードと、フォントは一切関係ありません。

(^^)

　あくまで文字コードの問題でフォントの問題ではない!!!

＞「<meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">」が挿入されている場合と挿入されていない場合がありました。挿入されていない＝指定されていない、ということでしょうか。

　必ず本文と同じ文字コードを指定する。

＞現在使用しているテキストエディタはメモ帳で、
　これは絶対に高機能なテキストエディタが必要。保存してあるすべてのHTML内の一部を、ファイルを開かずにすべて書き換えることなんて通常のものではできませんからね。
　EmEditor( https://jp.emeditor.com/ )は高価ですが価格以上ですね。私は登場当時のfreeの時代からの付き合いで、永久ライセンスは2000円弱だった。
　一か月試用できますし、３か月以内なら返金もあるので、結果的に三か月ただで使える。

＞また教えて頂いた文字コードを挿入するとすると、スタイルシートの前の部分に入れる形でよろしいでしょうか？
　できるだけ最初、<title>など日本語が登場するより前に入れる。

＞文字コード指定の入れていないページの基本構造としては、添付した画像となっています。
　そもそも、doctype宣言がない。(^^)

HTML 4.01仕様は、3つのDTDを規定しており、著者は自分の文書に、次の3つの何れかの文書型宣言を含めねばならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　テキストエディタで作成する人は、必ず最初に仕様書を理解してから始めます。そうしないと非効率。