ホームページ 作り方
だれでもわかるホームページ講座
ホームページの作り方 教えます。
http://www.homepage-guide.com
トップページ >>ホームページ作成の手順

ホームページの作り方をわかりやすく解説します!


　この「簡単ホームページの作り方」は、これからホームページを作成してみようという方や、HTML/CSSについてもっと知りたい方に向けた情報を提供しているサイトです。

ホームページ作成の手引き
このページでは実際にホームページを作成する方法を手順をおって説明していきます。

　さてこれまでの説明でホームページとはどんなものかというイメージが涌いてきたかと思います。いよいよこのページでは、一つ一つ手順を確認しながら、Webページの作成方法を解説していきます。

　簡単なHTML文書のサンプルがありますので、環境さえあれば誰でもWebページ作成の作成からブラウザでの確認までの作業をお試しいただけると思います。
1.始める前の確認

　さて手順を踏んでWebページを作成していくまえに、１つ設定を確認しておいていただきたいことがあります。何かというとファイルの拡張子(.txt, .xlsなど)を常に表示する設定にしておいてください。

　Windowsの初期状態では拡張子は非表示になっています。これは初心者が誤ってファイル名を変更するときに拡張子まで変えてしまうのを防ぐためなのですが、これでは作成するHTMLファイルやCSSファイルの拡張子が指定できません。テキストファイルを作成して保存するときにファイルの拡張子を(.htmlや.cs)に指定して保存したいのです。

　設定方法は「コントロールパネル」→「フォルダオプション」→「表示タブ」まで移動して、「登録してある拡張子を表示しない」のチェックをはずし、「OK」ボタンを押すだけです。
　
2.HTML文書を書く

　まずWebページの元になるHTML文書を書きます。初めての方のために以下のサンプル文書を用意しました。新規にテキストドキュメントを作成して、付属のメモ帳などのテキストエディタで同じように書いてみてください。
(面倒な人はコピペでもいいです)
　大文字・小文字の区別は気にしなくてもいい(ex.HTMLがhTmLでもいい)ですが、必ず日本語の本文以外は半角の英数字記号で書いてください。

 
<HTML>
<HEAD>
<TITLE>はじめてのホームページ作成</TITLE>
</HEAD>
<BODY>
<H1 align="center">はじめてのホームページ作成</H1>
<P>これがあなたにとってはじめての作成するホームページです</P>
</BODY>
</HTML>
テキストの入力例

　文書が書き終わったらファイルの名前を"index.html"にして好きなフォルダに保存してください。
それかテキストファイルのまま保存してファイル名の変更で拡張子を".txt"から".html"に変更してもいいです。
　※ファイル名をindex.htmlにしたのには理由があります。それは後ほどわかります。


どうでしたか?
　簡単だった人、思ったより時間がかかった人いらっしゃると思います。このHTML文書は簡単なものですがページのタイトル、見出し、本文と基本的な要素が詰め込まれています。
保存したフォルダにはindex.htmlというファイルが作成されていると思います。このファイルをダブルクリックもしくは右クリックメニューの開く(&O)を選択すると、ブラウザソフトが開いてこのHTML文書が読み込まれ表示されるはずです。
　ここまで正しく出来た人は以下のように表示されるはずです。赤字の３点を確認してみてください。
3.Webサーバにアップロードする

　色々なアップロード方法がありますが、全員に共通して扱うことの出来るアップロードソフトとしてFFFTPでのアップロードを解説します。
　FFFTPについては、FTPソフト及びWebサーバの選び方の記事をご覧になってください。
　以後の解説での画像は私の使用環境でのスクリーンショットなのでぼかしなどが入っています。ご理解ください。
　

まずFFFTPを起動します。すると下のような画面が表示されると思います。
最初に接続するWebサーバについての設定をするので、「新規ホスト」を選択します。


すると以下のような設定画面が表示されると思います。


入力する項目については、レンタルサーバをレンタルする際に作成したユーザー名や、交付されたFTPアドレスなどです。
　この各項目に該当する文字列を入力して「OK」を押すと、先程のホスト一覧に作成したホストが表示されているはずです。

　次にFFFTPのメイン画面の使い方を解説します。
　まずメニューの「接続」から作成したホストに接続します。設定がうまく言っていれば、下記のような画面が表示されます。ウィンドウが左右に分割されたいますが左側があなたのコンピュータ内のファルダ、右側が接続したWebサーバ内のフォルダです。
　ファイルをアップロードするわけですから、左側でアップロードしたいファイルを選択して、右側の領域にドラッグ＆ドロップするだけです。これだけでアップロードは完了です。
4.Web接続して表示を確認

　最後にWebに接続してアップロードがうまくいったか確認します。
ブラウザソフトを起動して、あなたのファイルをアップロードしたホームページアドレス(http://〜/index.html)にアクセスします。
　アップロードがうまくいっていればローカルコンピュータで確認したのと同じ結果がWebサーバでも表示されると思います。
　Webページは見る人の環境によってかなり表示が変わります。新しく作ったページは知り合いのパソコンや職場のパソコンなどで確認してみるくせをつけてください。
　色々な環境での表示を確認しておかないと、閲覧する人の環境によっては、変な箇所で改行されていたり、テキストのサイズがめちゃくちゃだったりとお粗末な表示になっている可能性があります。　
コラム

今回サンプルのファイル名をindex.htmlにしたのは、index.htmlというファイル名がサイトのトップページを表す特別なファイル名だからです。例えば "http://www.yahoo.co.jp/"などはhtmlのファイル名指定がありませんが、自動的にトップページに移動します。これはトップページが暗黙の了解としてindex.htmlとして作成されているからで、"http://www.yahoo.co.jp/"にアクセスするということは、
実際には"http://www.yahoo.co.jp/index.html"にアクセスしているのと同じなのです。

入門編

HTML編

CSS編
CopyRight(C) 2009- 「ホームページの作り方 教えます。」 All right reserved.