簡単な無料ホームページの作り方

初心者簡単な無料ホームページの作り方としては、サンプルの雛形がないと難しいです。自分で一から作成するのは困難だと思いますので、わたしが作った簡単サンプルを使用して実際に作成してみることをおすすめします。

このHPとほぼ同じCSSを用意しましたので、何をどうすればいいのかわからない場合は使用してみて下さい。


(あなたと私のお約束:無料テンプレートを使用することにより、損害あれこれが生じても責任は負いかねますので、自己責任でお願いします。被リンクなどは必要ないですので、自由に使ってください。)


とりあえず、html と css の雛形サンプルふたつを使用してヤフーのジオシティーズ(無料ホームページスペースの簡単比較を参照。)での作り方を仮定して初心者簡単に説明します。

CSSページ(スタイルシート)の作り方

まず、ホームページのデザインの部分を指定する「スタイルシート」の作り方ですが、新規のページにこちらのCSSをコピペで貼り付けて、CSSファイルを作成します。

CSSページの作り方

ファイル名は「styles-index.css」として保存してください。

CSSページ作成保存

こんな感じでページが作成されていればスタイルシートcssのページは完成です。

できたよスタイルシートcss

HTMLファイルも簡単作成

次に ホームページの実際のコンテンツの部分を表示する「html ファイル」の作り方ですが、同じように簡単に作成してみます。こちらのソースをコピペして index.html ファイルを作成します。

CSSページ作成保存

index.html ファイルはデフォルトで存在する場合は編集ボタンをおして上書きを、ない場合はファイル名を「 index.html 」として保存します。編集する際にデフォルトのHTMLソースはすべて削除してからまるまる上のHTMLを上書きします。

このCSSファイルとHTMLファイルを作成すれば、とりあえずはHPが表示されることと思います。こんな感じでそのまま作れば、テンプレートはこのホームページとほぼ同じ構成になるはずです。(追記:最新版が後ろのページにあります。)

HP作成


ちなみに、まったく同じ作り方でfc2の無料ホームページで作成した場合の広告はこのようなわりとちいさめの感じになります。

fc2の無料ホームページで作成した場合の広告

FC2で作成した無料HP

FC2無料ホームページの作り方

どちらのホームページスペースで作成しても大差ないかと思いますが、わたしはジオシティーズで作ることが多いです。当サイトは有料版ですので上部の広告が表示されていませんが、ヤフーのジオシティーズで作成しています。

とりあえず表示させてみてからちょくちょく変更していくのが、初心者簡単な無料ホームページの作り方なんじゃないかなと思います。簡単なサンプルテンプレートですが、多少ともお役に立てれば幸いです。