ホームページファイルの作成方法

ホームページで使用するファイルにはさまざまな種類がありますが、なかでもメインとなるのはHTMLファイルCSSファイルです。

ほかにも、jpgやjs、cgi、xml、あるいはrobots.txtなど様々な拡張子のファイルがありますが、HTMLファイルとCSSファイルさえあればサイトは機能します。

あまり推奨されてはいませんが、CSSに関しては、HTMLファイル内の<style></style>の箇所に直接記述することもできます。そのため、最低限HTMLファイルさえあれば、サイトを表示させることができます。

HTMLファイルの作り方

HTMLファイルは、「任意の英数字+.html」のファイル名で作成します。大文字でも表示できますが、一般的には英数小文字やハイフン「‐」などを使用します。

例えば、メモ帳を開いてHTMLタグを入力します。

HTMLタグを使って文書の作成

次に、「ファイル」 → 「名前を付けて保存」の順に選択し、「すべてのファイル」を選択して、ファイル名を「index.html」として「UTF-8」の文字コードで保存します。

文字コードを「UTF-8」で保存

これでHTMLファイルが完成しました。

HTMLファイルの完成

このファイルをクリックするとページが表示されます。

ページの実際の表示

ただし、この状態はパソコン上で表示しているため、インターネット上には公開されておらず、閲覧できるのは自分のみです。実際にネット上にサイトとして公開するには、ドメインを取得し、レンタルサーバーを契約した上で、FTP接続などでサーバーにアップロードする必要があります。

また、レンタルサーバーのファイルマネージャーで直接作成する場合も、ほぼ同じ手順となります。

このファイル名については、そのページ内容を表す名前で作成することをおすすめします。

例えば、犬のページを作成する場合は「dog.html」などとします。01.htmlなどの番号順で作成する人も多いですが、ページ内容を表す文字列で作成した方が検索エンジンで認識されやすくなります。

ただし、トップページ用のファイルについては、「index.html」で作成するのが一般的です。
index.htmlとトップページの関係

無料ホームページやレンタルサーバーなどでは、デフォルトの状態で既にこの「index.html」が作成されていることも多いですが、その内容を上書きする形でトップページを作成していくよいでしょう。

スタイルシートを作成してデザインを一括指定

スタイルシートのファイル名は、styles.css や index.css など「任意の英数字+.css」で作成します。

例えば、以下のようにCSSタグでデザインの指定をするスタイルシートを作成します。

CSSタグでスタイルシートを作成

このスタイルシートは、色彩やレイアウト幅などのデザイン要素を指定するファイルになります。

ファイル名は「style.css」などとしておきます。

ファイル名を指定して「UTF-8」で保存

こうすることで、CSSファイルも作成されました。

CSSファイルの完成

HTMLファイルとCSSを関連付ける

この状態で、「index.html」ファイルのHEADタグ内で、スタイルシートファイル「style.css」を参照するように指定します。

メモ帳の「ファイル」 → 「開く」から「すべてのファイル」を選択すれば、「index.html」ファイルを編集できるようになります。

「index.html」ファイルの編集

このHTMLファイルのheadタグ内に、以下のように指定します。

<link rel="stylesheet" href="CSSのURL">

CSSのURLの指定

スタイルシートの書き方の詳細については、こちらのページをご参照ください。
スタイルシートの作り方

すると、サイトのデザインが「style.css」の内容に変更されました。

CSSで変更されたデザイン

白黒のデザインから色がついて見やすくなったと思います。

以降、デザインを変更する場合には、このCSSファイルの内容を書き換えるだけで済みます。

個別ページを作成した際にも、それぞれのHTMLファイルに、このCSSファイルを参照するように指定しておきます。そうすることで、スタイルシートの設定を変えるだけでホームページ全体のデザインを一括して変更することができます。

とりあえず、トップページのindex.html とデザインを指定するCSSファイルの2つのページを時間をかけて作成するとよいでしょう。