【初心者向け】作成したHTMLをサーバーにアップロードする方法

悩む人

コーディングしたHTMLサイトを、URLで公開して、誰でも見れる状態にしたい!
なんかサーバーにアップロードしなきゃいけないらしいけど、やり方わかんない。

といったことでお悩みの方へ向けた記事になります。

この記事を読むメリット
  • あなたのサイトを一般公開し、URLで共有する方法がわかります。
  • 画像つきでわかりやすく解説していますので、素早く理解できます。
目次

【初心者向け】作成したHTMLをサーバーにアップロードする方法

【初心者向け】作成したHTMLをサーバーにアップロードする方法

この記事では、作成したHTMLをサーバーにアップロードする方法を紹介します。

やり方として、大きく下記の2つがあるので、それぞれ紹介します。

やり方①:FTPを使ったアップロード方法
やり方②:FTPを使わないアップロード方法(Xサーバー)

やり方①の方は、インストールやサーバーとの接続が面倒です。
しかし実際の業務でもよく使われる方法なので覚えておいて損はありません

やり方②は大容量ファイルなどの転送には向かないようです。
しかしFTPソフトのインストールやサーバーとの接続の手間が省け、個人で使う分には十分です。

その前に、事前に準備しておくもの

その前に、事前に準備しておくもの

ファイルの転送作業の前に、準備しておいてほしいものがあります。

下記3つです。

1つ目:FTP接続情報
2つ目:FTPソフト
3つ目:HTML・CSSファイル

1つ目:FTP接続情報

FTP接続情報は、サーバー契約時にサーバー会社からもらえる情報です。

サーバーとFTPソフトを紐付けする時に必要になります。

この情報は基本的に、メールで送られてくるはずです。

Xサーバーの場合、「【Xserver】■重要■ サーバーアカウント設定完了のお知らせ」という件名のメールの中に、FTP情報の記載があると思います。

そのメール中の以下3つを使用しますので、すぐ使えるよう控えててください。

  • FTPホスト名(FTPサーバー名)
  • FTPユーザー名(FTPアカウント名)
  • FTPパスワード

ただ、FTPなしでの作業を考えている方は、準備しなくていいです。

2つ目:FTPソフト

続いて、FTPソフトをインストールしておいて下さい。

FTPソフトは様々なものがありますが、オススメは「FileZilla」というソフトです。
本記事では、FileZillaで作業していきたいと思います。

ただ、こちらもFTPなしでの作業を考えている方は、準備しなくていいです。

3つ目:HTML・CSSファイル

がんばってコーディングして作成した、HTMLファイルとCSSファイルをご用意下さい。

やり方①:FTPを使ったアップロード方法

やり方①:FTPを使ったアップロード方法

手順①:FTPソフトとサーバーを紐付け

まずはFTPソフトとサーバーを紐付けします。

FTPソフト「FileZilla」を開き、左上「ファイル」→「サイトマネージャー」を選択。

「サイトマネージャー」を選択

下記のような画面が出てきます。赤く囲んでいる部分に、下記情報を入力して下さい。

  • FTPホスト名(FTPサーバー名)
  • FTPユーザー名(FTPアカウント名)
  • FTPパスワード

入力後、「接続」をクリックします。

入力後「接続」をクリック

FileZillaの画面の右側に、フォルダが表示されたら接続成功です。

左側がローカルのフォルダ、赤く囲んだ右側がサーバー内のフォルダです。

赤く囲んだ右側がサーバー内のフォルダ

手順②:指定の場所にアップロード

FTPソフトとサーバーの接続ができたら、あとは間違えないよう注意しながら、サーバー指定のフォルダにドラッグ&ドロップでアップロードしましょう。

サーバー指定のフォルダとは、下記の場所です。

任意のドメイン名/public_html

どういうことかというと、「あなた自身が任意で設定したドメイン名のフォルダ」の中に、「public_html」というフォルダがあります。

この「public_html」の中に、公開したいHMTL、CSS、画像ファイルなどをドラッグ&ドロップでアップロードしてください。

ドラッグ&ドロップでアップロード

ここで紹介している「public_html」というのは、Xサーバー独自の「公開用フォルダ」のことです。

この「公開用フォルダ」にデータをアップロードすることで、URLとして一般公開できるようになります。
「公開用フォルダ」以外の場所にアップロードしても、公開できないのでご注意ください。

