【HTML5】charsetで文字コードを指定するには?HTTPヘッダーを使った指定についても解説

公開日: 2021.12.18
更新日: 2024.01.06
charsetで文字コードを指定するには

HTMLで文字コードを指定する際に、meta要素のcharset属性を使用しますね。

このような指定は、「HTMLを書く上での定型文」という感覚で、あまり意識したことがない方も多いのではないでしょうか。

ここでは、HTMLのcharset属性について、今まで詳しく知らなかったという方のために、

  • 文字コードとは
  • meta要素の属性について
  • HTTPヘッダーでの指定について

以上の項目に沿って、解説していきますね。

この記事を読むことで、文字コードとcharset属性について理解し、HTTPヘッダーでの指定についても学習することができますよ。

ぜひ最後まで読んでくださいね!

文字コードと文字化けについて

ブラウザでサイトを開いたときに、文字化けで表示されているのを見たことはないでしょうか?

この文字化けは、保存した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業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください!

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5