文字化け＊日本語の場合のみ

解決したいこと
ブラウザで日本語が文字化けしないようにして正常に閲覧できる状態にしたい。

問題と試したこと

html内で記述した日本語だけがブラウザで文字化けする。CSSはちゃんと適応される。
IE、FireFox、GoogleChrome(どれも最新版)で表示しても文字化けする。
日本語の個所を英語(ローマ字)で記述すると正常に閲覧できる。
ATOMで書いたものをメモ帳やTeraPadにコピペ保存したり、その逆もやってみた。

ファイルの保存形式はUTF-8　→　BOMあり、なしを両方試したが解決できない。
BOMあり→日本語の文字化けは直らないがCSSは適応されている。
BOMなし→日本語の文字化けは直るがCSSが失われる。

.htaccessの文字化けの記事も読んだが、この問題とはあまり関係ないように思った。
CSS内のfont-familyのフォントもいろいろなものに変えてみたが解決できない。

html

<!DOCTYPE html>
<html lang ="ja">

<head>
  <meta charset="utf-8">
  <title>WCB Cafe</title>
  <meta name="description" content="猫カフェ">

  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link href="https://fonts.googleapis.com/css?family=philosopher" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

</head>

<body>
  <header class="page-header wrapper">
    <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
    <nav>
      <ul class="main-nav">
        <li><a href="news.html">News</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="contact.html">contact</a></li>
      </ul>
    </nav>

  </header>

  <div class="home-content wrapper">
    <h2 class="page-title">We'll Make Your Day</h2>
    <p>テキストテキストテキストテキスト</p>
    <a class="button" href="menu.html">メニューを見る</a>
  </div><!--home content-->
</body>
</html>

CSS

@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
  font-size: 100%;
}
body{
  font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体","メイリオ", "ヒラギノ角ゴ Pro W3";
  line-height: 1.7;
  color: #432;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

/* HEADER
----------------------*/
.logo {
  width: 210px;
  margin-top: 14px;
  }

  .main-nav {
    display: -webkit-flex;
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
  }
  .main-nav li {
    margin-left: 36px;
  }
  .main-nav a {
    color: #432;
  }
  .main-nav a:hover {
    color: #0bd;
    }
    .page-header {
      display: -webkit-flex;
      display: flex;
      justify-content: space-between;
    }
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

y_waiwai

2019/08/26 13:03

その文字化けしているスクリーンショットは提示できるでしょうか

akatsuki

2019/08/26 13:56

スクショを貼りました。

x_x

2019/08/27 01:05

サーバーにFTPソフトで転送して確認しているのでしょうか？ローカルでも文字化けしますか？

akatsuki

2019/08/27 03:35

サーバーに転送しての確認ではなく、すべてローカルでの確認で文字化けが起こっています。

yoshinavi

2019/08/28 01:58

「ATOM」「TeraPad」共に持っていないので推測ですが、テキストエディターによっては、新規作成時と保存時に、違う文字コードだと、文字化けするのもあります。（設定で新規作成がSHIFT-JISの場合に、保存がUTF-8、等）設定の確認のうえ、「UTF-8」で作成・保存してみてください。

akatsuki

2019/08/28 12:38

TeraPad にて新規作成時も保存時もUTF-8Nで書きましたが、やはり文字化けは解決されておりません。

yoshinavi

2019/08/28 13:49

Shift-JISで設定してみても文字化けしますか？

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

回答4件

手元の環境でSHIFT-JISで保存した場合、同じ形で文字化けしました。
なので、TeraPadなら「ファイル＞文字/改行コード指定保存」から「UTF-8N」を選んで保存しなおしてください。（TeraPadは新規で開いた場合SHIFT-JISで保存されたような気がします）

投稿2019/08/26 13:45

kei344

総合スコア69400

akatsuki

2019/08/26 13:55

TeraPadのUTF-8NはBOMなしの保存形式なので →日本語の文字化けは直るがCSSが失われる。　状態になります。

kei344

2019/08/26 13:58

CSSが失われているのではなく、パスが違うだけのような気がします。デベロッパーツールで404エラーが出ていないか確認してみてください。 https://eng-entrance.com/javascript-display-error もしくは、CSSもファイルを作り直して「UTF-8N」を選んで保存してみるとか。

akatsuki

2019/08/26 14:28 編集

kei344

2019/08/26 14:30

「テキストエディタ」で文字コードを確認していますか？先ほども書きましたが、CSSもファイルを作り直して「UTF-8N」を選んで保存してみてください。

akatsuki

2019/08/26 15:10

CSSを一から作り直して保存形式もUTF-8Nで保存してみましたが、ブラウザ上での文字化けは直りませんでした。明後日くらいにhtmlの方を作り直してUTF-8Nで保存してやってみます。

akatsuki

2019/08/28 13:47

htmlを一からUTF-8Nで作り、保存形式もUTF-8Nでやってみましたが、文字化けは相変わらずですね。。。

kei344