インターネットで稼ぐ流儀　『第５９号』

【 インターネットで稼ぐ流儀 】

- MENU -

1. 前記
2. [ サイト作成 HTML 講座　入門編 -04- ]
3. 編集後記

おはようございます。


Gadget-Project ガジェット・プロジェクト の瀬尾です。


『 HTML 講座 』ですが、
できるだけ簡素に分かりやすくと思っていますが、
書いている内、
知っておいて頂きたいことが色々と出てきて、
少々、内容が長文化する傾向にあります。

今日は、
『文字化け』が起こる原因を含めて説明しています。

ざっと、目を通して頂ければと思います。


それでは、
いつもの新着情報から。


【 今週の新着情報 】
Impact Presentation Booster
インパクト・プレゼンテーション・ブースター
画像、音声も扱え、
ワイプ・スプラッシュで次々スライドするメッセージ！
簡単に即導入できるシステムが、
プロモーションを成功させる！！
プレゼンテーション・ノウハウ「高橋メソッド」
を応用して制作された最新システム！

このメルマガでは、
インターネットで稼ぐための、
サイトの作り方、SEO の考え方、
アフィリエイト、アドセンス、情報起業、リセールライト、
等についてお話していきます。

更に、精神的なことの話や、脳の話など、
あらゆる面でサポートできればと思っています。

どうぞ、末永いお付き合いをよろしくお願い致します。

前回の復習

• ウェブ・ページを公開しようと思えば、
  「 HTML のバージョン」を記載しておく必要がある
• それは、『文書型宣言』というもので、
  ソース１行目に、＜!DOCTYPE＞　として記述し、
  サイトで使用する HTML にマッチしたものを記載しておく必要がある
  ＜!DOCTYPE＞　例：
  ＜!DOCTYPE HTML PUBLIC
  　"-//W3C//DTD HTML 4.01 Transitional//EN"
  　"http://www.w3.org/TR/html4/loose.dtd"＞
• ＜HTML＞　のタグところで、
  ＜HTML LANG="ja"＞　として、
  使用言語を記述しておいた方がよい

サイト作成 HTML 講座　入門編 -04-

HEAD

今日は、＜HEAD＞　部の記述についてお話したいと思います。

＜HEAD＞　部というのは、
ウェブ・ページに表示はされない箇所ですが、
SEO にも関連する項目を含んでいますので、
何が記述されているのか、何を記述しないといけないのか、
知っておく必要があります。

SEO 等の話も交えながら説明していきますので、
＜HEAD＞　部の項目だけで、
数回に亘ってのお話になります。

では、始めますね。

META と TITLE

＜HEAD＞　部には、
『 META 』と『 TITLE 』という要素が入ってきます。

『 TITLE 』は各ページ一つの記述ですが、
『 META 』には幾つかの属性がありますので、
複数行、記述していくことになります。

では、順番に見ていきましょう。

文字コード　charset

『文字化け』に絡んでくる部分なので、
しっかりと目を通して下さいね。


まずは、『文字コード』というのが何かというのを、
説明しますね。

あなたは今まさに、文字を見ていますが、
コンピューターは元々、
0 か 1 かの数字の羅列によって処理されていますよね。

処理結果を表示する際、
人が見て分かる文字として表示するのに、
この数字の組み合わせはこういう文字の表示にしましょう、
という決め事が、
システム毎に違っていたのでは具合が悪いので、
それを統一する「取り決め事」が、
『文字コード』なんですね。

その「取り決め」が、世界的に、幾つもの種類があります。

HTML 文書においても、
どの文字コードによって書かれているか、
それを明記する必要があります。


＜META HTTP-EQUIV="Content-Type"
　CONTENT="text/html; charset=shift_jis"＞

と、この様に記述します。
（長いので改行していますが、通常１行で記述します。）

使っているのは、「 SHIFT-JIS 」です。
（ " charset= " の後ろの部分に記述しているのが文字コードです。
character キャラクター＝文字・ set セットということです。）

