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

ホームページで使用するファイルにもさまざまな種類がありますが、そのなかでもメインとなるのはhtmlファイルCSSファイル(スタイルシート)です。

ホームページファイルの種類としては、ほかにも .htaccess や jsファイル、cgi や xml、php や jpg、あるいは robots.txt など様々な拡張子のファイルがありますが、htmlファイルと CSS さえあればサイトは機能します。

あまり推奨されてはいませんが、CSSファイルについても、htmlファイルに直接記述することができますので、最低限、htmlファイルさえあれば、サイトを表示させることができます。

例えば、当ホームページでは約160個程度のファイルを使用していますが、このうちの90個程度がhtmlファイル、そして60個程度が.pngなどの画像ファイルとなっており、この2種類のファイルだけで容量の大部分を占めています。

ほかにも、.htaccess や robots.txt などもひとつづつ入っていますが、これらのファイルは必須ではなく、最低限、htmlファイルとCSSさえあれば問題なく表示されます。

htmlファイルの作り方

htmlファイルの作り方ですが、ファイル名を「任意の英数+.html」として新規のファイルを作成し、そこに内容を記述して、書き終わったら文字コードを指定して保存します。
レンタルサーバーなどでは、先にコンテンツを作成してから、保存する際にファイル名を付けるケースもありますがどちらでも同じです。

このファイル名は、そのページ内容をあらわすような名前で作成することをおすすめします。

例えば、犬のページを作成していたら、dog.htmlとか、そんな感じです。
01.htmlなどの番号順で作成する人も多いようですが、検索エンジンでの認識のしやすさを考えると、そのページの内容を表すファイル名を付けた方が検索でヒットしやすくなります。

これはドメイン名やフォルダ名についても同じで、例えば、ペットフードを販売しているとしたら、「food」というフォルダを作成し、そこに/food/dog.htmlとか、/food/cat.htmlなど内容に関連した名前を付けるようにします。

個々のページでは、基本的に任意のファイル名を付けても問題ないですが、トップページ用のファイルについては、「index.html」で作成するのが一般的です。
index.htmlとトップページの関係

無料ホームページでは、デフォルトの状態で既にこのindex.htmlのページが作成されていることが多いですので、そこに内容を上書きする形で作成していくよいでしょう。

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

このホームページの場合は今のところこんな感じになっています。

スタイルシート

このなかで、index.html というページは、このサイトのトップページを表示するファイルにあたります。そして、「hp」のフォルダ内に個別ページを作成しており、このページのファイルもこのフォルダ内に入っています。

一方、赤丸で囲んだ styles-index.css の部分が、色彩やレイアウト幅などの見栄えの部分を指定するスタイルシートの部分にあたります。このCSSファイルの設定を変えるだけで、ホームページ全体のデザインを一括して変更することができます。

このスタイルシートのファイル名は、当サイトでは styles-index.css としていますが、styles.css や index.css など「任意の英数+.css」で作成します。

もし、このCSSを作成しないで、index.htmlページだけを作成した場合、単なる白黒の文字の羅列になってしまいます。

htmlファイルのみの場合

これだけでも、ホームページとして機能するとは思いますが、htmlファイルにスタイルシートも指定することで見やすいホームページになります。

スタイルシートも作成した場合

どのようにスタイルシートを指定するのかというと、htmlファイルのheadタグ内のメタタグに、
<link rel="stylesheet" href="CSSのURL" type="text/css" />
という箇所があるので、この箇所にCSSファイルのURLを指定します。

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

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