HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる!

HTML5 mug
HTML5 mug / slavik_V

 HTML5くらい出来ないとダメかな~とか、ちょっとでもいいからやってみたいな~とか、思っている人は、取り敢えずやってみたらいいと思う。軽い気持ちで。難しいことは抜きにして。ほんとに。見よう見真似で。世の中の道はそんなもんから始まるのだ。

 で、私がHTML5で何かしらを作るときは、まず、以下の雛形から必ず始めている。初めてHTML5をやろうと思ったときに、「最小の雛形」がどこにも全然見当たらなくて本当に困ったから、以下に掲載しておきます。自分の為にも。

■HTML5最小の雛形

[html firstline=”1″ highlight=”” title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ここにページのタイトルを記載</title>
</head>
<body>

ここに本文を書くのだよ。

</body>
</html>
[/html]

 以上! たったこれだけでHTML5として機能してくれる。雛形だけが必要な人は、もうここで引き返してもらって構わない。

 さて、本当に初めての人は動作を見ておいた方が良いだろうから、上記を以下のようにうまくコピーすれば、そのままテキストに貼り付けて利用することができるぞ。メモ帳などで「index.html」を作成しよう。

4093
4093_2

 作成した「index.html」をダブルクリックなどで実行すれば、WEBブラウザ上に以下のように表示されるはずだ。

4093_3
 ※このキャプチャは「Google Chrome」での確認結果

■HTML5では「UTF-8」を用いることが推奨されている

 HTML5さん、初めまして!の人が意外にハマるのが、文書の「文字エンコーディング」の設定だ。HTML5では「UTF-8」を用いることが推奨されている為、前述のようなサンプルが掲載されたページやサイトなどからコードをコピーして「index.html」を作成した際に、

 「あら、実行したら、日本語が全部、文字化けしちゃったわ~」

 なんて現象に陥って、すっかりハマってしまい、折角のクリエイティブな意欲がごっそり削がれるということが意外に珍しくないのだ。

[html firstline=”1″ highlight=”4″ title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ここにページのタイトルを記載</title>
</head>
<body>

ここに本文を書くのだよ。

</body>
</html>
[/html]

 先ほどのサンプルを見てもらえば上記の通り(ハイライトした4行目)、metaタグによって「このページの文字コードは”UTF-8”ですよ」と推奨の通りに宣言しているのだが、肝心の作成した「index.html」ファイル自体が、デフォルトの文字コードである「Shift-JIS(日本語)」などになっていたりして、そのことに気づかず、文字化けが~文字化けが~といつまでもハマってしまうことが少なくないのだ。

 ファイル自体の文字コードは、テキストエディタなどの設定で変えられるのが普通なので、例えば、「秀丸」なら、以下のようにする。これだけOK。

4093_4

 もしも「文字化け」に陥っていたのなら、これで解消されたはずだ。

 あ、あと、HTML内の記述順は非常に重要だ。タイトルだけが文字化けしちゃうの~とハマる人は、以下となってしまっていることがほとんとだ。

[html firstline=”1″ highlight=”4,5″ title=”× タイトルが文字化けしちゃうの~”]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ここにページのタイトルを記載</title>
<meta charset="utf-8">
</head>
[/html]

[html firstline=”1″ highlight=”4,5″ title=”○”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ここにページのタイトルを記載</title>
</head>
[/html]

 日本語(文字列)が登場する前に、ブラウザに対してmetaタグで文字コードの宣言を先に読み込ませる必要がある。「index.html」のどこに書いていても大丈夫、ってことはなくて、必ず上から、一行目から二行目、三行目・・・と読み込まれていくので、それは今後もなるべく覚えておこう。

■HTML5は「IE8」以下(「IE9」未満)に対応していない

 これは教えてもらわなければ、HTML5を初めてやろうって人にはなかなか入ってこない情報だ。そう、HTML5は、「IE8」以下(「IE9」未満)に対応していない為、「IE8」までしかインストールできない「Windows XP」ユーザーには泣いてもらわないといけないということになる。私のお母ちゃんは「Windows XP」ユーザーなので親泣かせになってしまう。

 HTML5には、これまでのHTML4に存在しなかった数多の要素(headerやmain、footerなど)があるのだが、「IE8」以下のブラウザではそのHTML5の新しい要素を完全に無視してしまう。無かったことにされるのだ。

 それでもいい! 「IE8」以下なんて老害は切り捨てる! という人なら良いのだが、まともなサイト作りを目指している人なら、何らかの対策を講じた方が良いだろう。それには、次の記事を参照してほしい。

 「HTML5は「IE8」以下(「IE9」未満)に対応していない・・・じゃあ、対応させる方法と、その雛形!

 Good Luck!

(平成26年1月30日 アシベズヘア@ashibehair_m)

━ 関連書籍 ━━━

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
HTML5+CSS3の「正しい」使い方を知ることで、新しい時代に対応する応用力が身に付きます。はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。

━ 関連記事 ━━━

  • HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で!
  • HTML5は「IE8」以下(「IE9」未満)に対応していない・・・じゃあ、対応させる方法と、その雛形!
  • HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる!
  • HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる!」への2件のフィードバック

    1. ピンバック: HTML5は「IE8」以下(「IE9」未満)に対応していない・・・じゃあ、対応させる方法と、その雛形! | materialize.jp

    2. ピンバック: HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で! | materialize.jp

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です