ホームページの作り方!具体的な作業手順を画像付きで解説します

プログラミング


HTMLやCSSなどを独学していざ自分の作りたいホームページを作ろうと思ったけど、実際のやり方が分からずに、手が止まってしまいました...。ホームページを作るための具体的な方法や、HTMLを始めとするプログラミングなどの勉強のアプローチが知りたい。



こんなお悩みにお応えいたします。



この記事を書いた人

miyashimo_profile.png

ホームページの制作を実例にプログラミングを実践してみよう!


本投稿をお読みいただきありがとうございます。



この投稿ではプログラミングの独学をしているWEB初心者の方を対象に、 ホームページの制作方法実例と詳しい解説のもとに紹介してゆきます。



今回は『ポートフォリオ』サイトを例に、以下の流れで作業を行います。



▼ホームページ制作の流れ

  1. HTMLの準備
  2. ドメイン・サーバーの準備
  3. FTPソフトの導入・設定
  4. ファイルのアップロード
  5. サイトの公開


▼作業に必要なスキル

  • 初歩的なHTMLのスキル

  • 初歩的なCSSのスキル


プログラミングを勉強するうえで覚えた知識を活かす『実践』は非常に大切ですが、いざ実際に何かを作ろうと思って作業を始めてみると、全体の作業の流れやソフトの使い方などがイマイチ分からずに『手が止まってしまう』という事があるかと思います。



今回はそんなお悩みをもつ多くのプログラミング初心者の方のために、学習サイトでは覚えにくい実際のホームページの立て方、を実例を通して徹底解説してゆきます。



作業には難しいプログラミングの知識が無くても全然OKです。



初心者の方でも一つ一つこなしてゆけば、誰でもホームページを立てる事ができますよ!

そして実際の作業を通し、体感しながら学んでいけば確実にステップアップ出来ますよ!



ぜひ一緒にすすめてゆきましょう!

ホームページ制作の全体像を知ろう!!

ホームページの3つの要素.jpg



ホームページを実際に作るためには、先ずは『HTML&CSS』・『サーバー』・『ドメイン』・から成るホームページの全体像と、それぞれの役割や関係を知る事が大切になります。



そして普段インターネットを通してい見ているホームページとは、基本的にはこの3つの要素から成り立ちます。



それぞれの役割について順番に説明してゆきますね。


ホームページの要素その1:HTML&CSS

HTMLのイメージ図.jpg


私たちが普段から見ているインターネット上のホームページは、通常『HTML』と『CSS』というプログラミング言語を使って表現されています。



HTMLは『ホームページの内容』を、CSSは『ホームページの見た目』をそれぞれ担っており、世の中の多彩なホームページは、基本的にはこれらの組み合わせで表現されています。



※便宜上HTML・CSSをプログラミング言語と表現していますが、厳密にはHTMLはマークアップ言語、CSSはスタイルシート言語という分類になり、少し異なります。(ぶっちゃけ最初は細かな言い方の違いとかは気にしないで大丈夫ですよ!)



それ以外にもWEBページに動きを持たせる『Javascript』や、複雑なサービスを作るための『PHP』『Python』『Ruby』などのプログラミング言語も存在します。また、ブログであれば『Wordpress』というソフトが有名ですが、こちらはPHPで作られています。



この様にホームページを作るためには様々な手段が存在していますが、基本的にはHTMLとCSSを使用します。



本投稿ではプログラミング(HTML&CSS)の学習をしている方を前提として、HTML&CSSのみを使用した最もシンプルな形のホームページの作成方法について紹介してゆきます。Wordpressを使ったブログサイトの構築方法などは、こちらで紹介していますので、気になる方はぜひ参考にしてみて下さいね。


▼関連記事

ブログの作り方を徹底解説!エックスサーバー+ワードプレスの組み合わせで誰でも簡単にブログが開設できる方法を紹介いたします!


ホームページの要素その2:サーバー

ホームページを開設するためにはインターネット上のホームページの置き場所が必要になりますが、この際に使われてるのが『サーバー』です。そして通常これらはレンタルサーバーという形で管理会社に契約して利用します。



