ffftpでファイルをアップロードしたが、特定のページだけ文字化けが起きる。

ffftpを使ってのアップロードで、文字化けが起きる。

ffftpを使って、ロリポップのサーバを登録し、ファイルのアップロードを行ったのですがなぜかindex.htmlのページの日本語部分に限って文字化けが起きてしまっています。

ffftpのほうの設定で文字コードを変えてみたりしたのですが、そもそもファイルのアップロード自体がうまくいかなかったりしたりもしました。

ちなみにindex.htmlのページもほかのページも文字コードにはUTF-8を設定しています。

そして、クライアントソフトのほうの言語の設定は、ホストの漢字コード→無変換　　ファイル名の漢字コード→UTF-8としています。

質問内容の割には情報が少なくて申し訳ございません。回答よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>about</title>
8  <link rel="stylesheet" href="css/slick.css">
9  <link rel="stylesheet" href="css/slick-theme.css">
10  <link rel="stylesheet" href="css/main.css">
11  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12  <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">
13</head>
14<body>
15  <section id="modal">
16    <i class="fas fa-times" id="close"></i>
17    <nav>
18      <ul>
19        <li  class="active"><a href="main.html">ABOUT</a></li>
20        <li><a href="../skills/skills.html">SKILLS</a></li>
21        <li><a href="../skills/skills.html">ABOUT</a></li>
22      </ul>
23    </nav>
24  </section>
25  <header>
26    <img src="img/profile-header.jpg" alt="ヘッダー画像">
27    <h2>NAGAOKA TAKUMA</h2>
28    <i class="fas fa-bars bars" id="open"></i>
29    <nav class="header-nav">
30    <ul>
31      <div>
32      <li class="active"><a href="main.html">ABOUT</a></li>
33      </div>
34      <div>
35      <li><a href="../skills/skills.html">SKILLS</a></li>
36      </div>
37      <div>
38      <li><a href="../contact/contact.html">CONTACT</a></li>
39      </div>
40    </ul>
41    </nav>
42  </header>
43  <div class="slider">
44    <div class="slider1 slide">
45      <h1>about <br> <span>"Me"</span></h1>
46    </div>
47    <div class="slider2 slide">
48      <h1>about <br> <span>"Me"</span></h1>
49    </div>
50    <div class="slider3 slide">
51      <h1>about <br><span> "Me"</span></h1>
52    </div>
53  </div>
54  <main>
55  <img src="img/profile.jpg" alt="プロフィール画像">
56  <div class="intro fadeIn">
57</div>
58  </main>
59
60  <div class="skills">
61    <h2 class="title">skills</h2>
62    <div class="flex-container">
63    <div class="coding skill fadeIn">
64    <i class="fas fa-code" id="coding"></i>
65    <h3>コーディング</h3>
66    <p id="coding-content">デザイン通りに正確にコーディングすることはもちろんのこと、レスポンシブなWEBサイトを作ることにより、スマートフォン、PCどちらからでも見やすいWEBサイトを制作することができます。</p>
67    </div>
68    <div class="direction skill fadeIn">
69      <i class="far fa-question-circle" id="direction"></i>
70      <h3>ディレクション</h3>
71      <p id="direction-content">WEBサイトを作るうえで、ターゲットやそのお利用状況を具体的に定め、目的を明確にすることは何より大切です。丁寧なヒアリング調査により依頼者様のご希望を実現いたします。</p>
72    </div>
73    <div class="design skill fadeIn">
74      <i class="fas fa-paint-brush" id="design"></i>
75    <h3>デザイン</h3>
76    <p id="design-content">依頼者様の想定されているターゲットや、利用状況によって最適な配色、配置のWEBサイトを制作いたします。</p>
77    </div>
78  </div>
79  </div>
80  <footer>
81    <i class="fas fa-arrow-up" id="scrollTop"></i>
82    <nav class="footer-nav">
83      <ul>
84        <li class="acrive"><a href="main.html">ABOUT</a></li>
85        <li><a href="../skills/skills.html">SKILLS</a></li>
86        <li><a href="../contact/contact.html">CONTACT</a></li>
87      </ul>
88    </nav>
89
90    <p>COPYRIGHT © TAKUMA NAGAOKA</p>
91  </footer>
92  <script
93  src="https://code.jquery.com/jquery-3.4.1.min.js"
94  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
95  crossorigin="anonymous"></script>
96  <script src="js/slick.min.js"></script>
97  <script src="js/main.js"></script>
98</body>
99
100</html>
101

