HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / アップロードしてみる
アップロードしてみる
「初めてのホームページ作り」で作成したホームページのデータを、サーバーにアップロードしてみます。

※アップロードの作業を開始する前に、公開する場所の確保とFTPソフトのインストールを済ませておいてください。それぞれ「まずはじめに」のページで説明していますので、そちらを参考にしてください。

今回使用するソフトは、FTPソフト（FFFTP）とブラウザ（インターネットエクスプローラ）だけです。

※Windows98の環境で説明しますので、ご自分の環境に読み替えてご覧ください。
　FTPソフトを設定する
サーバーに接続するための設定を行います。

今回説明する内容は「FFFTP Ver1.89」を使用した例になりますが、他のFTPソフトの場合でも似たような感じで設定できると思います。

まず、「FFFTP」を立ち上げてください。

image

メインの画面とは別に、自動的に上記のような「ホスト一覧」ウィンドウが表示されます。（表示されなかった場合は、「FFFTP」のメニューで「接続」→「ホストの設定」をクリックして表示させてください）

このウィンドウが表示されたら、「新規ホスト」ボタンをクリックします。

image

「ホストの設定」ウィンドウが表示されますので、各入力欄に設定情報を記入していきます。


●ホストの設定名
ここに記入した名前は、「ホスト一覧」ウィンドウで表示されます。好きな名前をつけてください。とりあえずここでは、「マイホームページ」と入力してみましょう。

●ホスト名（アドレス）
サーバーのホスト名（アドレス）を記入してください。（ホスト名は、サーバー側から渡された資料等で確認してください）

●ユーザー名
あなたのユーザーIDを記入してください。（ユーザーIDは、サーバー側から渡された資料等で確認してください）

●パスワード/パスフレーズ
あなたのパスワードを記入してください。（パスワードは、サーバー側から渡された資料等で確認してください）

●ローカルの初期フォルダ
パソコン側の初期フォルダを設定します。この設定を行っておくと、サーバーへの接続が完了したときに、任意のフォルダを自動的に開いておくことができます。入力欄の右にあるボタンをクリックして、ホームページのデータが入っているフォルダを指定しておきましょう。

●ホストの初期フォルダ
サーバー側の初期フォルダを設定します。この設定を行っておくと、サーバーへの接続が完了したときに、任意のフォルダを自動的に開いておくことができます。サーバー側から特に指示がなければ、とりあえずは空欄のままで結構です。

image
※この設定内容はサンプルです。

上記のような感じで入力を済ませたら、「OK」ボタンをクリックして「ホストの設定」ウィンドウを閉じます。

image

上記のように、「ホストの一覧」ウィンドウに「マイホームページ」という項目が追加されたと思います。

これで、サーバーに接続するための準備は整いました。

　サーバーに接続する
※インターネットに接続されていることを確認してください。

それでは、サーバーに接続してみましょう。

「ホストの一覧」ウィンドウで「マイホームページ」を選択し、「接続」ボタンをクリックしてください。（または「マイホームページ」をダブルクリック）

設定がうまくいっていれば、サーバーへの接続が完了します。

「ホストが見つかりません」「ログインできません」といった感じのメッセージが表示された場合は、設定が間違っている可能性があります。資料等を確認して、もう一度設定をやりなおしてください。

image

接続が完了すると、上記のような画面になります。左側の領域が自分のパソコン、右側の領域がサーバーです。

まず、左側の領域を確認してください。「ローカルの初期フォルダ」を設定した場合は、この部分にホームページのデータが表示されているはずです。もし表示されていない場合は、左側の image このボタンをクリックして、ホームページのデータが保存されているフォルダを探してください。

続いて右側の領域を確認してください。右側の状態は、サーバーにより異なります。

※ここから先の説明は一例ですので、あなたの環境に一致するとは限りません。サーバー側から渡された資料等で確認してください。

右側の領域にフォルダが置かれているようでしたら、そのフォルダ名を確認してください。「public_html」、「www」、「html」、このうちのどれかがあれば、そのフォルダがホームページデータの置き場所である可能性が高いです。（私の経験からは「public_html」の場合が多いようです）

該当するフォルダを見つけたら、そのフォルダをダブルクリックして開いてください。

※フォルダが見当たらない場合は、今開いてる場所がホームページデータの置き場所かもしれません。

これで、アップロードするための準備は整いました。

　アップロードする
いよいよアップロードです。緊張の一瞬ですね！

今回は、サーバー側にテスト用のフォルダを新規に作成し、その中にアップロードしてみることにしましょう。

まず、右側の領域（空白の部分）で右クリックしてください。出てきたメニューの中から、「フォルダ作成」を選択します。

image

上記のように「test」と入力して、「OK」ボタンをクリックしてください。右側の領域に「test」フォルダが作成されたら、そのフォルダをダブルクリックして開きます。

次に、左側の領域にあるホームページ用のファイルを全て選択してください。
※「Ctrl」キーを押しながらファイルをクリックすると、複数のファイルを選択できます。

ファイルが選択された状態で image このボタンをクリックするか、選択されたファイルを右側の領域にドラッグします。これでアップロードが始まります。


アップロードが完了したら、ブラウザで確認してみましょう。

ブラウザを立ち上げて、あなたのホームページのURLを入力してください。今回は「test」フォルダにデータをアップロードしたので、ホームページのURL + test ということになります。

image

例えば、あなたのホームページのURLが http://ryukyuocho2.web.fc2.com/ の場合は、

http://ryukyuocho2.web.fc2.com/test/index.html

上記のようなURLになります。


URLを入力したら、「Enter」キーを押してアクセスしてみてください。
どうでしょう？アップロードしたホームページが無事表示されましたか？

ちゃんと表示されたとしたら、、「おめでとうございます！」

　最後に
今回アップロードしたファイルは、練習用のホームページです。ですので、ちゃんと表示されていることを確認したら、サーバーにアップロードされている練習用のファイルを削除しておきましょう。

右側の領域で、削除したいファイル、またはフォルダを選択して、右クリックしてください。出てきたメニューの中から、「削除」を選択します。

これで、サーバーからファイルが削除されます。
※削除の作業は慎重に行ってください。

以上で、「初めてのホームページ作り」のガイドは終了です。
今回練習したことを参考にして、是非あなた自身のホームページ作りにチャレンジしてください。

お疲れさまでした。

ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system