「ウェブの文字化け」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「 * 文字化けが発生する理由 HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なる * 制作する側の対応方…」) |
|||
| (同じ利用者による、間の1版が非表示) | |||
| 1行目: | 1行目: | ||
| − | + | == 文字化けが発生する理由 == | |
HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なる | HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なる | ||
| − | + | == 制作する側の対応方法 == | |
正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらう | 正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらう | ||
テキストエディタでファイルを保存する際に、文字コードを正しく指定する("UTF-8" に統一することが望ましい) | テキストエディタでファイルを保存する際に、文字コードを正しく指定する("UTF-8" に統一することが望ましい) | ||
| 13行目: | 13行目: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
</head> | </head> | ||
| − | (『スラスラわかるHTML＆CSSのきほん 第2版』p. | + | (『スラスラわかるHTML＆CSSのきほん 第2版』p.38, 40) |
| 23行目: | 23行目: | ||
| − | + | == 閲覧する側の対応方法(ただし制作側で指定されていたら変更できない) == | |
ブラウザのテキストエンコーディングの設定を変えてみる。 | ブラウザのテキストエンコーディングの設定を変えてみる。 | ||
| 29行目: | 29行目: | ||
右上の「≡」ボタン > その他 > テキストエンコーディング | 右上の「≡」ボタン > その他 > テキストエンコーディング | ||
| − | + | == 参考文献 == | |
[https://design-plus1.com/tcd-w/2019/03/textgarbling.html ウェブサイトが文字化けしてしまう理由とその対応について] | [https://design-plus1.com/tcd-w/2019/03/textgarbling.html ウェブサイトが文字化けしてしまう理由とその対応について] | ||
2020年6月3日 (水) 11:51時点における最新版
文字化けが発生する理由[編集]
HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なる
制作する側の対応方法[編集]
正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらう テキストエディタでファイルを保存する際に、文字コードを正しく指定する("UTF-8" に統一することが望ましい)
1. HTMLファイルで以下の記述をする。
<head>
<meta charset="UTF-8">
</head>
(『スラスラわかるHTML＆CSSのきほん 第2版』p.38, 40)
2. CSSファイルで文字コードを指定する
@charset "UTF-8";
(『スラスラわかるHTML＆CSSのきほん 第2版』p.132)
閲覧する側の対応方法(ただし制作側で指定されていたら変更できない)[編集]
ブラウザのテキストエンコーディングの設定を変えてみる。
- Firefox の場合
右上の「≡」ボタン > その他 > テキストエンコーディング
