ホームページの作り方　その１　（24.3.19）（最終更新：28.5.30）

ー無料ソフトで作るー　準備編

はじめに

ホームページを作りたいと思った時、書店で参考本を探すと色々なものがあります。

ホームページはHTMLタグという命令言語でできています。

このタグを使って、windowsパソコンに標準装備されているメモ帳でページを作ることができます。

しかしタグを覚えて作業するのは大変です。余程好きでないと続きません。

それよりホームページ作成ソフトを使った方が簡単です。ワープロソフト（ワード）と同じような感覚で作業ができます。

ホームページ作成ソフトには有料と無料のものがあります。有料のものは何万円もしますから、

「これだけのお金を出して作成ソフトを購入しても、果たして使い切ることができるのか」

「もしかしたら難しくてすぐに飽きてしまうかもしれない」

などの不安がよぎります。

そこで、無料ソフトで「ホームページとはとにかくどんなものなのか」を体験して、

使える機能に不満を感じたらそれから有料ソフトを購入しても良い、と考える方もいると思います。

無料のホームページ作成ソフトには、以前Microsoftが提供していたFrontpage　Express（フロントページエクスプレス）があります。

現在では同社からの入手はできなくなりましたが、このソフトは無償配布ができるようです。

インターネット上でホームページを公開するには、

ホームページ作成ソフトと、作ったページファイルをインターネット上にアップロード（転送）するソフトが必要です。

この解説ページで無料ソフトFrontpage　Expressを入手し、

追加プログラムと、ファイルをインターネット上に送る（転送・FTP）ソフトは、他サイトから入手します。

解説内容は初心者を対象にしています。

作業の流れは、

必要なソフトの入手、導入から始まり、

例題として簡単なページを実際に作成して、自分のパソコン内で閲覧、

無料ホームページサイトに利用登録をして、ファイルをアップロードして、インターネット上でのページを閲覧。

などです。

目次

解説ページが12ページもあるので、自分のペースで少しずつ作業をしてください。

※掲載内容は24.7月時点でのものです。今後リンク先サイトの都合で内容が変更になる可能性があります。

※解説で使用しているパソコン画面はXPの場合です。Vistaでもwin-7でも操作の流れは同じです。

※このページで使用しているパソコン画面は、利用者の使用パソコンの画面表示とは多少違う場合があります。

動作確認

※対象OS

　Frontpage　Expressは、98Se、2000、XP、win-7で動作確認済み。Vista、win8.1、win10は未確認。

　FFFTPは98Se、2000、XP、Vista、win-7　で動作確認済み。

必要なもの

Frontpage　Express　（ホームページ作成ソフト）

jpxsetup.vbs　（Frontpage　Expressの追加プログラム）

FFFTP　（転送ソフト）

解凍ソフト

写真画像ファイル（適当なものを用意して、パソコン内に置く）

ソフトの入手

Frontpage　Express（フロントページ・エクスプレス）

FrontPageExpressは こちら をクリックすると、下図になるので、保存の右の▼をクリック。

名前を付けて保存、をクリック。

下図になるので、保存場所は分かりやすいようにデスクトップにして、保存をクリック。

すると下図の画面になります。

下図のように「ダウンロードの完了後、このダイアログボックスを閉じる」にチェックが入っていると、

ダウンロードが完了したらこの画面は消えます。チェックが入っていない場合は、閉じる　をクリック。

デスクトップに下図のようなアイコンが表示されます。

追加ファイルのダウンロード

Frontpage　Express　だけでも動作しますが、動作制限があるようなので jpxsetup.vbs　も使用します。

[win] 使用法ヒントさんのページから入手させて頂きます。

http://homepage2.nifty.com/winfaq/c/hints.html#949）

このページを開くと下図。

jpxsetup.vbs　を右クリックして、対象をファイルに保存　をクリック。

下図になるので、保存場所はデスクトップを選択して、保存をクリック。

するとデスクトップに下図のアイコンができます。これは追加プログラムです。

FFFTPのダウンロード

FFFTPはパソコン内で作ったホームページファイルを、インターネット上に転送するソフトです。

窓の杜（まどのもり）の下記ページをクリックすると、

http://www.forest.impress.co.jp/library/software/ffftp/

下図が表示されます。DOWNLOAD　をクリックすると下図。

使用パソコンが32bitなら上のもの、64bitなら下のものをダウンロードします。

※使用パソコンのbitの確認
　　win-7の場合、スタートボタン、コントロールパネル、システムアイコンをクリック、下図の画面で確認します。
　　下図の例では64bitです。
　　　

ポップアップブロックを設定しているパソコンでは、下図のように表示されます。

セキュリティ保護のため・・・　と書いてある帯をクリックして、ファイルのダウンロードをクリックすると、

下図が表示されるので　保存　をクリック。

保存先は分かりやすいようにデスクトップにして、保存　をクリック。

しばらく待ってもデスクトップに新しくアイコンが表示されない場合は、

ページの ffftp-1.98e.exe　をクリック。

デスクトップを保存場所にして、保存をクリック。

ダウンロードが完了すると、下図のアイコンが表示されます。

これでダウンロードは完了。

ウイルススキャン

デスクトップにできた３つのファイルの右上でクリックしたまま、左下に移動すると、３つのファイルが選択状態になります。

この上で右クリック、ウイルスソフトでスキャンをクリックして、安全を確認します。

Frontpage　Express（FPE）の解凍

ここでは解凍ソフトとして、＋Lhacaを使用した例を説明します。

解凍ソフトのない方はこちらを参照。

