ホームページの文字コードについて

ホームページの文字コードについて

ホームページの文字コードについて

ホームページの文字コードについて

今回はホームページの文字コードについてのお話です。
ホームページには主に3種類の文字コードがあります。

Shift_JIS(以下sjisと表記)
euc-jp(以下eucと表記)
utf-8(以下utf8と表記)

これはとりあえず何種類か存在しているとだけ踏まえてもらって大丈夫です。

結果的にはどの文字コードを使ってもホームページはきちんと表示できますが、例えばsjis記述すると決めた場合はそのページ全体がsjisの文字コードになります。

下記はutf-8での文字コード指定タグ(html5の場合の記述例)
<meta charset="utf-8">

ホームページの上部にある<head></head>のタグ内に文字コードの設定箇所があり、そこで3種のうちの一つ指定する事でそのページのベースとなる文字コードが決まります。

そのページは決められた1種類の文字コードで統一する必要があります。

別の文字コードによる記述がページ内に共存(バッティング)すると、その部分が文字化けするようになります(このケースは後述します)。

「文字化け」とはよく海外から来る迷惑メールなどで見た事があるかもしれません。

変な記号の並びで全く読めない字の羅列です。文字化けにはいろいろな化け方がありますが、読めなければ全て文字化けです。

通常版:通常コード

文字化け:文字化け状態

sjisで書いてもeucで書いてもutf8で書いても表示される文字は同じです。

sjisは少し前まで日本のホームページでよく使われていた文字コードですが、今はutf8が採用される事が非常に多いと思います。

今は国内のホームページが海外からもよく閲覧されている時代ですから、文字コードは世界基準(utf8)に合わせておく必要があります。

ですので新規にホームページを作る場合は、特に指定が無ければutf8を採用しておいて問題はありません。

自分が作ったものでは無いホームページを更新する仕事の場合は、上部に元から文字コードの指定がされている訳です。

何を使っているのかだけ確認をしておけば後はそれに沿った更新をする形で大丈夫です。

もしそのWEBサイトの獲得ターゲットに海外ユーザーが含まれる可能性があるのであれば、一つの提案としてutf8で書き直す事を計画しても良いです。

或いは全面リニューアルをする場合などにutf8に切り替えておきましょう。

ちなみに文字コードが影響をして文字化けを起こすのは日本語部分だけです。

英数字の部分は文字化けは起こりません。ひらがな・カタカナ・漢字が文字化けする事になります。

文字コードが混在してしまうケースの紹介

文字コードが混在してしまうケース

上記で<head></head>タグ内に文字コードを一度指定したら後は特に何も触らない訳です。

ですので文字コードが違う記述が衝突したりするはずがない、という意見があると思います。

ここでは実際の業務で起こる衝突(バッティング)例をいくつかご紹介します。

ページ内の文字コードとプログラム内の文字コードが違う

まず一つ目はあなたがサイトのリニューアルなどの依頼を受けた場合ですね。これは数は少ないながらも起こりえるケースだと思います。

まずは各ページ順調にutf8の文字コードでリニューアルを進めていたとしましょう。

ホームページには必ず「お問い合わせページ」が存在します。

お問い合わせページにはユーザーが入力されたお問い合わせ内容を、プログラム(CGIやPHP)が受け取ってメール送信させる機能がついていますよね。

お問い合わせのプログラム機能自体はそのまま流用する事が多いので、入力フォーム部分だけをリニューアルする場合が多いでしょう。

プログラムのベースとなる文字コード

ただしプログラムによってはメインとなる文字コードがsjis版・utf8版などあらかじめ設定されている場合があります(使用権フリーのプログラムに多いです)。

そのプログラムの文字コードがsjisを採用していた場合、文字をsjis形式で受け取ってメールに記載をして送信先へ飛ばす事になります。

仮にそのお問い合わせの入力フォームページをutf8で指定して作っていた場合は、「お名前」や「会社名」など日本語をする部分は当然utf8で入力される訳です。

