作成するホームページファイル

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

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

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

ほかにも、.htaccessやCSSなどもひとつづつ入っていますが、画像を使わないのであれば、最低限、htmlファイルとCSSさえあれば問題なく表示されます。

CSS(スタイルシート)についても、これはデザインに関する情報を指定するためのものですので、無理やりhtmlファイルに直接書き込めば本来は必要のないファイルです。
けれども、デザイン的な部分のデータは各ページでほぼ同じですので、共通している箇所についてはひとつのファイルにまとめて作成しておくという決まりになっています。

ですので、ホームページで主に作成することになるのは大部分がhtmlファイルで、それに加えてCSSをひとつ作成しておけば、最低限は問題ないということになります。

htmlファイルの作り方

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

このファイル名の作り方にもいろいろあるかと思いますが、そのページ内容をあらわすようなファイル名を作成することをおすすめします。

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

個々のページでは、基本的にどのような英数字のファイル名を付けても問題ないですが、トップページ用のファイルは、「index.html」で作成するのが決まりとなっています。

無料ホームページでは、デフォルトの状態で既にindex.htmlのページがすでに作成されていることが多いですので、そこに自分でHTMLのタグを記入しながら、内容を書き直す形でページを作成していくといいと思います。

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

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

スタイルシート

このなかで、index.html というページは、このサイトでは一番上の階層のトップページの「ホームページの作り方.com」の部分にあたります。

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

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

htmlファイルのみの場合

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

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

スタイルシートのファイル名としては、当サイトでは styles-index.css としていますが、styles.css や index.css など「任意の英数+.css」というのが一般的に使われています。

この画像には hp というフォルダがありますが、このフォルダにこのページも含むトップページ以外の記事が入っています。

とりあえず、トップページの index.html とデザインを指定する styles-index.css のふたつのページを時間をかけて作成することが何より大切です。