レンタルサーバーを分かり易く説明すると

「管理会社が所有しているどこかの施設のどこかの部屋に置かれたパソコン」

になります!!



▼サーバーのイメージ。どこかの部屋でキンキンに冷やされています。

サーバーのイメージ.jpg



ここに置かれたパソコンのHTMLやCSSなどのファイルを、インターネットを経由してみることになります。



そしてこのパソコンの事をサーバーと呼びます。


ホームページの要素その3:ドメイン

ドメインのイメージ.jpg


ドメインはホームページに辿り着くためのインターネット上の住所になります。

そしてサーバーと同様に、管理会社に契約する形で利用します。


ドメインは「〇〇〇〇〇.com」の様な形で発行されるもので、
サーバーと組み合わせることでホームページのURLにすることが出来ます。


基本的にはこの3つがあればホームページが作れますよ!

順番に説明させて頂きましたが、ホームページを立てるためには

『HTML&CSS』+『サーバー』+『ドメイン』

この3つ要素から成り立っています。


本当にそれだけ??もっと知らなきゃいけない事あるんじゃないの??


もしかしたら既に学習を進めた方はもしかしたら



『それだけ?JavascriptとかPHPなどのプログラミング言語も使うのでは?』

『データベースとかあるじゃん!!

『もっとそういうのも使いこなさないといけないのでは!?』



と思われたかもしれません。



確かにそれらプログラミング言語やデータベースなどの技術を有効に組み合わせることで、

機能的なホームページやWEBサイトを構築したり、動きのあるカッコイイ見た目のサイトを作ることが可能です。



ですが最初から組み合わせると実践のハードルが高くなり、必然的に学習にかかるコストも高くなるためおススメは出来ません。



最初は『実践』のハードルを下げて、学習と実践のサイクルをテンポよく行っていく事がプログラミング学習のポイントです。なので最初は『小さく学んで、小さく実践』していく事を心がけて、確実に覚えて確実にステップを踏んでゆきましょう!



ぶっちゃけ、基礎が固まればプログラミング学習も効率的になってくるので、JavascriptやPHPなどの学習を始めるのは後からでも全然遅くは無いですよ!

ホームページのファイルを準備する


それでは具体的にホームページ公開の作業を進めてゆきましょう!!


この投稿で作るもの

まず初めに、この記事では『ポートフォリオサイト』を作りたいと思います。

そしてこの制作物を目標に、各種手順の解説を行いたいと思います。



▼ポートフォリオサイトとは

ポートフォリオサイトとは、主にWEBクリエイターが自分の作品をウェブ上に公開する事を用途としたホームページのことを言います。


portfolio.jpg



今回は「ポートフォリオサイト」を実例としたホームページ制作の紹介となりますが、投稿を読まれている方の中には、実際に作りたいものと方向性が異なる方も居るかもしれません。その場合は『企業ホームページ』や『お店のホームページ』など、自分が目標とすべきホームページの形に置き変えて考えてみて頂ければと思います。


サンプルHTML&CSS

今回のホームページの制作手順についてご説明するにあたり、 ホームページのサンプルを用意させて頂きました 。


▼ポートフォリオのHTMLとCSSがセットになっています

ポートフォリオサンプル.png



下記のボタンを押すとサンプルのHTML&CSSが含まれたzipファイルをダウンロードすることが出来ます。



サンプルを見る

※ボタンを押すとサンプルサイトが別ウィンドウで開きます



ダウンロードする

※ボタンを押すとダウンロードが始まります



この投稿を見ている方の中には既にご自分でHTML&CSSを書かれている方も居るかもしれません。

HTML&CSSのホームページは基本的に公開する方法は同じなので、ご自分で作成されたファイルを使って公開作業をしてもよいかと思います!!

ドメイン・サーバーの準備

続いてドメインとサーバーの準備をしたいと思います!

今回は学習用途として無料のレンタルサーバー『XFREE(エックスフリー)』について紹介したいと思います!



