ホームページファイルの作成方法
ホームページで使用するファイルにはさまざまな種類がありますが、なかでもメインとなるのはHTMLファイルとCSSファイルです。
ほかにも、jpgやjs、cgi、xml、あるいはrobots.txtなど様々な拡張子のファイルがありますが、HTMLファイルとCSSファイルさえあればサイトは機能します。
あまり推奨されてはいませんが、CSSに関しては、HTMLファイル内の<style></style>の箇所に直接記述することもできます。そのため、最低限HTMLファイルさえあれば、サイトを表示させることができます。
HTMLファイルの作り方
HTMLファイルは、「任意の英数字＋.html」のファイル名で作成します。大文字でも表示できますが、一般的には英数小文字やハイフン「‐」などを使用します。
例えば、メモ帳を開いてHTMLタグを入力します。
次に、「ファイル」 → 「名前を付けて保存」の順に選択し、「すべてのファイル」を選択して、ファイル名を「index.html」として「UTF-8」の文字コードで保存します。
これでHTMLファイルが完成しました。
このファイルをクリックするとページが表示されます。
ただし、この状態はパソコン上で表示しているため、インターネット上には公開されておらず、閲覧できるのは自分のみです。実際にネット上にサイトとして公開するには、ドメインを取得し、レンタルサーバーを契約した上で、FTP接続などでサーバーにアップロードする必要があります。
また、レンタルサーバーのファイルマネージャーで直接作成する場合も、ほぼ同じ手順となります。
このファイル名については、そのページ内容を表す名前で作成することをおすすめします。
例えば、犬のページを作成する場合は「dog.html」などとします。01.htmlなどの番号順で作成する人も多いですが、ページ内容を表す文字列で作成した方が検索エンジンで認識されやすくなります。
ただし、トップページ用のファイルについては、「index.html」で作成するのが一般的です。
→ index.htmlとトップページの関係
無料ホームページやレンタルサーバーなどでは、デフォルトの状態で既にこの「index.html」が作成されていることも多いですが、その内容を上書きする形でトップページを作成していくよいでしょう。
スタイルシートを作成してデザインを一括指定
スタイルシートのファイル名は、styles.css や index.css など「任意の英数字＋.css」で作成します。
例えば、以下のようにCSSタグでデザインの指定をするスタイルシートを作成します。
このスタイルシートは、色彩やレイアウト幅などのデザイン要素を指定するファイルになります。
ファイル名は「style.css」などとしておきます。
こうすることで、CSSファイルも作成されました。
■HTMLファイルとCSSを関連付ける
この状態で、「index.html」ファイルのHEADタグ内で、スタイルシートファイル「style.css」を参照するように指定します。
メモ帳の「ファイル」 → 「開く」から「すべてのファイル」を選択すれば、「index.html」ファイルを編集できるようになります。
このHTMLファイルのheadタグ内に、以下のように指定します。
<link rel="stylesheet" href="CSSのURL">
スタイルシートの書き方の詳細については、こちらのページをご参照ください。
→ スタイルシートの作り方
すると、サイトのデザインが「style.css」の内容に変更されました。
白黒のデザインから色がついて見やすくなったと思います。
以降、デザインを変更する場合には、このCSSファイルの内容を書き換えるだけで済みます。
個別ページを作成した際にも、それぞれのHTMLファイルに、このCSSファイルを参照するように指定しておきます。そうすることで、スタイルシートの設定を変えるだけでホームページ全体のデザインを一括して変更することができます。
とりあえず、トップページのindex.html とデザインを指定するCSSファイルの2つのページを時間をかけて作成するとよいでしょう。