ユーザーが入力したデータはuft8での入力データになるので、utf8での入力データが、sjisのプログラムを通ってしまいますよね。

これにより次の「入力内容確認画面」で入力データが文字化けした状態になるのです。

入力内容確認画面で入力データが文字化けした状態

改善方法

このケースを改善するのは簡単です。お問い合わせページのみsjisで作り直せばよいのです。

そうすればsjisで入力内容がプログラムに伝わるので正常に日本語が表示されます。

つまりお問い合わせページだけsjisで、後はutf8で構成したサイトになります。それでも全然問題なしです。

ご自身がレベル100のWEB制作熟練者でそれがどうしても気になる事もあるでしょう。

或いはそれが許されない厳格なルール環境下の場合は、utf8に対応したメール送信プログラムを採用するなどの対処が必要になるでしょう。

文字コードの変更手順

まずはメモ帳(ここではサクラエディタを使用)でコードを開き、<meta charset="utf-8">と記述された部分を探します。きっと上から2・3行目にあるはずです。

metaタグの文字コード指定箇所

もしこのコードよりも上に(上部の2・3行に)タイトルタグなど日本語を表示するタグがある場合は、文字コードのタグを移動させheadタグの一番上段にcharsetタグが来るようにしましょう。

文字コードタグより下全てを切り取ります。

metaタグの文字コード以下を全て切り取り

設定メニューから文字コードセット指定→sjisに変更します。

文字コードをutf8へ

メモ帳の文字コードを「sjis」に書き換えて、その上で切り取った部分をペーストして上書き保存し直すのです。そうすればsjisに文字コードが変わります。

metaタグをsjisへ変更後に切り取り箇所を張り付ける

念のため、次にメモ帳で開けた時にきちんと文字コードがsjisになっているかは確認をしておきましょう。難しいと思う場合はきちんとバックアップを取っておいてください。

テキストエディタ常に文字コードが1つ選択されています。採用している文字コードが何なのかは事前確認しましょう。
utf8のつもりで書いていたのに、実はsjisだったという事がよくありますので注意です。
新規で作成したテキストファイルはsjisである事が多いので注意しましょう。

SSI(サーバーサイドインクルーディング)を使っている場合

上記までのケースはページ単位で文字コードが違う場合でしたので、文字コードを変えれば済む話でしたが、ページの部分単位で文字化けするケースもあります。

SSIはHTMLサイトでよく使われます。

例えばSSIなどを使って全ページ共通のメニューなどを表示している場合があるかと思います。

共通表示させる部分はその「共通ファイル」を更新すれば全ページに一括反映できるためです。

この時母体となる元ページがutf8であるのに対し、共通ファイル部分のコードがsjisだったりすると文字化けが起こります。

共通ファイル(.htmlや.txtなど)の文字コードを揃える必要があります。

SSI使用時の文字コードバッティング

あわせて読みたい参考記事

応用的なお話になりますが、utf8とsjisのページが別々存在する場合(上述のお問い合わせ入力フォームのように)、SSIの共通ファイルもutf8版とsjis版とそれぞれを用意して対処する場合もありますね。

PHPの文字コード(euc)について

phpファイルは以前まではeucがメインの文字コードでした。

ですので最終的に「utf8」などの表示したい文字コードにencodingなどで変換しておりましたが、php5.6以降からデフォルトの文字コードが「utf8」になりましたね。

ですのでメモ帳などでphpを書く時に文字コードがutf8になっていれば文字化けする事はありません。

iframe(フレーム内別ページ表示)の場合

よく見られるのが<iframe></iframe>タグでページ内のとある部分に別ページを表示させる場合です。

この場合もベースとなる親ページがutf8で作られているのに、<iframe>タグ内の別の子ページが違う文字コードの場合があります。

ただこの場合iframe内にある子ページ内できちんと文字コードが設定されていれば、親ページと子ページとがそれぞれ個別に正常表示している事と同じになります。

その場合はバッティングにはなりません。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事