HTMLの基礎の基礎10

作成日：2026-04-22

簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。

実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。

【40】確認はブラウザで。

HTML・CSSを、テキストエディターで書いていても「実際はどう表示されるかわからない」ですよね。
これを解決するのは簡単です。
いつも使用しているブラウザで表示させることができます。

データをアップロードしなくても、今書いているHTML・CSSを直接ブラウザで開いて見ることができます。
HTMLファイルをその都度ブラウザにドラッグ＆ドロップして開いてもいいですが、もっと簡単な方法があります。

.html ファイルを右クリック→プロパティ→変更→既定のアプリを選択する。
こうしておけばhtmlファイルをダブルクリックするだけで指定したブラウザが開くようになります。

今書いたHTML・CSSをブラウザに反映させるには、テキストエディタで保存した後→ブラウザのページの更新が必要です。
この方法なら、テキストエディタで書き直すたびにサーバーにアップロードするより、ずっと簡単です。
画面の左側にブラウザを開いておいて、画面の右側でテキストエディターで作業するなどの方法で、確認作業がラクになります。

あくまでもこれは自分のPC上で今書いたHTML・CSSを、ラクに確認する方法であって、まだサーバー上にデータはUPできていません。
完成したら必ずサーバーにデータをUPしないと、実際のホームページには反映されないです。

【41】FTPクライアントソフト

FC2ホームページでは、ファイルをアップロードするためにファイルマネージャーへドラッグ＆ドロップしていましたが、他の方法もあります。
FTPクライアントというアプリを使用して、直接サーバーへファイルをアップロードする方法です。
FFFTP、WinSCP、FileZilla、が一般的によく知られていて長年使われている代表的なFTPクライアントソフトです。

今回はFFFTPの使い方を紹介します。日本語対応、国産のソフトです。
シンプルで、一番使いやすいソフトです。
FFFTPの最新版は「ffftp v5.8」です。
FFFTP - Wikipedia
ffftp v5.8 - GitHub

【42】FFFTPを使う準備

「ffftp-v5.8-x64.msi」がわかりやすいのでダウンロードしてインストールします。
上の画像はGitHubですが、窓の杜からダウンロードしてもいいです。

【43】FFFTPをFC2ホームページに接続するための設定

FC2IDにログインし、FC2ホームページの管理画面を開きます。

そうすると画面の左側に「設定、FTP設定」があるので、クリックします。

FTP接続ロック：安全のために初期はロックされてます。この状態ではFTPで接続できません。
この画面を開いたまま、インストールしたFFFTPを起動します。

FFFTPが起動したら、FFFTPの「新規ホスト」をクリックします。

この窓を開いたまま、FC2側の設定を少し変更します。

「FTP接続ロック」を「ロックしない」にして「設定変更する」をクリック。

「ホストの設定名」は自分が見てわかりやすい名前を書いておく。

「ホスト名（アドレス）」「ユーザー名」「パスワード」はすべてFC2のをコピーしてペースト。

「ローカルの初期フォルダ」は、[...]をクリックして、自分のPC内で.htmlファイルを保存しているフォルダを選択。

「ホストの初期フォルダ」は空白のままでOK！

「最後にアクセスしたフォルダを次回の初期フォルダとする」にチェック入れます。

[ OK ]クリック！

「接続」を押して、実際に接続してみます。
1回目は「暗号化の保存の状態」が出るので→「はい」

こういう画面が出れば接続できています。
左側が自分のPC側、右側がサーバー側（今回はFC2ホームページ）

アップロードしたいファイルを、SHIFTを押しながらマウスか矢印キーでカーソルを動かすと連続した複数ファイルを選択できます。
飛び飛びにファイルを複数選択したい場合は、Ctrlキーを押しながらマウスクリックで複数選択できます。
間違えて選択しても、もう1度Ctrlを押しながらファイルをクリックすると非選択状態にできます。

アップロードします。

同名のファイルがあると「アップロードの確認」が出ます。
HTML・CSSは追記したり書き直すことが多いので、この確認窓は何度も見ることになります。
「新しければ上書き」をよく使います。

もし、接続できない場合は、「設定変更」→「暗号化」→「暗号化なしで接続を許可」にチェックを入れて「OK」。
もう1度接続してみて下さい。

FTP接続でファイルをアップロードするもよし、ブラウザからFC2IDへログインしてファイルマネージャーへドラッグ＆ドロップするもよし。
FTP接続は、タイミングや何かの原因でうまくいかないこともけっこうあります。
そういう場合はファイルマネージャーからUPするといいでしょう。

【今回はここまでです】

今回は「確認はブラウザで」「FTPクライアントソフト」「FFFTPを使う準備」「FFFTPをFC2ホームページに接続するための設定」を解説しました。

次回は「特定の行位置へ飛ぶリンク」「特殊文字」「テキストエディタ（無料）」を解説したいと思います。

＜＜9ページ目：「センターで揃える」「改行させずに割り込ませるspan」「枠の角を丸めるcss」

＞＞11ページ目：「特定の行位置へ飛ぶリンク」「特殊文字」「テキストエディタ（無料）」

2026©denkikaiden