下図のように、FPEのアイコンを左クリックしたまま、＋Lhaca　の上に移動して手を離すと、

下図のようにフォルダが開きます。Frontpage　Expressフォルダをクリックして開くと、

下図のようになります。

デスクトップに保存した追加プログラムfpxsetup.vbsのアイコンを左クリックしたまま、

Frontpage　Expressフォルダの何もない所に移動して手を離す。

Frontpage　ExpressフォルダをProgramフォルダへ移動

jpxsetup.vbsのアイコンがフォルダ内に表示されたことを確認してから、下図のように、上へのボタンをクリック。

Frontpage　Expressフォルダを右クリック、切り取りをクリック。

マイコンピュータをクリック。

ローカルディスク（C）をクリック、

Program Files　フォルダをクリック、

Program Files　フォルダの中の何もない所で、右クリック、貼りつけをクリック。

すると、下図のように、Frontpage　Expressフォルダが表示されます。このFrontpage　Expressフォルダをクリックすると、

下図のようになります。この中の fpxsetup.vbs　アイコンをクリック。

下図になるので、開く　をクリック。

下図になるので、はい　をクリック。

下図になるので終わるまでしばらく待ちます。

ファイルのコピーが終了すると、下図が表示されることがあります。

再起動は後で行うので、この場合は　いいえ　をクリック。

Frontpage　Expressのショートカットの作成

スタートをクリック、プログラムにマウスを合わせて（ポイント）、Internet Explorerをポイント、Frontpage　Expressを右クリック、

ショートカットの作成をクリック。

下図のように、Frontpage　Express（2）　ができるので、クリックしたまま、デスクトップの何もない所へ移動して手を離す。

するとデスクトップにFrontpage　Expressのショートカットアイコンができます。

これでFrontpage　Expressの準備は完了です。

FFFTPのインストール

デスクトップにある下図のアイコンをクリックすると

下図になります。実行をクリック。

すると下図になるので　次へ　をクリック。

すると下図になるので　次へ　をクリック。

下図になるので、ここでインストール先を指定します。

ドライブCに余裕がある場合は下図のままで、標準フォルダの付加　をクリックすると、

下図になります。次へ　をクリック。

或いは、ドライブCに余裕がなくて外付けハードディスク等にインストールする場合はそちらを指定。

下図はEドライブの中にインストールする場合の例。

下図になるので、次へ　をクリック。

後は画面の指示に従ってインストールを完了させます。

準備は以上で完了。パソコンを再起動させます。

フォルダー作成

ホームページ作成に関するものを一つのフォルダに入れておくと便利なので、専用フォルダを作ります。

デスクトップの何もない所で右クリック、新規作成に合わせて（ポイント）、フォルダをクリックすると、

新しいフォルダの文字が反転した黄色いフォルダができます。

フォルダー名を適当に、ここでは例として、HP作成　と文字入力してエンターキーで確定。（大文字・小文字どちらでも可）

デスクトップにFrontpage　Expressショートカットアイコン、FFFTPのショートカットアイコン、HP作成フォルダ、の３つがそろいます。

Frontpage　Expressショートカットアイコン、FFFTPのショートカットアイコン、の２つを、HP作成フォルダの中に入れます。

下図の例では、

Frontpage　Expressのショートカットアイコンをクリックしたまま、HP作成フォルダへ移動して手を離す。

FFFTPショートカットアイコンをクリックしたまま、HP作成フォルダへ移動して手を離す。

その後、HP作成フォルダをクリックして開くと下図のようになります。

ページ専用のフォルダ作成

下図のように、HP作成フォルダ内の何もない所で右クリック、新規作成をポイント、フォルダをクリックすると、

新規フォルダ　の文字が反転されたフォルダができる。

名前を適当に入力。ここでは例として、HP１　と入力してエンターキーを押すと下図。（大文字・小文字どちらでも可）

写真画像を用意する

写真を使わなくてもホームページはできますから不要な方は読み飛ばしてください。

ここでは写真を使う場合の操作方法を説明するので、適当な写真を数枚用意します。

例として、犬の写真　というフォルダに写真5枚を入れてデスクトップに置いてあります。

自分のパソコン内にある写真（マイドキュメント、マイピクチャの中の写真）等を使っても構いません。

フォルダをクリックすると中身の写真アイコンが下図のように表示されます。

　※パソコンの設定によってアイコンの表示は違います。下図は、表示が「並べて表示」の場合です。

写真の右上でクリックしたまま、左下にマウスを移動させると、写真全体が選択されます。

選択された写真の上で右クリック、コピーをクリック。　HP作成フォルダを開いて、

HP１フォルダのアイコンの上で右クリック、貼り付けをクリック。

HP１フォルダをクリックして開くと、写真が表示されます。下図は表示をクリック、写真をクリックした場合の状態。

扱うファイルが多いと操作がしづらくなるので表示を変えます。

表示、一覧をクリックすると、

下図になります。

準備は以上で終了。

加工するファイルはコピーしてから使う

※写真等のファイルは、元のファイルからコピーして、作業フォルダに入れて加工をします。

　元のファイルをそのまま残しておけば、作業フォルダで加工した後で、加工作業をもう一度やり直したい時に困りません。

　コピーではなく、切り取りで移動してから加工すると、元の状態からのやり直しができなくなります。

次のページから、いよいよフロントページエクスプレスの実際の操作に入ります。

※デスクトップに残った　Frontpage　Expressフォルダ　（中身はカラ）はゴミ箱に削除します。

圧縮ファイルのは、予備のバックアップとして残してもいいし、ゴミ箱に削除しても構いません。

・・・・…・…・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次へ