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

ホームページファイルのindex.htmlとＣＳＳを作成

ホームページファイルには html 記事とＣＳＳ（スタイルシート）をひとつづつ作成するといいです。最初のひとつを作成したら、あとはその型をもとにコピペでひな型ができあがるので楽チン簡単です。

けれども、最初の１ページがめためただったら、それを元に作成するページもめためたになってしまうので、最初の１ページは注意して作成するといいと思います。

とりあえず、１ページ目を作成する場合は index.html のページを作成します。この index.html はトップページ用の記事として大事なんで時間をかけて作成するべきです。

たいていの無料ホームページは、最初はデフォルトで index.html ページぐらいしか用意されていませんが、そこに自分でＨＴＭＬのタグを記入しながら記事を作成していくといいと思います。

ちなみにＨＰファイルの種類についてはこちら。
ＨＰファイルの種類

ＣＳＳのスタイルシートも作成

ある程度、index.htmlページを作成したら一度表示してみるといいと思います。スタイルシートでの指定がないので、単なる白黒の文字の羅列になっているかと思います。

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

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

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

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

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

スタイルシートとindex.htmlの違い

ここで最後の拡張子がcssとなっている styles-index.css の部分がスタイルシートの部分となります。

実際のページのＵＲＬはこの拡張子に自分のサイトのＵＲＬがついたもの（http://www.geocities.jp/freehomepageblog/styles-index.css）となりますが省略されています。

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

このスタイルシートは正直、なくてもサイトは作成できますし、実際、使用されていないものも多くあります。白黒の index.html ページにひとつづつ色や位置などを指定していけば、みためは何もかわりません。

けれども、ここの文字は青で大きさは 20px でとかってひとつづつ指定していくと、とっても面倒くさいんです。なので、大きさや色などホームページのみために関することはスタイルシートで一括して指定しましょうって暗黙の了解になっています。

ホームページとして最低限機能するものでしたら、index.html の１ページだけ作成して色やサイズを指定すれば一応は一ページだけの無料ホームページを作成することができます。

ただ、ページを増やして色つきのみやすいホームページにするには、ＣＳＳの設定が大切になってきます。

次のページ：ホームページのフォルダと階層