エックスフリーは国内シェア率No.1のレンタルサーバー『XSERVER(エックスサーバー)』と同じ運営会社が提供している無料で使えるレンタルサーバーになります。



エックスフリーは無料ながらもHTMLやPHP、MySQLなどのデータベースやWordpressが利用できる様になっていますが無料のため広告が入るという制約もつきます。



無料のため広告は付いてしまいますが、今回の用途には足りるスペックだと思いますので、今回はこのエックスフリーを使ってホームページの公開をしてみたいと思います。



本格的にWordpressでブログを始めたい、公開を前提にした広告無しのレンタルサーバーが良いという方には、月額900円(税抜)から利用出来る高機能レンタルサーバー『XSERVER(エックスサーバー)』がオススメですよ!


エックスサーバーについては、下記の関連記事でも紹介していますので気になる方はチェックしてみて下さい。


▼関連記事

Wordpressのブログ開設やWEBサイト・WEBサービスの公開で使うレンタルサーバーなら「エックスサーバー」がおすすめです


無料サーバー『エックスフリー』を使ったドメイン・サーバーの準備方法

早速エックスフリーを導入してホームページを設置するための環境を用意してゆきましょう!


エックスフリーの「無料レンタルサーバー新規お申し込み」から登録の手続きを進めてゆきます


▼メールアドレスを入力して「確認メール送信」ボタンを押しましょう

無料サーバー『XFREE(エックスフリー)』の登録方法①.png


▼登録したメールアドレスに【お申し込みURL】が届くので会員情報を入力してゆきます

無料サーバー『XFREE(エックスフリー)』の登録方法②.png


▼会員情報が完了したら登録したら「ログイン」ボタンを押してログイン画面に移動します

無料サーバー『XFREE(エックスフリー)』の登録方法③.png


▼会員登録が完了するとメールアドレスに会員情報が送られてくるので、ID(またはメールアドレス)・パスワードを使ってエックスフリーにログインします

無料サーバー『XFREE(エックスフリー)』の登録方法④.png


▼初回ログイン時には「サーバーID」の登録を求められるので、任意の内容を入力して登録を完了させます

無料サーバー『XFREE(エックスフリー)』の登録方法⑤.png



初回登録まで完了したらエックスフリーの会員登録作業は完了になります。

続いてはHTMLを利用するための手続きを行います。



▼左にある「無料レンタルサーバー」をクリックし、ご利用状況一覧のHTML欄にある「利用を開始する」ボタンを押してHTMLの利用を開始します

無料サーバー『XFREE(エックスフリー)』の登録方法⑥.png


▼初期設定の完了画面に移動したらOKです

無料サーバー『XFREE(エックスフリー)』の登録方法⑦.png



以上でエックスフリーの設定作業は完了になります!


WEBブラウザでサーバーにアクセスしてみよう!!

サーバーの設定作業が完了したらサーバーにアクセスしてみましょう!!



レンタルサーバーには『初期ドメイン』というものが割り当てられているため、通常この初期ドメインを利用し、httpから始まるURLの形式でサーバー(ホームページ)へのアクセスが可能になります。



つまり、ここからは普段のインターネットと同じでChromeやSafariなどのWEBブラウザを使えばサイトにアクセス出来るという事でもあります。



さっそくエックスフリーの初期ドメインを確認して、サーバーにアクセスしてみましょう!



▼まずはご利用状況一覧メニューHTML欄にある「管理パネルログイン」ボタンを押します

無料サーバー『XFREE(エックスフリー)』のFTPアカウント確認方法①.png


▼サーバー管理パネルの『ドメイン設定』を開き初期ドメインを確認します

無料サーバー『XFREE(エックスフリー)』のドメイン確認方法.png



「〇〇〇〇〇.html.xdomain.jp」となっている内容が初期ドメインになります。

このドメインをWEBブラウザのアドレスバーに入力してアクセスしてみましょう!!


▼WEBブラウザのオレンジ枠の所がアドレスバーなのでドメインをそのまま貼り付けます

無料サーバー『XFREE(エックスフリー)』のドメイン確認方法②.png



WEBブラウザで上の画像の様な状態が確認出来ましたでしょうか。



