<h2 id="%EF%BC%91%EF%BC%8E%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%91%EF%BC%8E%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> １．はじめに</h2>
HTMLファイルの <code>&lt;head&gt;</code> 部分に以下の様に記述しましたが、日本語の文字化けが解消されませんでした。
<div class="code-block-container">
<div class="code-block-filename-container">sample_1.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="3">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">sample_2.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="10">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
 &lt;!--HTML5より前の文字コードの指定方法 --&gt;
 &lt;meta http-equiv="content-type" content="text/html; charset=Shift_JIS"&gt;
&lt;/head&gt;
</code></pre>
</div>※使用エディタは、Visual Studio Code（バージョン：1.103.0） です。
<h2 id="%EF%BC%92%EF%BC%8E%E5%AF%BE%E7%AD%96" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%92%EF%BC%8E%E5%AF%BE%E7%AD%96" aria-hidden="true"></a> ２．対策</h2>
①．<code>Visual Studio Code</code> の設定を開きます。 
②．<code>Visual Studio Code</code> の右上の [設定(UI)を開く] ボタンを押下します。 
※赤の下線を引いているアイコンを押下します。 
<img src="https://storage.googleapis.com/zenn-user-upload/6fb3817fc233-20250813.png" class="md-img" loading="lazy">
③．<code>settings.json</code> のプログラムを以下の通りに修正すると、文字化けが解消されました。
<div class="code-block-container">
<div class="code-block-filename-container">settings.json</div>
<pre class="language-json"><code class="language-json code-line" data-line="28">{
 //　文字コード指定
 "files.encoding": "utf-8",
 // 自動的に文字コードを判定
 "files.autoGuessEncoding": true,
 // ステータスバーに現在の文字コードを表示
 "workbench.statusBar.visible": true,
 // コピペ時に自動で整形されるのを防止
 "editor.formatOnPaste": true
}
</code></pre>
</div><h2 id="%EF%BC%93%EF%BC%8E%E5%8F%82%E8%80%83" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%93%EF%BC%8E%E5%8F%82%E8%80%83" aria-hidden="true"></a> ３．参考</h2>
・<a href="https://zenn.dev/kat/articles/e2a4c1fe7573f2" target="_blank">VS Codeで開いたファイルの文字化けを解消する</a> 
・<a href="https://masizime.com/blog/vscode-formatonpaste.html" target="_blank" rel="nofollow noopener noreferrer">Visual Studio Code ペースト時自動フォーマットを止める</a> 
・<a href="https://atsum.in/vscode/auto-guess-encoding/" target="_blank" rel="nofollow noopener noreferrer">【VSCode】文字化け対策:文字エンコーディングを自動判定してファイルを開く</a>

【Visual Studio Code】HTMLファイルの文字化け解消方法について（備忘録）

Discussion