AtomのHTMLプレビュー画面で文字化けする原因【メンターが回答】

「AtomのHTMLプレビュー画面が文字化けする原因がわかりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。meta要素の使い方についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

AtomのHTMLプレビュー画面で文字化けする原因だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

実現したいこと

AtomでHTMLファイルを開きAtom HTML Previewで文字化けせずプレビュー出来ること。

補足情報

markdown preview で日本語でのプレビューは出来ますが、レイアウトは ページ通りではありません。

 

自分で試したこと

エンコーディングの問題かと思いauto-encoding というパッケージを導入しましたが、改善されませんでした。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メンターからの回答

すみません、こちらの環境では再現しないようですね。

AtomとPlugin のバージョンをあげて見るのがいいと思います。(できればmacも)

一応、バージョンを上げない方法での対策ですが、漢字圏の人は<head>~</head>にメタタグ<meta charset=”utf-8″>を指定してあげると解消されるという話もあります。
https://github.com/harmsk/atom-html-preview/issues/94

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
</html>

 

以上、AtomのHTMLプレビュー画面で文字化けする原因について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

AtomのHTMLプレビュー画面で文字化けする原因について解説したよ。

大石ゆかり

Atomというのはどのようなツールでしょうか?

田島悠介

機能が豊富な無料のテキストエディタなんだ。ただし、機能が多いので初心者には使いにくいかも。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。