通常のウェブ・ページなら、
「 SHIFT-JIS 」で OK です。


日本語の文字コードとしては、
iso-2022-jp
SHIFT-JIS
EUC-JP
UTF-8
等あります。

文字コードに関しての詳しいお話は、
ここでは割愛しますが、
たまに、
「文字化けして見れない」、ってことがあると思います。

これは、ファイル作成時の文字コードと、
読み込みの文字コードが一致していないからですね。


普通、「文字コード」なんて意識しませんが、
ウェブ・ページ作成時に、
どこからか仕入れたテンプレートなんかを使う時には、
要注意です！


どこがどうなると『文字化け』するのか。
ちょっと、例を挙げてみます。

文字化け

HTML 講座の初回で「こんにちは！」と表示した HTML を使いますね。


ファイルをテキスト・エディタで開くと、
前に紹介した TeraPad なら、右下を見て下さい。

下図で赤丸で囲んだところです。
この様に、「 SJIS 」と表示がありますね。

この“ファイルそのもの”で使っている文字コードが、
「 SHIFT-JIS 」になっているということです。

この、「 SHIFT-JIS 」になっている HTML ファイルの、
META タグの『 charset 』を、別のものに変えるとどうなるか。



《ブラウザの表示結果》


と、この様に、ブラウザで表示すると文字化けしてしまいます。

「 SHIFT-JIS 」のファイルを、
「 UTF-8 」の文字コードで表示しているからですね。

そしてもう一つ。

この作成したファイル自体、
作成時には「 SHIFT-JIS 」で作成していますから、
ファイルをテキスト・エディタで開く際、
別の文字コードで開くようにするだけでも、
ファイルが文字化けしてしまうんです。



日本語で「こんにちは！」と入れたところが文字化けしてます。

EUC-JP や UTF-8 だと、日本語部分が文字化けしますが、
これを Unicode で表示すると、完全に何が何か分からなくなります。




PHP というプログラミング言語等、
動的にページを生成したり、作用する、
プログラミング言語を使用している場合を除き、
普通に作成する HTML ファイルなら、
多くの場合、「 SHIFT-JIS 」で作成しますので、
特にそれほど気にしなくても、ほとんどの場合大丈夫ですが、
どこからか仕入れたテンプレートは、
ファイルそのものの文字コードが、
「 SHIFT-JIS 」等、
日本語環境に適切な文字コード以外のものに、
なっていることもありますから、
コンテンツを入れていったり、実際に使用される前に、
ファイルそのものの文字コードと、
HTML で指定している文字コードとを、
確認した方がいいでしょう。

ファイルと文字コードの関係、お分かり頂けましたでしょうか。

ブラウザでの表示で文字化けしている場合、
[ 表示 ]　＞　[ エンコード ]
で、文字コードの選択を変えてやると、
多くの場合は正しく表示されます。


『ブログ』の文字コードが何になっているか。

ブログを表示した状態で、
エンコードで、現在何のコードが選択されているか、
また、ソースを表示してみたりして、
確認してみて下さい。

最新情報をお伝えしていきます。
『 Gadget-Project Newsletter 』

編集後記

メンバー・サイトの Gadget-Project Secret で
ダウンロードして頂けるウェブ・サイト・テンプレートは、
元々アメリカでデザインされ、作成されたものですので、
ファイルの文字コードも違っていました。

メンバーの方に、文字コードのこととか気にせず、
文字化けなく使って頂くために、
HTML コード部分も全て、
SHIFT-JIS に揃えています。

日本語環境でそのままお使い頂けますので、
どうぞご利用下さい。

Gadget-Project　瀬尾　和弘

ご意見・ご感想、何でも結構です！
お気軽にメール下さいね！

お待ちしております。
info@gadget-project.jp

ということで、
次回もお楽しみに！！

See You !!