このページは、ホームページを作りたいけど何から始めたら良いか分からない初心者向けの内容になっています。サンプルを見ながら実際にテキストエディタで HTML や CSS をちょっとだけ打ち込む（時にはコピーペーストする）ことで、ウェブサイト作成の流れを理解して貰いたいと思います。そして、もっと深く学びたいと思ったら、他のページも閲覧して下さい。
テキストエディタでHTMLファイルを作成する
Windows ならメモ帳、Mac ならテキストエディットが標準でインストールされていますが、あえてそれらを使いません。というのも、Windows のメモ帳は、文字コードを UTF-8 で保存しようとすると必ず BOM が付いてしまうからです。また、Mac のテキストエディットも、BOM 無しの UTF-8 しか保存できないので、エディタの候補から外します。
BOM やら文字コードやらについては、ここでは詳しく説明しませんが、UFT-8 に限らず文字コードによるトラブルの殆どは意図せず起こるので、制作者にしてみれば、まさに「原因不明」のトラブルとなります。ですので、最低でも UTF-8 で BOM の有無を指定して保存出来るテキストエディタを使用して下さい。
お勧めというわけでもないのですが、Windows をお使いの方は TeraPad、Mac をお使いの方は miであれば、文字コード UTF-8 の BOM の有無を指定して保存することが出来ます。
テキストエディタの準備が出来たら、まずは、テキストエディタに以下の内容を入力してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<p>世界の皆さん、こんにちは！</p>
</body>
</html>
入力したら、先頭に空白や改行など余計な文字を含んでいないことを確認して、index.htmlというファイル名で保存します。
文字コードの指定は超重要
保存の際に文字コードを指定します。サンプルでは、HTML 内に「UTF-8 ですよ」と記述しており、文字コードもUTF-8 にして保存します。特にどの文字コードを使っても問題はないのですが、HTML 内に「このファイルはこの文字コードで書かれています」と宣言しておかないと、文字化けを起こす原因となりますので、文字コードは確実に宣言し、宣言した文字コードでファイルを保存することを忘れないでください。
また、前述した通り、UTF-8 で保存する場合は BOM の有無を指定するのですが、HTML 文書に関しては BOM 無しで保存した方がトラブルは少ないです。
TeraPadの場合は、
- [ファイル] » [文字/改行コード指定保存]
- [文字コード] » [UTF-8N]（BOM 無しUTF-8 を意味しています）
- [改行コード] » [LF]
mi の場合は、
- [ドキュメント] » [テキストエンコーディング] » [UTF-8]（[モード設定] » [保存]で 「UTF-8 保存時に BOM を付ける」にチェックが付いていなければ BOM 無しUTF-8 で保存されます）
- [ドキュメント] » [改行コード] » [LF]
自分で HTML ファイルを作成している時は問題となることは少ないのですが、外部で配布されているテンプレートを利用する場合などは、普段使っている文字コードと異なる事があるので、特に注意しましょう。
HTMLファイルをブラウザで開く
保存した [index.html] ファイルをブラウザで開きます。ファイルを開いた際にテキストエディタが起動してしまう場合は、
- Windows の場合 [プログラムから開く] » [お使いのブラウザを選択]
- Mac の場合 [このアプリケーションで開く] » [お使いのブラウザを選択]
でブラウザを選択します。当サイトのデモページと同様に表示されていれば成功です。
もしここで文字化けするようだったら、文字コードに問題がある可能性が高いので、以下の項目をチェックしてみて下さい。
- HTML文書の先頭に空白や改行など余計な文字を含まない
- 文字コードは確実に宣言し、宣言した文字コードでファイルを保存する
- UTF-8でBOMの有無を指定して保存出来るテキストエディタを使用する
- UTF-8でHTML文書を作成する場合は BOM 無しで保存する
文字化けせずに表示されるのを確認出来たら、次にソースコードを確認してみましょう。
ブラウザで作成したページを開いた状態で右クリック（ダブルタップ）して、[ページのソースを表示]を選択します（ブラウザによって異なります）。すると別ウィンドウであなたが入力したソースコードを確認することが出来ます。
CSSで見栄えを修飾する
次に、サンプルページを修飾してみましょう。HTMLを修飾するには、CSS（カスケーディングスタイルシート）を利用します。今回はhead要素内に、p要素の背景色を黒、文字色を白にするスタイルシートを記述してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<style>
<!--
p {
background-color: #000000;
color: #ffffff;
}
-->
</style>
</head>
<body>
<p>世界の皆さん、こんにちは！</p>
</body>
</html>
先ほどの見栄えと異なり、背景色と文字色が変更されて表示されているはずです。HTMLが文書の構造を記述するのに対し、CSSはHTMLの見栄えを修飾する役割を果たします。
ここまで出来たらHTMLを作成する準備は完了です。あとは当サイトのコンテンツや、他のウェブサイトでHTMLやCSSの記述方法を学んでください。
World Wide Webに公開するには
このようにして作成したHTML文書を実際に公開するには、Web上でアクセス可能なホームページスペースと、ファイルをアップロードするためのFTPソフトが必要になります。
ホームページスペースは、手軽にウェブサイトを始めるなら、値段も手頃なロリポップ！レンタルサーバー
、複数のサイトを本格的に運用するならエックスサーバー
がお勧めです。
またFTPソフトについては、Windows をお使いの方は FFFTP、Mac をお使いの方は FileZillaが知名度も高く、利用者が多いFTPソフトになります。