http://setf.jp/ Web標準テンプレートのユーザーサポート

HTML5 & CSS3検証

Topic 2

UTF-8の文字化けについて

Web標準テンプレートのhtmlはHTML5で制作しています。HTML5の文字エンコーディングはUTF-8が推奨されており、Web標準テンプレートのhtmlファイルもUTF-8を指定しています。一方、UTF-8を指定した際にhtmlファイルの文字コードとブラウザが解釈した文字コードが異なった時に文字化けが発生します。本ページでは文字化けの回避手順を含め、Web標準テンプレートの設置サポートをします。

文字化けせずWeb標準に準拠したhtmlを制作する手順

Web標準に拘る制作者は、Web標準にならないソースコードが付加される場合があるオーサリングツールが大嫌いです。ですから本サイトもWeb標準テンプレートも全てのhtml・cssファイルは、完全手打ちで記述しています。

  1. htmlファイルの制作は、Windowsのメモ帳(テキストファイル)を開き手打ちでソースコードを記述する。
    1. htmlファイルの先頭に、レスポンスヘッダの文字コードをUTF-8に指定する以下のソースコードを記述する。

      <?php header ("Content-type: text/html; charset=UTF-8");?>

      (*)実際には、phpファイルをincludeしているがここではinclude不要の方法を説明。
    2. htmlファイル内のメタ情報に以下を記述する。

      <meta charset="UTF-8" />

    3. 上記の記述を含み、htmlファイルに全ての記述を終えたら、htmlファイルを必ずshift_jis(ANSI)で保存する。

      (*)UTF-8で保存する必要はない。

  2. .htaccessファイルにhtmlでphpを実行するソースコードを記述。

    (*)ご利用のサーバー、phpのバージョンによりソースコードが異なる為、ソースコードは割愛します。

  3. ffftpで以下の3点を設定して、htmlファイルをサーバーにアップロード。
    1. ファイル名で転送モード切替
    2. ローカルの漢字コードをShift_jis
    3. ホストの漢字コードをUTF-8
  4. これで本サイトの全てのページのようにWeb標準に準拠したWebページが完成します。

    (*)実際に本ページがWeb標準に準拠しているかの確認

以降、Web標準テンプレートの利用方法と設置サポートを含む、本ページの目次。

利用規約の同意

  • Web標準テンプレートのご利用は、» 利用規約の同意が必要です。
  • 利用規約の同意が面倒な場合は、利用規約の同意無しで直ぐにご利用いただける、» サービス素材を推奨します。
» 目次へ

» 利用規約を熟読後にお問合せフォームから必要事項3点を送信

必要事項3点
  1. ダウンロードを希望するWeb標準テンプレートのset名。
  2. 利用規約に同意(と記述)
  3. Web標準テンプレートを利用するサイト名とURL。

» お問合せフォームから上記3点を送信いただいた後、当方が確認次第、お問合せフォームのメールアドレス欄に入力されたメールアドレス宛に、ダウンロードに要するIDとパスワードを送信します。

» 目次へ

Web標準テンプレートのダウンロード

IDとパスワードの入力
サンプルデモページ内のダウンロードボタンを押し、表示されたダイアログに前項のIDとパスワードを入力してダウンロードを実行。

ダウンロードしたzipファイルを解凍ソフトで解凍する。

» 目次へ

ダウンロード後の重要点

以降、php.htaccessが利用可能な場合においてのサポートです。phpと.htaccessが利用不可の環境でWeb標準テンプレートを利用する場合はこちら

html・cssファイルの編集
オーサリングツールを用いてhtml・cssファイルを編集すると、Web標準にならないソースコードが付加される場合があります。

初期状態の正確なhtmlとcssを維持するには、html・cssファイルをメモ帳で開いて手打ち編集を推奨します。

» 目次へ

htmlファイルの表示確認
ローカル上で、ダウンロードしたフォルダ(ファイル)内にあるhtmlファイルをブラウザで開くと表示確認が出来ます。またローカル上で、html・cssファイル内の任意箇所を修正毎にブラウザで開くと修正後の表示確認が出来ます。

いずれもローカル上では、ブラウザの文字コードの関係で、htmlファイルが文字化けして表示される場合があります。

文字化け解消はブラウザのエンコード設定を変更する方法もありますが、ここでは以下を推奨します。

ローカル上でhtmlファイルを正しく表示させるには、htmlファイルの3行目のメタ情報内、utf-8shift_jisに書き換えます。これでローカル上において、htmlファイルの文字化けは解消しますが、表示確認後は必ず書き換えたshift_jisutf-8に戻す事を忘れないで下さい。shift_jisのままサーバーにアップロードするとWebページが文字化けします。

» 目次へ

サーバーにアップロード

.htaccessファイルの設定
ご利用の.htaccessファイルにhtmlでphpを実行するソースコードを記述してから、.htaccessファイルをアップロードします。

(*)htmlでphpを実行するソースコードはご利用のサーバー、phpのバージョンによって異なる為、ご利用のサーバーにてご確認ください。

» 目次へ

ffftpの設定
html・cssファイルの任意の箇所を修正後に、html・css・画像ファイルが入っているフォルダ(ファイル)を丸ごと、任意のディレクトリにffftpでアップロードします。ffftpは下記3点の設定が必須です。
  1. ファイル名で転送モード切替
  2. ローカルの漢字コードをShift_jis
  3. ホストの漢字コードをUTF-8
以上でWebページが完成。Webページのurlは以下の通り。

http://アップロード先のディレクトリ名/フォルダ(ファイル)名/

» 目次へ



HTML5 & CSS3検証

Page Top