「このウェブスペースへは、まだホームページがアップロードされていません。」



と表示されている事と思いますが、これは、サーバーに何もファイルがアップロードされていない状態を示す、エックスフリーの初期状態になります。



しかし、ここの場所に公開したいホームページのファイルをアップロードすれば、URLを通してアクセスできる様になるという事でもあります。そして、WEBブラウザを使いドメインを通してサーバーにアクセス出来る所までは確認ができたので、後はサーバーにHTML&CSSにファイルをアップロードするだけでもあります!


サーバーの接続情報の確認

サーバーの設定作業は完了しホームページの設置準備が整いましたが、次の作業に移る前にサーバーの接続情報について確認しておきましょう!



後で解説しますが、サーバーにファイルをアップロードするために「FTPソフト」を利用する必要があります。そしてこのFTPソフトを使用するためにはサーバーの接続情報が必要になります。サーバーの接続情報は、次の手順で確認します。





▼サーバー管理パネルの「FTPアカウント設定」のメニューを開きます

無料サーバー『XFREE(エックスフリー)』のFTPアカウント確認方法②.png


画面を開いたら次のことを確認します。


  • アカウント名

  • FTPホスト

  • パスワード


これらの情報は『FTPソフト』を使ったサーバーへの接続時に使用しますのでメモ帳などに控えておくようにしましょう。また、メニューの「編集」を押すとパスワードが登録できるので登録を行ったうえで、併せて控えておくようにします。



▼「アカウント名」と「FTPホスト」について確認しましょう!!

無料サーバー『XFREE(エックスフリー)』のFTPアカウント確認方法③.png


▼「パスワード」も登録して控えておくようにしましょう

無料サーバー『XFREE(エックスフリー)』のFTPアカウント確認方法④.png



『アカウント名』『FTPソフト』『パスワード』、以上の3点を控えておけばサーバーへの接続の準備は完了です!!



次の項ではFTPソフトの導入について解説してゆきます。

FTPソフトの導入

続いて『FTPソフト』の設定を行います。


FTPソフトはサーバーにHTMLファイルをアップロードするために必要な、ファイル転送用のソフトになります。今回はWindows、Mac両方のパソコンで利用ができる『FileZilla』という無料のFTPソフトを使用してゆきます。


導入手順

さっそく無料のFTPソフト『FileZilla』をパソコンにインストールしましょう!!

まず、以下のサイトから日本語版のファイルをダウンロードします。


▼FileZilla日本語版のダウンロード

FTPソフト『FileZilla』日本語版ダウンロード


WEBページを開いて少し下の方に進むと『FileZilla_Client』と書かれた場所が出てきますので、一覧から自分のパソコンにあったバージョンを選択し、ダウンロードします。


▼自分のパソコンの環境にあったバージョンを選びましょう!!

FTPソフト『FileZilla』のインストール方法①.png


▼ダウンロードしたファイルを実行して『FileZilla』をパソコンにインストールします

FTPソフト『FileZilla』のインストール方法②.png


▼インストール時に難しい選択肢などは無いのでサクサク進めてしまって大丈夫ですよ!

FTPソフト『FileZilla』のインストール方法③.png


サーバーへの接続

FileZillaの導入が済んだら今度はファイルをアップロードするためにサーバーに接続をします。

前の手順で控えておいた『サーバーの接続情報』をここで使用することになります。


FileZillaを起動して、次の作業を行ってゆきます。


▼先ず「ファイル->サイトマネージャー」のメニューを選択します

FTPソフト『FileZilla』の設定方法①.png


▼サイトマネージャーを開いたら「新しいサイト」を選択して『サーバーの接続情報』を入力してゆきます

FTPソフト『FileZilla』の設定方法②.png



ここで設定する内容は次の通りです



①ホスト

先ほど控えておいた「FTPホスト」の内容を入力します

例)sv3.html.xdomain.ne.jp


②ユーザー

先ほど控えておいた「アカウント名」の内容を入力します

例)miyashimo.html.xdomain.jp


③パスワード

