【HTML5】charsetで文字コードを指定するには？HTTPヘッダーを使った指定についても解説
HTMLで文字コードを指定する際に、meta要素のcharset属性を使用しますね。
このような指定は、「HTMLを書く上での定型文」という感覚で、あまり意識したことがない方も多いのではないでしょうか。
ここでは、HTMLのcharset属性について、今まで詳しく知らなかったという方のために、
- 文字コードとは
- meta要素の属性について
- HTTPヘッダーでの指定について
以上の項目に沿って、解説していきますね。
この記事を読むことで、文字コードとcharset属性について理解し、HTTPヘッダーでの指定についても学習することができますよ。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
文字コードと文字化けについて
ブラウザでサイトを開いたときに、文字化けで表示されているのを見たことはないでしょうか？
この文字化けは、保存したHTMLファイルと表示するブラウザの文字コードが異なっていた場合に起きます。
HTMLファイルの文字コードは、ファイルを作成・保存するときの文字コードです。
ブラウザの文字コードは、HTTPに指定されている場合はそちらが優先されますが、それ以外では、HTML文書内で指定した文字コードです。
文字コードについて、さらに詳しく解説していきましょう。
文字コードとは？
コンピュータは文字をそのまま受け取るのではなく、文字に割り当てられた固有の数値に変換して管理します。
この数値のことを文字コードといいます。
数値と文字の変換表のことを文字エンコードといいます。
文字コードという用語の中に、この文字エンコードのことも含められている場合があります。
今回の記事でも、含めた場合の文字コードで説明していきますね。
現在、日本語で主に使われている文字コードは以下のものです。
- UTF-8
- Shift_JIS
- EUC-JP
UTF-8は、多くのサイトで利用されており、HTML5の規格でもこの文字コードが推奨されています。
Shift_JISは、以前のWindows環境においてベースとなる文字コードだったため、サイト作成でも使用されていました。
EUC-JPは、UNIX用の文字コードですが、現在ではUTF-8に変わり、ほとんど使用されていません。
文字コードを指定する方法とは？
それでは、文字コードはどのように指定するのでしょうか？
ここでは、HTMLを含めた以下の3つの文書での文字コードの指定方法を解説します。
- HTMLファイルの文字コード
- 外部JavaScriptの文字コード
- CSSファイルの文字コード
それぞれ見ていきましょう。
HTMLファイルの文字コード
HTMLの文字コードはmeta要素を用いて指定します。
charset属性を使いますが、この指定はファイルの最初から1024バイトまでに配置する必要があります。
参考：https://www.w3.org/International/questions/qa-html-encoding-declarations.ja
基本的には、headタグの後ろに書かれますね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
...HTML5より前には、charset属性はなかったため、http-equiv属性を使った以下のような記述でした。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">meta要素は、文字コードの他にも、ページに関する様々な情報を記述できます。
meta要素に関しては後でさらに詳しく紹介しますね。
外部JavaScriptの文字コード
ページスクロールの途中でフェードインしながら要素が現れるなど、動きのあるページを作成したいときに、外部のJavaScriptファイルを読み込むことがありますね。
JavaScriptで書かれた外部ファイルを読み込むときには、script要素を使います。
外部JavaScriptの文字コードは、script要素のタグ内で指定することが可能です。
<script src="sample.js" charset="UTF-8"></script>ただし、この指定は、JavaScriptファイルとHTMLの文字コードが等しい場合には不要です。
また、script要素でcharset属性を指定することができるのは、src属性で外部ファイルを読み込んだときのみです。
以下のように、HTMLファイルに直接スクリプトを書き込む際には、charset属性の指定はできないので注意しましょう。
<!-- HTML内に直接スクリプトを記述 -->
<script>
//スクリプトの内容
</script>CSSファイルの文字コード
CSSの文字コードは、ファイルの先頭に「@charset」を使って指定します。
@charset "UTF-8";HTMLと同様に「Shift-JIS」や「EUC JP」の指定も可能ですが、基本的には「UTF-8」で指定します。
こちらもファイル自体の文字コードと先頭に書いた文字コードが異なると、うまく機能しなくなります。
リンクを使ったcharset属性
以前は、a要素やlink要素などにcharset属性を指定することができましたが、HTML5では、これらの要素のcharset属性は廃止されています。
<a href="sample.html" charset="Shift_JIS">リンク</a>リンク先が他サイトだった場合、文字コードが向こうの製作者の都合で変わることもあり得ます。
そもそも、リンク先のサイトに正しく文字コードが指定されているのであれば、こちらの指定は不要になりますね。
a要素やlink要素などにはcharset属性を指定しないようにしましょう。
meta要素とは
meta要素は、HTMLのhead内に記述する要素で、ページに関する様々な情報を指定することができます。
この要素の記述はブラウザに表示されることはありませんが、検索エンジンやSNSなどが情報を取得するために利用します。
主に以下のような情報を指定できます。
- 文字コード
- ページの概要文
- ページのキーワード
- SNSの情報
- ページ著者
ここでは、meta要素の主な属性について紹介していきます。
charset属性
ここまでで説明してきたように、HTMLの文字コードを指定する属性です。
HTMLファイルがどの文字コードで保存されているのかを示します。
<meta charset="UTF-8">値には文字コードが入ります。基本的には「UTF-8」になりますね。
小文字と大文字が区別されないため「utf-8」という記述でも問題ありません。
name属性
name属性は、ページに関する情報の種類を指定します。
属性値は、以下の5つです。
- application-name：Webアプリケーション名
- author：文書の著者名
- description：文書の概要文
- generator：文書作成に用いたソフトウェア
- keywords：文書に関するキーワード
name属性で指定した情報の内容を、content属性で書く必要があります。
具体的には、以下のように記述します。
<meta name="description" content="HTMLファイルの文字コードを指定する方法を紹介しています">
<meta name="keywords" content="HTML, 文字コード">name属性は、http-equiv属性、またはcharset属性と併用することができません。
いずれかの属性がある場合には、指定しないようにしましょう。
http-equiv属性
http-equiv属性は、サーバーやブラウザなどに対しての文書の処理方法を指定します。
属性値は、以下の4つです。
- content-type：ファイルの文字コード
- default-style：優先スタイルシート
- refresh：ページのリロードやリダイレクト
name属性と同様に、content属性に情報の内容を記述します。
具体的には、以下のように記述します。
<!-- HTML5より前の文字コード指定 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- linkのtitle属性と合わせて指定 -->
<meta http-equiv="default-style" content="black">
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="style-normal.css" title="normal">
<link rel="stylesheet" type="text/css" href="style-black.css" title="black">default-styleでは、content属性値にlink要素のtitle属性値を指定することで、優先するスタイルシートを設定できます。
もしくは、「content=”style02.css”」というようにファイル名を直接指定することもできます。
content属性
content属性は、name属性、http-equiv属性で指定した情報の内容を指定する属性です。
情報の種類によって、属性値は変わります。
HTTPヘッダーで文字コードを指定する
ここまで、meta要素のcharset属性を使って文字コードを指定する方法と、meta要素に使われる属性について、解説してきました。
実は、この文字コードの指定は、charset属性以外にもHTTPヘッダーを使って指定することができます。
HTTPヘッダーの情報の方が優先度が高いため、HTML文書でも文字コードを指定する場合には、同じ文字コードにする必要があります。
ここでは、
- HTTPヘッダーとは
- HTTPヘッダーで文字コードを指定する際の注意点
- HTTPヘッダーで文字コードを指定するメリットデメリット
以上について、詳しく説明していきます。
HTTPヘッダーとは
ブラウザでWebページを表示する際には、HTTPと呼ばれる通信が行われています。
ブラウザからサーバーに対して行う通信を「HTTPリクエスト」といい、サーバーからブラウザに返す通信を「HTTPレスポンス」といいます。
この通信では、Webページを表示するためのデータ以外にも、HTTPヘッダーとよばれるテキストデータがやり取りされています。
HTTPヘッダーにより、ブラウザとサーバーが追加情報を渡すことができます。
HTTPリクエストについて
HTTPリクエストの1行目は「HTTPリクエスト行」、2行目以降に「HTTPヘッダー」「データ本体」と続きます。
HTTPリクエストでは、「メソッド」「URL」「ブラウザのHTTPバージョン情報」の3つを伝えます。
HTTPヘッダーでは、ブラウザやOSの種類、どのページからリクエストしたか、などの情報を伝えます。
HTTPレスポンスについて
HTTPレスポンスも同様に、1行目は「レスポンス状態」、2行目以降に「HTTPヘッダー」「データ本体」と続きます。
レスポンス状態では、「HTTPステータスコード」と呼ばれる3桁の数字が示されます。
「404 Not Found」といったメッセージを見たことがあるかと思います。
この404は、そのページが存在しないことを示すHTTPステータスコードです。
HTTPヘッダーでは、HTTPのバージョンやデータ本体に関する詳細な情報を伝えます。
この中の、Content-Typeに含まれるcharsetパラメーターを使って、文字コードを指定することができます。
ここで指定された文字コードは、他のどの指定よりも優先されます。
HTTPヘッダーで文字コードを指定する際の注意点
HTTPヘッダーで文字コードを指定する場合には、HTTPヘッダーとHTML文書の文字コードを一致させる必要があります。
この情報が異なると、正確に表示されなくなる可能性があります。
HTTPヘッダーに文字コードを示していれば、ブラウザは情報を判断して表示することができます。
それならば、HTMLのmeta要素での指定はいらないようにも思えますが、HTTPヘッダーで指定した場合であっても、このHTMLでの指定をしておくことをおすすめします。
HTMLのソースコードを確認するときに、どの文字コードでエンコードされているのか把握しやすくなるメリットがあります。
他にも、サーバーを経由せずに閲覧する際などに、HTTPヘッダーのみの指定だと問題が起きるかもしれません。
特に、複数人で管理している場合には重要ですね。
まとめ：文字コードを正しく指定することが大切
今回は、HTMLのcharset属性で文字コードを指定する方法と意味について解説してきました。
meta要素の他の属性についての紹介もしましたね。
また、文字コードはサーバーにあるHTTPヘッダーでも指定することができます。
サーバー側の設定を行う権限があるのであれば、検討してみてもいいかもしれません。
メリットデメリットを把握した上で、判断してみてくださいね。
今回の記事が参考になれば幸いです。
プログラミングやパソコンを使って働きたい！
そのように考え、成長しているIT業界への転職を考えている方も増えてきました。
『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』
反対にこのような声も聞く事があります。
そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