参考になるかはわかりませんが、コードを貼り付けておきます。

ちなみに、ブラウザですが、クロムでは画像のように文字化けしてしまい、edgeでは正常に表示されました

miyabi_pudding

2019/06/24 13:45 編集

解決につながるかはわからないですが、一応、HTMLコードもコードブックにて、質問文に記載お願いできませんか？ <code>ボタンです。

miyabi_pudding

2019/06/24 14:37 編集

コード記載、大変にありがとうございます。 HTML自体はなんの問題もないかと思います・・・。追加で、お手数ですが、正常表示されている画面と、文字化けしている画面のキャプチャ画像いただけないでしょうか？もしかしたら、文字化けの文字から、何かわかるかもしれません。また、.htaccess（サーバーの設定）側が原因になることもあるようです。 http://www.koikikukan.com/archives/2004/11/23-142537.php sageさん、y_waiwaiさんのご回答とも併せて、こちらもご覧になってみてください。また、文字化けするブラウザ名の記載もどうかお願いします。もしできれば、他のブラウザでも試してみて、大丈夫なブラウザがあれば、文字化けるブラウザ名とも併せて記載をお願いします。

m.ts10806

2019/06/25 01:45 編集

コーディングには何をお使いでしょうか。もしOS標準のメモ帳でしたら今すぐ変えてください。

行動規範の内容に同意します

回答3件

ベストアンサー

調査したところ、
どうやらGoogle Chromeだけ文字化けが起きることは、けっこう散見されているようです。

ChromeブラウザでUTF-8なのにWebページが文字化けするときの対処法 - Qiita

Chromeが文字化け？文字化けを解消する方法【PC/Android/iPhone】 | スマホアプリやiPhone/Androidスマホなどの各種デバイスの使い方・最新情報を紹介するメディアです。

Web制作時に、Google Chromeでページが文字化けした時の対処方法 | たくおのーと

※上と下の記事が古くて申し訳ございません。ですが、変わらず参考になる内容とお見受けします。

さて、なぜブラウザによって結果が違うかは、三つ目の記事に記載の通りかと思われますが、
原因に関しては、十中八九、ファイル自体の文字コードと思われます。
ファイル自体は、UTF-8か、その中でも、文字化けしてしまうものが使われてしまっている、
という状況で、アップロード時に、UTF-8に無理やり変換されてしまっていることによって、
文字化けしたHTMLファイルになってしまっているかと思います。
上記の記事には、文字コードを変換するテキストエディタの紹介をしているものもあります。
また、一番目の記事にある、
BOM無しUTF-8で保存というのも可能性があるので、
併せてご確認ください。
（または、FFFTPの設定で、BOM無しのUTF-8で変換されてしまっている可能性もある）

投稿2019/06/24 15:38

miyabi_pudding

総合スコア9555

まずは、FFFTPの転送モードをテキストではなくバイナリにして転送します
これでもなお文字化けするという場合はファイルの文字コードを確認する必要がありますね

＃メモ帳でファイルを開けば右下に文字コードでます

投稿2019/06/24 11:00

y_waiwai

総合スコア88163

htmlファイルを編集するときに使ったコードと、htmlファイルの中に記述しているコードが一致しているかを確認してください。

質問内容だとindex.htmlファイル自体の文字コードを確認してください。

例えばindex.htmlをシフトJISを使って作成しているにも関わらず、中にutf-8を使ってコーディングしていると記述しているのではありませんか?

投稿2019/06/24 10:02

sage

総合スコア1240

takuma1217

2019/06/24 10:30 編集

ファイル自体の文字コードはどうやって確認すればよいのでしょうか？重ねての質問すみません！ちなみに、ローカル環境でブラウザから確認しているときは正常に表示されています

sage

2019/06/25 05:33

私はwindowsではsakuraエディタを使っており、これでは画面下部に表示されます。 (windows環境でうまく使えるかは分かりませんが)iconvかnkf等を使ってソースを変換してみるのも1つの手です。 Edgeがどうかは分かりませんが、同じMS作成のIEはコードがいいかげんでも表示するので有名でした。