先ほど控えておいた「パスワード」の内容を入力します



以上の入力が済んだら『接続』ボタンを押します。



▼「接続」ボタンを押すと次のポップアップが表示されるので「OK」を押します

FTPソフト『FileZilla』の設定方法③.png



設定が正しく通ると無事にサーバーに接続することができます。

またソフトの上部に「ログインしました」等のメッセージを確認することが出来ると思います。


ここでFileZillaの使い方について触れてゆきましょう。


FTPソフト『FileZilla』の基本的な使い方

FileZillaのソフトを立ち上げると何やらいくつかの枠を見る事が出来ますが基本的には次の様な構成になっています


1.ログ

上部のFileZillaのログ(=メッセージ)を表示する場所です。

主にサーバーとの接続の状態やファイルをアップロードした時の結果などを表す場所です。

また先ほどの接続作業の様にで失敗した場合などはエラーメッセージを表示してくれます。


2.ローカル

ローカルのデータを表示しています。そしてローカルとは「自分のパソコン」を表す場所です。

基本的な見方はパソコンと同じで、選択したフォルダ内のファイルを一覧で表示します。


3.サーバー

サーバーのデータを表示しています。

こちらも「2.ローカル」と同じで選択したフォルダ内のファイルを一覧で表示します。


▼左側がローカル(自分のパソコン)のフォルダで、右側がサーバーのフォルダを表しています!

FTPソフト『FileZilla』の設定方法④.png



ホームページを公開するためには自分のパソコンにあるHTMLやCSSなどのファイルをサーバーにアップロードする必要があります。



そしてFTPソフト『FileZilla』はこのアップロードを行うために必要なソフトとなります。



以上でFileZillaの解説は終わりになります。

次のステップではいよいよ、FileZillaを使ってサーバーにファイルをアップロードする方法について解説してゆきます。

ファイルをアップロードしよう!!

それではいよいよ、ホームページ用の『HTMLファイル』をサーバーにアップロードしてゆきましょう!



アップロードには、先ほどのステップで設定したFTPソフト『FileZilla』を引き続き使用します。



まず、左側の『2.ローカル』の枠で、アップロードするHTMLファイルがあるフォルダまで移動します。

具体的には先ほどダウンロードしたサンプルHTMLがあるフォルダです。


▼FileZillaの左側の枠が自分のパソコンを意味しています

実践ホームページHTML&CSS_アップロード方法①.png



次に右側の『3.サーバー』の枠でサーバーに接続します。


サーバーに接続した時点のフォルダは『ドキュメントルート』になっています。

ドキュメントルートとはホームページを公開するためのフォルダを指す言葉で、実際にこのフォルダに置いたファイルを、URLを通してWEBブラウザから見れる様になります。


詳しい説明は今は省略しますが、エックスフリーの場合はサーバーに接続した時点で表示しているフォルダが『ドキュメントルート』となります。


そしてそのフォルダでは、次の様なファイルを表示している事だと思います。


実践ホームページHTML&CSS_アップロード方法②.png


「.htaccess」「default_page.png」「index.html」などのファイルが置いてあると思いますが、

実はこれらのファイルは、先ほどエックスフリーの設定の際に見た「初期状態」のページを表すファイルになります。


実践ホームページHTML&CSS_アップロード方法③.png


サーバーに置かれたこれらのファイルが、実際のエックスフリーの初期ページを表しているわけです。

ホームページやサーバーの補足説明になりますが、どの様なサイトも基本的にはこの様に、サーバーに置かれたファイル読み込まれて表示されるという事になります。


そして、この場所が先ほど出てきた『ドキュメントルート』でもあります。


少し話がそれてしまいましたが、この様にエックスサーバー初期状態からでもWEBページのサーバー・ドメイン・HTMLの関係を知ることが出来ます!!


初期ページのファイルを全て削除しよう

少し話がそれてしまいましたがこの「初期ページ」のファイルは、実際にホームページを設置するうえでは、不要な存在になります。



なので、これらファイルは削除してしまいましょう。



FileZillaの右側の枠で3つのファイルを選択して削除します。



