質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
UTF-8

UTF-8は8ビット符号単位の文字符号化形式及び文字符号化スキームです。データ交換方式、ファイル形式としては、一般的にUTF-8が使われる傾向があります。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

624閲覧

文字コードをしているにもかかわらずhtmlが文字化けする

ypk

総合スコア83

UTF-8

UTF-8は8ビット符号単位の文字符号化形式及び文字符号化スキームです。データ交換方式、ファイル形式としては、一般的にUTF-8が使われる傾向があります。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/06/26 03:08

初めまして。現在htmlの勉強をしているものです。

ソースのように、UTF-8で文字コードを指定しているにもかかわらず、写真のように文字化けを起こしてしまいます。

イメージ説明

Eclipseを用いています。どうしてこうなっているのか、何が原因なのかわかる方ご指摘いただけると嬉しいです、どうぞよろしくお願いいたします。

html

1<html> 2 <head> 3 <meta http-equiv="content-type" charset="UTF-8"> 4 <title>書籍管理システム-<ログイン></title> 5 <link rel="stylesheet" href="bookAd.css"> 6 </head> 7<div class="container"> 8 <header> 9<div class="header"> 10 11<div class="header_logo_font"> 12<p>書籍管理システムログイン</p> 13</div> 14</div> 15<hr> 16</header> 17 <body> 18 <div class="body"> 19 <div class="content"> 20 <div align="center"> 21 <table border="0"> 22 <form action="list.html" method="get"> 23 <div class="break"> 24 <font class="center" color="#fff">空欄作成のために使用。画面に映りません。</font> 25 </div> 26 <div class="break"> 27 <font color="#fff">空欄作成のために使用。画面に映りません。</font> 28 </div> 29 <center> 30 <b><br><font class="center" color="#ff0000">エラーメッセージエリア</font></b><br> 31 </center> 32 <div class="break"> 33 <font class="center" color="#fff">空欄作成のために使用。画面に映りません。</font> 34 </div> 35 <p>ユーザーID 36 <input class="center" type="text" name="user_id" value="" size="24"> 37 <p>パスワード 38 <input class="center" type="password" name="password" value="" size="24"> 39 <br><br> 40 <input class="login" type="submit" name="login" value="ログイン"></div> 41 </form> 42 </table> 43 </div> 44 </div> 45 </div> 46 </body> 47 48</div> 49</html>

css

1@charset "UTF-8"; 2.header{ 3 top:0; 4 left:0; 5 float:left; 6 position:fixed; 7 height:100px; 8 width:100%; 9 background-color:#808080; 10 padding:10px; 11} 12.header_logo{ 13 float:left 14} 15.header-logo{ 16 padding-top:10px; 17} 18.header_logo_font{ 19 color:white; 20} 21.center{ 22 align:center; 23} 24.login{ 25 float:left; 26 margin-left:625px; 27} 28li{ 29 padding:30px; 30 list-style:none; 31 float:left; 32} 33footer{ 34width: 100%; 35position: absolute; 36bottom: 0; 37} 38.break{ 39 line-height:40px; 40} 41

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ファイルの実際の文字エンコーディングが、UTF-8以外になっているのでしょう。

投稿2020/06/26 03:12

otn

総合スコア85901

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

InNELV

2020/06/26 03:48

付け足しです。 HTMLファイルを、エンコーディングを表示可能なテキストエディタ(Sakura等)で確認してみて下さい。 Shift_JISあたりになっているのでは?
ypk

2020/06/26 04:23

お疲れ様です。 ご回答ありがとうございます。 ファイルのエンコーディングを確認したところ、確かにUTF-8ではなかった模様です。 そこで、メモ帳を用いて文字エンコーディングをUTF-8に変換をして再度実行をかけてみたのですがやはり文字化けをしてしまいます、、、、 このような場合、どのように対応するべきかご教授いただければ幸いです。 どうぞよろしくお願い致します。
otn

2020/06/26 04:28

・実はまだUTF-8になっていない ・他の部分も書き換えてしまった(ockeghemさん指摘の書き換えだけであれば良いです) とかでしょうか。
ypk

2020/06/26 04:36

UTFに変換したつもりなのですが、、、、書き換えもしていません、、、、otnさんは文字化けせず表示させることができていますか?
otn

2020/06/26 04:49

質問のコードをコピペで、Firefox/Chrome/MS Edgeで表示させて問題ありません。 あとは、可能性としてはhttpサーバー側でContent-Typeヘッダで異なるcharsetを指定しているとか。この場合は、HTML中のmetaタグでの指定が無視されます。
ypk

2020/06/26 05:16

>可能性としてはhttpサーバー側でContent-Typeヘッダで異なるcharsetを指定しているとか。この場合は、HTML中のmetaタグでの指定が無視されます。 これについて、もう少し詳しく教えていただくことは可能でしょうか?
otn

2020/06/26 05:23

例えば、Apacheだと、設定ファイルで AddDefaultCharset Latin1 と書いてあるとか。。。。あー、化け方からすると、これですね。 レンタルサーバーならそんな設定にしてあることは無いと思いますので、 自分でセットアップしたサーバーなのでしょうか?
ypk

2020/06/26 05:43

そうですね、、、、自分でセットアップしました。 一応、どうやら問題のあったjspファイルは文字化けを起こしていたこれだけだったので、削除をして新規でjspファイルを作成し、そちらにソースをコピペしたら文字化けがなくなりました、、、、、
otn

2020/06/26 05:52

ということは、原因は AddDefaultCharset Latin1 じゃなくて、ファイルの文字コードがUTF-8で無かったと言うことですかね。
ypk

2020/06/26 06:04

そうかもしれませんね、、、、長いことありがとうございました。 また機会があればよろしくお願いします。
otn

2020/06/26 06:08

原因を調べておかないと再発しますよ。
ypk

2020/06/26 06:41

承知いたしました。 いろいろ試行錯誤して原因を調査します、
guest

0

文字エンコーディング指定の方法が間違っています。二種類の方法があるのですが、それらが「混ざっている」感じです。

古来からある方法は下記です。後半が違っていることが判ると思います。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5では下記のように簡潔にかけます。

<meta charset="UTF-8">

しかし、両者を混ぜることはできませんので、どちらかにすべきで、後で説明したHTML5の書き方(簡潔な方)でよいと思います。

投稿2020/06/26 03:46

ockeghem

総合スコア11705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ypk

2020/06/26 04:22

ありがとうございます。 <meta charset="UTF-8"> のように記述をしたのですが、変化がありませんでした、、、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問