英語ページの作り方

普通の日本語のホームページが作れるようになったら、英語ページ(英語サイト)を作ってみましょう。半角のアルファベットや数字だけ(ASCII文字)を使えば、まずどのパソコンでも問題なく表示されます。しかし、知らないうちに全角スペース等が入ってしまいます。英語ページを作成する時の注意事項を書いてみました。

英語ページ(英語サイト)を作成するには

サーバーの写真

英語ージとはどのようなものでしょうか。簡単に言えば半角のアルファベットと数字と基本的な記号だけ(ASCII文字)を使用したページです。

使用する文字が半角のアルファベットや数字や基本的な記号だけなら、文字コードは何であっても問題ではありません。

実際、欧米のホームページの中には、 文字コード楽天 を全く指定していないものが多くあります。アルファベットと数字と基本的な記号だけで作ったページは、英語で記述すれば基本的に英語のページと認識されます。

文字化けの問題

しかし、日本語等があると、文字コードの指定が的確でないと、文字化けが発生する場合があります。Shift-JISやUTF-8は日本語も表示できますので、全角文字等があると文字化けの問題が起こることがあります。

使用する文字が半角のアルファベットや数字や基本的な記号だけ(ASCII文字)なら、文字コードは何であっても問題ではありません。

IEやFirefox等のブラウザで、強制的に文字コードをISO-8859-1にして見てみてください。何も文字化けが無ければ、問題はありません。英語ページとして認識されるし、世界中のどんなブラウザやパソコンでも問題なく表示されます。

的確な文字コードの指定

文字化けを起こさない為には、メタタグで次のように文字コードの設定もしましょう。これはヘッドタグの先頭に書きます。たまにタイトルタグの後に書いてあるページがあり、タイトルが文字化けしていることがあります。

次のようにメタタグを指定しておけば、ホームページ作成ソフトやブラウザで表示した時、文字化けを事前にチェックできます。文字化けしていれば見えるところはすぐにわかります。

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

HTMLファイルの書き出し部分の英語の指定は次のようにします。XHTML 1.0 Transitional の例を次に示します。

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

UTFなら多言語のページを作れます

英語だけでなく、将来は多言語でもページを作成する予定なら、文字コードは「utf-8」にした方が良いかも知れません。英語だけしかなくても、「utf-8」を指定してもかまいません。最近は、「utf-8」のページが多くなっています。

「utf-8」というコードは多言語を扱うためのUnicodeの符号方式のひとつです。文字コードを「utf-8」で記述することで、多言語での表示が可能になります。日本語混じりの英語ページや英語混じりの日本語ページなどにも向いています。

ソースコードのチェックも忘れないように

英文ページを初めから作るのなら問題はありませんが、普通は既存の日本語ページから変更して英語ページを作る場合が簡単です。

この場合は、全角文字の削除や英語への翻訳忘れが頻繁に発生します。日本語は見える部分にだけ存在するのではありません。見落としやすいのが、画像等の代替テキストです。alt="画像の説明"というのがありますが、これは普通の画面上に出てきません。タイトルタグやメタタグの中にも日本語があることがあります。

HTMLソースを直接編集して、漏れが無いかどうかをチェックしましょう。うっかりタグを消してしまわないように注意しましょう。スタイルやフォントの指定やMETAタグやTITLEタグ等の編集にはデザイン画面では見えないので、ソースを見ておくことはとても重要なことです。

文の中の余白の設定のしかた

画面をレイアウトする時、文中に少しの余白が必要な時、日本語のページの場合は全角スペースを並べると簡単にできますが、半角スペースを並べてもうまく表示できません。この場合はソース編集で特殊文字「&nbsp;」を入力します。

よく使う特殊文字の入力方法(実体参照)

よく使う特殊文字は次の文字実体参照で、HTML4.x以降をサポートしているブラウザで表示することができます。

"=&quot;   引用符

&=&amp;   アンパサンド

<=&lt;   不等号（より小）

>=&gt;   不等号（より大）

 =&nbsp;   ノーブレークスペース

£=&pound;   ポンド記号

¥=&yen;   円記号

µ=&micro;   マイクロ記号

Δ=&Delta;   大文字デルタ

Θ=&Theta;   大文字シータ

Σ=&Sigma;   大文字シグマ

Φ=&Phi;   大文字ファイ

Ω=&Omega;   大文字オメガ

α=&alpha;   β=&beta;   γ=&gamma;   δ=&delta;   ε=&epsilon;   ζ=&zeta;   η=&eta;   θ=&theta;   ι=&iota;   κ=&kappa;   λ=&lambda;   μ=&mu;   ν=&nu;   ξ=&xi;   ο=&omicron;   π=&pi;   ρ=&rho;   σ=&sigma;   τ=&tau;   υ=&upsilon;   φ=&phi;   χ=&chi;   ψ=&psi;   ω=&omega;

翻訳で英語ページを作る方法

ブラウザ上で翻訳をするサイトがありますので、これを使って簡単に英語ページを作ることができます。エキサイト翻訳やグーグル翻訳を使えば簡単です。

サイトのトップページを翻訳させて、そのページにリンクを張るだけですので、とても簡単にできます。