▼さようなら、初期ページ

実践ホームページHTML&CSS_アップロード方法④.png



▼削除するとサーバーには何もファイルが置かれていない状態になります

実践ホームページHTML&CSS_アップロード方法⑤.png



ここでもう一度、エックスフリーの自分のサイトの状態を確認してみましょう!



WEBブラウザで『〇〇〇〇〇.html.xdomain.jp』のURLにアクセスします。



すると以下の様な状態が確認できるはずです。



▼英語でForbidden ~ 404 Not Found といった様なメッセージが表示されています

実践ホームページHTML&CSS_アップロード方法⑥.png



上の画像の様な状態を確認することが出来たと思いますが、このメッセージはサーバーに何も置かれていない場合に発生します。



そして、これは先ほどサーバーのファイルを全て削除したために起きた現象でありますが、FileZillaを通してサーバー上のファイルを操作出来たという事の確認にもなります。



サーバーの初期ページのファイルが削除出来たら次のステップに進みましょう。


最後の作業!HTMLファイルをアップロードしよう!

そしていよいよ最後の作業になります。



FTPソフト『FileZilla』を使ったHTMLファイルのアップロードを行ってゆきましょう。



アップロードの方法は簡単で、左側の『2.ローカル』のファイルをマウス操作で全て選択して、右側の 『3.サーバー』の方にドラッグ&ドロップするだけです。早速やってみましょう!!



▼FileZillaはファイルのアップロードが直感的に操作できるので分かりやすいです

実践ホームページHTML&CSS_アップロード方法⑦.png



ドラッグ&ドロップするとファイルのアップロード始まります。

そして全てのファイルのアップロードが完了すると、次のような状態になります。


▼左右の状態が同じになっていることが分かります

実践ホームページHTML&CSS_アップロード方法⑧.png



左側の『2.ローカル』の枠と、右側の『3.サーバー』の枠にはそれぞれ同じファイル・フォルダの一覧が表示されている状態が確認できるかと思います。


以上でファイルのアップロード作業は完了です。非常に簡単ですね!!

さて、サーバーにファイルがアップロードされたということは、先ほど初期ページのファイルの削除を行った時と同様に、サイトの状態が変わっているはずです。



WEBブラウザで『〇〇〇〇〇.html.xdomain.jp』のURLにアクセスして確認してみましょう!



実践ホームページHTML&CSS_アップロード方法⑨.png



FileZillaを通してHTML&CSSのアップロードが無事に出来ていたら、上記の様な状態が確認できたかと思います!


おめでとうございます!!

ホームページの公開

ここまでの作業、本当にお疲れ様でした。



HTMLファイルがサーバーにアップロードされた事で、URLにアクセスすれば誰でもそのホームページを見る事ができる状態が作れたことだと思います。



そしてこれが『ホームページの公開』という事を意味しています!!

ホームページの公開、おめでとうございます!!



あれ、これで終わり...??他にも何か色々手続き的な事とか必要なのでは??



と少々肩透かしに思われたかもしれませんが通常サーバー上(ドキュメントルート以下)のファイルはURLを通せばだれでも見る事ができるので基本的には『アップロード=公開』を意味します。なので、これで終わりですよ!



もちろん、意図したタイミングでホームページを公開するためは、パスワードをかけて限定的に公開するなどの『アクセス制御』や、検証や段階的にリリースしたりするために利用する『テスト環境』など、ホームページ公開には様々な手法が存在しますが、それはまたの機会に紹介できればと思います。

作業を通して


HTMLファイルの準備からホームページの公開まの一連の流れを紹介させて頂きましたがいかがでしたでしょうか。



冒頭でもお伝えした通り、プログラミングは『勉強』&『実践』のサイクルが独学の重要なポイントです。

そして初心者の方がつまづきがちな最初の『実践』の部分を、ホームページを作るという実例を通して紹介させて頂きました。



この投稿の内容を通して作業をして頂いた方が、少しでも実践の部分を感じ取り、ステップアップのキッカケにしてもらえたら嬉しく思っています。



最後までお読みいただきありがとうございました!