Q&A
これはブラウザに表示した場合に文字化けするということでしょうか。その場合、まずは<meta charset = "">の設定は適切か確認してみるといいかもしれないです。
テキストエディタはAtomを使っています。
macを使っています。
発生している問題・エラーメッセージ
文字化けしてしまいます。
エラーメッセージ
�醍分螟ｧ縺阪↑隕句�縺励ｒ陦ｨ遉ｺ
�堤分逶ｮ縺ｮ隕句�縺励ｒ陦ｨ遉ｺ
�鍋分逶ｮ縺ｮ隕句�縺励ｒ陦ｨ遉ｺ
�皮分逶ｮ縺ｮ隕句�縺励ｒ陦ｨ遉ｺ
�慕分逶ｮ縺ｮ隕句�縺励ｒ陦ｨ遉ｺ
�也分逶ｮ縺ｮ隕句�縺励ｒ陦ｨ遉ｺ
該当のソースコード
<h1>１番大きな見出しを表示</h1> <h2>２番目の見出しを表示</h2> <h3>３番目の見出しを表示</h3> <h4>４番目の見出しを表示</h4> <h5>５番目の見出しを表示</h5> <h6>６番目の見出しを表示</h6>試したこと
テキストエンコーティングの日本語をデフォルトから日本語(...)の４つに変えてみましたがどれも文字化けしてしまいます。
上記のようにしたら文字化けが治りました！
htmlはDOCTYPE宣言から提示してください
コードはマークダウンにてご提示ください
ブラウザに表示した場合に文字化けします。
本当にプログラミングをやり始めた初心者で本を読みながらやっているのですが質問の該当のソースコードを入力すれば<meta charset="">もdoctype宣言も必要がないと本には書かれてはいませんができると思われるように書かれています。
ちなみにm.ts10806さんのdoctype宣言は一番上に<!doctype html>と書けばいいのでしょうか？
smoking_areaさんの<meta charset="">はどういう風に該当ソースコードに挿入すればいいですか？
<meta charset="UTF-8">と挿入すればいいのでしょうか？
マークダウンは分からなければヘルプページを確認してくださいね
回答4件
0
ベストアンサー
HTMLの構文上の問題はありませんが、内容が日本語のため<meta charset=「文字コード名」>を設定しないと文字化けする確率が高いです。
基本的に文字化けするのってパターンが決まっていて
- サーバーの文字コードがファイルの文字コードと違う
- ファイルのcharsetで文字コードを指定しないため誤った文字コードが指定されてしまう。
- ファイルの文字コードとcharsetの文字コードが違う
のいずれかです。
質問者さんが意図的にやっているのかは知りませんがhtmlタグ,headタグ,bodyタグは省略可能です。
参考
Certain tags can be omitted.
しかし、思わぬミスを犯す可能性があるため省略せずに書くことをお勧めします。
投稿2019/11/18 02:18
編集2019/11/18 02:24
総合スコア10429
0
文字コードを変えて保存する方法については理解されているようなので、
ためしに以下のように書き換えたうえで、UTF-8 の文字コードで保存してみてください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5</head> 6<body> 7<h1>１番大きな見出しを表示</h1> 8<h2>２番目の見出しを表示</h2> 9<h3>３番目の見出しを表示</h3> 10<h4>４番目の見出しを表示</h4> 11<h5>５番目の見出しを表示</h5> 12<h6>６番目の見出しを表示</h6> 13</body> 14</html>
おそらく文字コードが文書とファイル自体で齟齬がある事が原因だと思うので
<meta charset="UTF-8"> の日本語文書である旨と文字コードがUTF-8である旨を宣言したうえで、UTF8の文字コードで保存することで文字コードが統一されて文字化けが解消するのではと思います。
もし、Atomを使い始めたばかりで、特に設定もされてない状態で文字化けしているなら、
Atomのコマンドに
$ apm install auto-encoding
を入力して自動変換パッケージをインストールするだけで解決します。
投稿2019/11/18 02:22
編集2019/11/18 02:28
総合スコア506
ベストアンサーにしたいんですがm.ts10806さんやasuchi0819さんが一生懸命私を将来的なことも考えて回答してくださったのでscore２８７さんの回答もその通りにやれば文字化けが治ったのですが先にasuchi0819さんの回答で文字化けが治ったので申し訳ないですがasuchi0819さんをベストアンサーにさせていただきます。回答してくださりありがとうございました。
いえいえ、解決できたようでよかったです。文字化けの問題は誰もが通る道で、今後PHP、データベースとやることが増えると何度もぶつかる壁でもあるので「エンコード」「文字コード」の理解を大事に勉強を頑張ってください。
ありがとうございます。挫折せず勉強していこうと思います！
0
文字コード変えればいいんじゃね？
投稿2019/11/18 01:45
総合スコア52
0
そもそもですが、htmlの基本構成が守られていません。
DOCTYPE宣言、head、body
htmlも「文書」なので守るべきフォーマットがあります。
フォーマットをきちんと守ることで「何が悪いのか」ひとつ問題切り分けができ、
対応方針も決まってきます。
この手のサンプルはネットにあります。
最小構成でいいので下記のようなサイトを参考に組んでみてください。
HTML5最小構成のサンプル
そこから試行錯誤して問題をひもといていきましょう。
(文字化けの原因はあまり広くはないですが、知っておいた方が良いこともあるので
ズバリ回答ではなくヒント小出しの回答にしています)
投稿2019/11/18 01:45
編集2019/11/18 02:01総合スコア80875
とくに、基本構成における構文に問題はありません。
HTMLの決まりではhtmlタグ、headタグ、bodyタグは省略可能です。
厳密に言えばm.ts10806さんが提示されたリンク先の内容は「間違っています」けどね...
参考 https://html.spec.whatwg.org/multipage/syntax.html#optional-tags
あくまでサンプルです。
問題切り分けの観点からすると「本来望ましいことはきちんと書いておいた方が良い」ので、ズバリの回答と言うよりも問題切り分けをしましょうと言う提案が主です。
なので「最小構成のサンプルはネットにあります。例えばこれ」という紹介の仕方にとどめました。
(たぶん今回の質問者さんだと公式ドキュメントの類いは読みとけないと思ったので)
ただ、問題切り分けのための提案という部分はわかりにくかったかもしれませんね。本文調整します
> htmlの基本構成が守られていません
ここがひっかります。
m.ts10806さんの「基本構成」の定義が分かりませんが「公式の構文」のことを指しているなら間違いですし、「初心者が書くべき構文」のことを指しているなら妥当かと思います。
今後の質問者さんのためにどちらを指しているのか「明確に書かない」というならそれも妥当かとは思います。
んー確かに不明瞭だったかもしれませんね。
「書かなくても影響がない」というところを取るか、回答に書いたように「文書だからちゃんとフォーマットを守ろうよ」というところを取るか。
私としては「フォーマットを守って当然」と思ってるので前者は考えてません。ちゃんと各宣言をして、書くべきところに書くべきということですね。
逆に思うところや提案がおありでしたらasuchi0819さんの方でまとめて回答に別途起こされた方が質問者さんや今後同じ問題を抱える人が見たときに良いかと思います。
エンジニアそれぞれのスタンスが見えるのもteratailの勉強になるところですしね。
m.ts10806さんの趣旨、理解しました。
しかし、「書かなくても影響がない」ではなく「省略可能」です。
これについては参考リンクに書かれています。
> Certain tags can be omitted.
asuchi0819さん
私は省略可能であることは理解の上で回答しているので自身の回答に載せられた方が伝わると思います。
了解しました。
mustというよりbetterに近いですね
低評価３つもつくような内容だろうか…
あなたの回答
tips
プレビュー
