コーディング　文字化けします

Question

web制作の勉強を始めました。教本に沿ってタグを打ち、ブラウザ（safari）(google chrome)で確認してみると早速文字化けしてしまっていて原因がわからずこまっています。 macでテキストエディッドを使って作成しています。環境設定は「HTMLファイルを、〜HTMLコードとして表示」にチェック「保存するとき拡張子.txtを追加」のチェックを外し、エンコーディングは「UTF-8」で設定しています。そしてnews01.htmlというファイルを作成して真夏のひまわり畑ーFOREST STUDIO 真夏のひまわり畑と打ち込み、保存するときのエンコードもUTF-8と指定しました。バーに表示されるタイトルも本文も文字化けします。英字は文字化けしないのですが・・・コーディングにミスがあるのでしょうか？原因がわからなくて困っています。教えていただきたいです。

naokita · Accepted Answer

全角 “ ” を 半角 " "　に一括置き換えで変更しましょう。

HTMLでは全て半角！！　これら注意しましょう。

hitomura · Answer

自分も No.2 さんと同意見で、ダブルコーテーションが全角文字なのが原因と考えます。

しかし、No.3 さんが明らかな間違いを発言されているので訂正いたします。

> なお、この現象には無関係ですが
> <body>
> 真夏のひまわり畑
> </body>
> は、明らかな間違いです。
いいえ、この文は間違いではありません。確かに
> HTMLの要素には、それぞれ内包できる要素が決められています。
のですが、
> body要素に、直接行内要素は、入りません。
という勘違いをなさっています。

この文書は HTML5 で書かれているため body 要素に直接入れられるものはフローコンテンツです。そして、フローコンテンツにはテキストが含まれています。
（参考URL）
・The body element - W3C
http://www.w3.org/TR/html5/sections.html#the-bod …
・Flow content - W3C
http://www.w3.org/TR/html5/dom.html#flow-content-1

ちなみに No.3 さんがご呈示の Another HTML Lint に質問者様がご呈示の HTML の引用符を修正しただけのものを判定させてみたところ 100 点満点でした。

ORUKA1951 · Answer

いくつか基本的なことで申し訳ない。ご存知でしたらスルーしてください。 DOCTYPEが、の場合は、すべてのブラウザはHTML5として描画します。ここで、と書かれていたら、サーバーの設定にかかわらず、ブラウザはutf-8として処理します。　もちろん、その階層以下のHTMLをすべてutf-8で統一するなら、.htaccessファイルで、 AddType html; charset=UTF-8; 　と指定しておけばよい。文字化け対策としての.htaccess( http://www.shtml.jp/htaccess/mojibake.html ) 　それで、文字化けするのでしたら、そのHTMLファイルがutf-8以外で保存されている。　使用されているテキストエディタがわかりませんが、保存時に文字コードが指定できるはずです。なお、この現象には無関係ですが真夏のひまわり畑は、明らかな間違いです。その教本はクソですよ。　body要素に、直接行内要素は、入りません。HTMLの要素には、それぞれ内包できる要素が決められています。とても重要なことで、それを間違うと表示が変わったりしますよ。

真夏のひまわり畑

Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　アップロード前なら右上のDATAを選択して試す。--文字コードのチェックできない。　アップロード後でしたら、URLで・・文字コードも判別してくれる。真夏のひまわり畑ーFOREST STUDIO 　

真夏のひまわり畑ーFOREST STUDIO

真夏のひまわり畑

ひまわりは、夏のイメージの・・

ColdTemper · Answer

別に化けませんよ。ブラウザのエンコード設定がUTF-8あるいは自動検出になっていないから化けてるのでは？一度下記URLを参考に見直してみよう。

https://support.google.com/chrome/answer/95290?hl=ja

文字コードは、そのHTMLファイルをアップロードするサーバーによって決められるものなので注意。
あと、タイトルのところの「ー」が音引き記号（あーとかの音を延ばす記号）になっていますよ。そういう使い方をする場所では無いですね？ダッシュ記号やハイフンなどを使うようにしないと見栄えが悪いです。慣れたらテキストエディットでもいいですが、制作の勉強というのであれば、できればちゃんとHTMLエディタを使いながらやりましょう。

コーディング 文字化けします

全角 “ ” を 半角 " " に一括置き換えで変更しましょう。

自分も No.2 さんと同意見で、ダブルコーテーションが全角文字なのが原因と考えます。

いくつか基本的なことで申し訳ない。

別に化けませんよ。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

コーディング　文字化けします

全角 “ ” を半角 " "　に一括置き換えで変更しましょう。