またこの「公開用フォルダ」、サーバー会社によって場所や名前が異なります。
あなたがお使いのサーバーの「公開用フォルダ」は、どこにある何という名前のフォルダなのかは、各自ご確認ください。

ここまでできたら、アップロード完了です。後述の「 アップロードが終わったら、確認しよう 」に進んでください。

やり方②:FTPを使わないアップロード方法(Xサーバー)

やり方②:FTPを使わないアップロード方法(Xサーバー)

続いて、FTPを使わないアップロード方法です。FTPソフトを使う場合よりも簡単です。

Xサーバーと契約している前提で解説していきます。

手順①:ファイルマネージャを開く

Xサーバーアカウントにログインし、「ファイル管理」をクリックします。

「ファイル管理」をクリック

ファイルマネージャが起動します。

ファイルマネージャが起動する

手順②:指定の場所にアップロード

ファイルマネージャを開いたら、あとは公開したいサイトのファイルを、サーバーの指定のフォルダにアップロードしましょう。

サーバー指定のフォルダとは、下記の場所です。

任意のドメイン名/public_html

「あなた自身が任意で設定したドメイン名のフォルダ」の中に、「public_html」というフォルダがありますので、そちらを開いて下さい。

「public_html」を開く

次に、画面上にある「アップロード」を選択。すると、下記の画面が出てきます。

「アップロード」を選択

ファイル名の文字コードは初期値はSJISとなってますが、「UTF-8」に変更してください。文字化けの原因となります。

「ファイルを選択」ボタンを押して、任意のファイルを選択し、「アップロード」をクリック。

もしくはExplorer(Finder)から、ドラッグ&ドロップで点線の箇所に配置してもアップロードできます。

下記のように選択したファイルが反映されていれば、アップロード完了です。

反映されていれば、アップロード完了

アップロードが終わったら、確認しよう

アップロードが終わったら、確認しよう

確認事項①:URLを確認する

アップロードができたら、ブラウザのプライベートモードでURLを確認してみましょう。

つくったHTMLファイルは「public_html」フォルダに配置しました。

URLは下記のようになります。

http://ドメイン名/

public_htmlみたいな文字列は、URLに含まれませんし、必要ありません。

ちなみに余談ですが、この「public_html」フォルダの中に「sub-site」というフォルダを作り、その中にアップロードするとURLは下記になります。

http://ドメイン名/sub-site/

こんな感じで、URLはシンプル。難しく考えることはありません。

確認事項②:CSSや画像を確認する

CSSがちゃんと効いていて、画像が表示されているか確認しましょう。

もし、

  • CSSが効いていない
  • 画像が表示されない

といった場合、ファイルパスを確認する必要があります。

ファイルパスについては、サーバーだからといって、特別な記述が必要になるわけではありません。

例えば、下記のような場合。

FTPソフトの場合の画面
ファイルマネージャの場合の画面

HMTL内、CSSのファイルパスは → <link href=”style.css” rel=”stylesheet”>

HMTL内、画像のファイルパスは → <image src = “imagefile/〇〇.png”>

↑この表記で、反映されます。

僕は以前、「ドメイン名/public_html/style.css」といった具合にムダに詳細なファイルパスを記述し、反映されずに困ってたことがあります。

あわせて読みたい
【経験談】Web制作会社が応募者に求めること【就職】【面接】 コーディングができるようになった。WordPressがいじれるようになった。よし!次はWeb制作会社に就職を目指そう! と考えている方に向けた記事となります。 先日あるWeb...
あわせて読みたい
【体験談】プログラミング完全独学でよかったこと&後悔してること プログラミングスクールって行ったほういいの?独学でもできるのはわかるけど、じゃあスクールの意味ってなんなの?独学やってるけど、向いてないかも。やっぱ諦めてち...
あわせて読みたい
【早く知りたかった】WordPressのムダのない学習方法とは? WordPress完全初心者がまず最初にやるきことってなに?どういう手順で学習するのがオススメ?スクールとか使わなくても、独学でも習得できるの? といったお悩みを持っ...
あわせて読みたい
【初心者向け】差がつく!Web制作ポートフォリオサイト例10選 ポートフォリオサイトで差をつけたい。でもどんなデザインにしたらいいんだろう?なるべく人とかぶりたくない。スタイリッシュで初心者にも優しいサイトないかな。 とい...
目次