チームで制作することが多いウェブサイトのHTML文書は、誰がみてもわかるように、規則やルールに則ってコーディングすることが大切だ。
なので、今回から、必要に応じGoogle HTML/CSS Style Guideに沿って、案内していこう。
最初は、文字エンコーディングとHTMLの基本構造についてだ。
Google HTML/CSS Style Guideについて
冒頭で触れた通り、HTML文書は、誰がみてもわかるように、規則やルールに則ってコーディングするもの。勝手にコーディングすれば、一緒に制作している人たちが理解できず、結果としてWeb制作が遅れたり、バグが生じる原因となる。
そして、「誰も」とは、同じチーム内のスタッフ同士だけではなく、文字通り「誰も」がわかることが原則だ。それは、人間だけではなく、検索ロボットまでもが理解できることが大切。
なぜなら、自分（たち）のウェブサイトは、常に多くの人に検索されることを願っている。それが、企業やショップの売上につながるからだ。
そのためには、Googleをはじめとする検索ロボットに、正しくウェブサイトを認識してもらわなければならない。
それをある程度、世界共通の規則やルールにしたものが「Google HTML/CSS Style Guide」である。原文は英語で書かれているが、Google翻訳で日本語にすれば、何が書いてあるかわかる。
コーディングで困ったときや最新の記述の仕方などについて、参考にするとよい。
文字エンコーディングはUTF-8 BOM無しで
最初は、HTML文書の基本設定について。
文字エンコーディング
普段、「文字エンコーディング」という言葉は意識していなくても、パソコンあるいはスマートフォンで、まれに「文字化け」した画面を見たことがあるだろう。特に、受信メールでありがちだ。
文字化けは、コンピュータ上の文字コードが合っていないために起こる。
では、文字コードとは、そしてエンコーディングとはなにか？
文字コードは、コンピュータ上の各文字に割り当てられるバイト表現のこと。と言われても、なんだかわかりにくいが、
- Shift_JIS
- Unicode(UTF-8 / 16 / 32 etc)
- ISO-2022-JP
- EUC-JP
といった類なら、みたことはあると思う。Shift_JISは、日本語を含む文字列を表現する文字コードだ。
「バイト表現」という言葉はわからなくても、文字コードを統一することで、「文字化け」していた文章が、自身の環境下（パソコンなど）で読めるようになる。
これはウェブサイトでも同様で、世界的に標準の文字コードを使えば、例え日本語の文章であっても、世界中で制作した文書通りに表示されるということだ。
そして、世界標準の文字コードは、当たり前ではあるがShift_JISではなく、UTF-8だ。
ちなみに、エンコーディングとは、文字コード宣言のこと。文書の冒頭で、
「このHTML文書は、UTF-8で書きますよ〜」
と宣言しておくことで、どのパソコンで読んでも同じように表示されるというわけだ。ウェブサイトのソースコードを見ると、冒頭に必ず、
＜meta charset="utf-8"＞という表示があるのが、そう。
BOMとは
BOMは、バイトオーダーマーク（byte order mark）のこと。
文字コードのUnicodeには、「BOM付き」と「BOM無し」の2種類がある。
パソコンの文字は、全て数字とアルファベットの組み合わせでできていて、例えば、平仮名の「あ」は「3042」というコードが割り当てられている。そして、その前にUnicodeデータであるかどうかの符号がついていて、その数バイトがBOMだ。
UTF-8の場合、先頭の3バイト＜0xEF 0xBB 0xBF＞がBOMにあたる。
文字コードについて調べていくと大変長くなるし、趣旨からも外れるので、これくらいにしておく。詳しくは、ウィキペディアでも解説している。
HTML文書では「BOM」は不要のため、UTF-8の文字コードを使用する場合、必ず
「BOM無し」
を選択することが前提となる。
では、書いているHTML文書が「BOM付き」か「BOM無し」かを調べるにはどうしたら良いか？また、新たにファイルを作成するとき、どのように指定すれば良いか？
それは、自身が使用しているテキストエディタで調べられ、または指定できる。
前回紹介したVisual Studio Codeであれば、新規ファイル作成の際、右下の「UTF-8」をクリックすると、ウィンドウ上部で「エンコーディングの選択」ができる。
また、Mac専用のCodEditorも同様で、右下の「Unicode (UTF-8)」をクリックすると、プルダウンで選択できるようになる。
その他のテキストエディタも、概ね同様だ。
HTML文書のデフォルトは、UTF-8 BOM無し（または「UTF-8N」と表示）と覚えておこう。
HTML文書の基本構造
HTML文書は、最低限以下要素で構成されている。
視覚的にわかりやすいように、CodePenというツールを使ってHTMLを書いてみた。左側またはHTMLタブで表示されているのはテキストエディタ、右側またはResultタブで表示されているのはブラウザ、つまりネット上の表示ということ。
See the Pen
basic-html by Kazy (@uraflt)
on CodePen.
左側のテキストエディタ部分を、拡張子「.html」で保存すれば、HTML文書だ。
さらに、これをFTPソフトで契約しているサーバーへアップすれば、誰でも閲覧できるWorld Wide Webのページになる。
では、上から順を追って説明していこう。以下小見出しは、必ずこの順で上から書いていくものだ。
ドキュメントタイプ
1行目は、必ずドキュメントタイプを書く。＜!doctype html＞と書いておくことで、この文書がHTML文書であることを宣言している。
別名は、「DOCTYPE宣言」または「文書型宣言」。
現在はHTML5が標準となるため、このような簡潔な書き方となった。
＜＞で囲まれたものを「タグ」といい、必ず終了タグ＜/＞で閉じられるのが原則。しかし、ドキュメントタイプのように、終了タグが存在しないタグのことを「void要素」という。
改行を示す＜br＞も同様のvoid要素だ。よく、＜br /＞と書く人がいるが、これは間違い。
（Google HTML/CSS Style Guide 3.1.1参照）
htmlタグ
2行目は、htmlタグ。
このタグで囲った箇所がHTML文書であることを示し、さらにlang属性で、「要素の中で使用する言語の種類を明示」している。
早い話、
「このHTML文書は日本語で書かれていますよ〜」
といっている。
これは、ウェブサイトを見る人（人間）に対してだけではなく、検索エンジン（機械）にもわかるように書いてある。また、自動翻訳にも役に立つのだ。
htmlタグは、必ず文末に終了タグがくる。
headタグ
3行目は、headタグ。
HTML文書のヘッド部分を指定するタグで、ここにtitleタグ、metaタグ、linkタグなど、HTMLに必要な情報を書いておくところ。ブラウザ上には表示されない。
CSSの外部ファイルも、情報のひとつとして、ここに外部ファイルからのリンクを書くことで読み込ませる。
一方、javascriptの外部ファイルは、headタグ内で読み込ませると、ページ読み込みスピードが遅くなることから、Googleでは推奨していない。そのため、この下に続くbodyタグの最後に記載するのが、一般的である。
4行目、6行目はmetaタグと言って、文書の情報を検索エンジンに伝える情報を記載するもの。必ず、headタグ内に記載する。
4行目は、「charset属性」で、上述の文字エンコーディングをする。
6行目は、「name属性」の”discription”を記載している。「メタ・ディスクリプション」という言葉を聞いたことはないだろうか？
いわゆる、そのページの概要を書いておくところで、検索の上位に表示されるかどうかの大事な要素だ。概要には、ヒットさせたい検索ワードを散りばめておくことが重要になる。
bodyタグ
bodyダグで囲まれた部分は、Webページの本文。ブラウザに表示されるところだ。
bodyタグ内にあるh1, h2といったタグは、見出し（heading）タグのこと。h1〜h6まであり、数字が小さいほど文字フォントが大きくなる。
ここにも検索ワードを入れることが大切で、検索にも重要なタグであることをお忘れなく。
このように、HTML文書は上から、
- ドキュメントタイプ
- htmlタグ
- headタグ
- bodyタグ
の4つで、構成されている。
これ以外の多くのタグ・文章・画像などは、上記2〜4のいずれかのタグ内に追加して、記載されている。
CSSとjavascript
HTML文書を、より視覚的に表示するものとして、
- CSS (Casading Style Sheets)
- javascript
がある。
CSSは、その名の通り「スタイルシート」で、ウェブページの装飾の役目を果たすコード。HTMLと同じ仲間と言ってもいい。
一方、javascriptは、ウェブページをよりダイナミックに動かすためのプログラミング言語だ。こちらは、別の専門知識が必要となる。
javascriptは、上述の通りプログラミング言語なので、HTMLコーディングの習得には必須ではない。
ここでいう「HTMLコーディング」は、HTML+CSSのことである。
それぞれについては、後日別ページで詳しく解説するが、HTMLの基本構造（上述）の通り、この2つについてはHTML文書内に書かず、必ず別ファイルを用意して、HTML文書内にリンクして作用させるのが標準だ。
このことを「関心の分離」という。
（Google HTML/CSS Style Guide 3.1.5参照）
しかしながら、これには例外があり、ページ読み込みスピードアップのため、短いCSSはHTML文書内に含んで書くことがある。javascriptも同様だ。
とはいっても例外は例外なので、必ずコーディングの基本に戻り、可能な限りCSSとjavascriptは外部ファイルを用意することが望ましい。
この章のまとめ
今回は、
- Google HTML/CSS Style Guideに沿ったコーディングを心がける
- HTML文書は、必ずUTF-8 BOM無し（UTF-8N）で書く
- HTML文書の基本構造は、4つのタグでできている
- CSSとjavascriptは、必ず外部ファイルから読み込ませる
について解説した。
次回は、いよいよHTMLコーディングの基本について書く予定だ。
【本で学習したい人はコレ】
コメント