ホームページ制作の初心者がサイト制作者になるまでの話し
私がホームページ制作の世界に入ったのは28歳の時で、年齢的には、かなり遅い方だと思います。
さらに、WEBの世界に入った当初は、HTMLもCSSもPHPもMySQLも詳しく知りませんでした。
また、社内にはHTMLとCSSを書ける人間はいましたが、
PHPやMySQLに関する知識を持つ人間がいなかったために、
独学で学習しながらの習得となり、初めはかなり苦労したことを今でも覚えています。
そんな私が、ホームページ制作に必要な知識を習得して、実際にリリースできるまでになった経験を踏まえて、
まずは、極力余分な情報を省いて、実際に簡単なページを公開するまでの流れを説明してみたいと思います。
ホームページ制作に最低限必要なもの
ホームページを制作する上で、最低限用意しておかないといけないものは以下になります。
・サーバー
・ドメイン
・エディタ
・FFFTP
サーバー と ドメイン
まずは、一番重要なサーバーとドメインを用意します。
これらが無いと、そもそもホームページを公開することができません。
サーバーの準備
ホームページを公開するためのサーバーを用意します。
サーバーというのはインターネット上に公開するデータや写真などを入れておく箱のようなものだと考えて下さい。
サーバーの中に必要なデータさえ入れておけば、
この後に取得するドメインに対して、そのサーバーの場所を教えてあげれば、
ホームページを公開できるようになります。
ホームページの公開に利用するサーバーには、
共用サーバー、VPSサーバー、専用サーバー、クラウドサーバーなどいろいろな種類がありますが、
今回は、「共用サーバー」をレンタルすることにします。
使用するのは、安くて評判のいい「ロリポップ」の共用サーバーです。
プランは、「スタンダード」です。
それでは、以下のページを参考にしてサーバーの取得を行ってみて下さい。
ロリポップサーバーの申し込み
ドメインの準備
ドメインを取得する前に、まずはどんなドメイン名にするかを決めなければいけません。
運用開始後のドメイン変更は、非常にリスクが大きいので、
事前にきっちりと決めておきましょう。
ドメインは、ムームードメインという会社で取得します。
それでは、欲しいドメイン名が決まったら、以下のページを参考にして、実際にドメインの取得まで行ってみて下さい。
[ ムームードメインでドメインを取得 ]
※今回は、私は、「hpkaisetsu.com」というドメインを取得して、解説を進めていきます。
サーバーとドメインの紐づけ
サーバーとドメインの準備が完了したら、取得したドメインに対して、サーバーの場所を教えてあげる作業を行います。
この作業を行うことで、取得したドメインを使って、ホームページを公開できるようになります。
紐づけ方法については、以下を参照してください。
[ドメインとサーバーを紐づけ]
ここまで来れば、次は、ホームページを画面に表示するためのHTMLというものを作成して、
さらに、
実際に取得したドメインを使って、ブラウザ上にサイトを表示させるところまで説明していきます。
まずは、エディタというツールが必要になるので、そちらの準備からになります。
↓
エディタ
ホームページというのは、基本的にはHTMLとCSS、画像から構成されています。
このうち、HTMLとCSSの記述は、通常はエディタというものを使ってファイルを編集します。
エディタにはいろいろありますが、
Windowsであれば、「メモ帳」というエディタがデフォルトで入っています。
ただし、「メモ帳」は、非常に使いにくいので、必ず自分に合ったエディタを探して、使用するようにしましょう。
今回は、無料で利用できる「TeraPad」というエディタを使用します。
TeraPadをインストール
まずは、
以下のページよりTeraPadをダウンロードして、インストールしてください。
https://tera-net.com/library/tpad.html
※「窓の杜」や「Vector」からでも、ダウンロード可能です。
インストールが完了したら、
デスクトップ上にTeraPadのアイコンが作成されるので、
クリックして開いてみて下さい。
現在は何も記述していないので、以下の様に空の状態で開くと思います。
こちらは、「ファイル」メニューの中にある「名前を付けて保存」を選択して、
「index.html」という名前でファイルを保存しておいてください。
index.htmlを作成
「index.html」というのは、サイトのトップページを公開するために使用されるHTMLファイルです。
このHTMLファイルをサーバー上にアップロードしておけば、
勝手にサイトのトップページとして認識してくれます。
index.htmlは、上記で作成して貰っていると思うので、
そのファイルに以下の記述を追加して、上書きで保存して下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLサンプル</title>
</head>
<body>
<p>こちらは、HTMLのサンプルです</p>
</body>
</html>
ここまで来たら、次は作成したHTMLファイル「index.html」をサーバー上にアップして、
ブラウザ上から実際に確認してみます。
サーバー上へのアップロードには、FFFTPというツールを使用します。
FFFTPの用意
FFFTPは、作成したHTMLなどをサーバー上にアップロードするために使用するツールです。
FFFTP（エフ エフ エフ ティーピー）をインストール
まずは、
以下のページよりFFFTPをダウンロードして、インストールしてください。
https://forest.watch.impress.co.jp/library/software/ffftp/
インストールが完了したら、
デスクトップ上にFFFTPのアイコンが作成されるので、
クリックして開いてみて下さい。
インストール直後の為、以下のように何も設定されていない画面が開きます。
右上にある「新規ホスト」を選択して、必要な情報を登録します。
↓
■ホストの設定名 => 任意の名称を設定。
※後々管理が大変になるので、どのサーバーの設定かが分かりやすい名称にして下さい。
■ホスト名 => ロリポップの「ＦＴＰサーバー」の値を入力
■ユーザー名 => ロリポップの「ＦＴＰ・WebDAVアカウント」の値を入力
■パスワード/パスフレーズ => ロリポップの「ＦＴＰ・WebDAVパスワード」の値を入力
ロリポップのFFFTPの接続情報の確認方法は、以下を参照して下さい。
[ロリポップ FFFTPの確認]
↓
正常に接続できると、以下のような画面に接続できると思います。
「pkaisetsu.com」がホームページの公開用ディレクトリになるので、そのディレクトリをクリックしてみて下さい。
↓
まだ、ファイルをアップロードしていない状態の為、何も表示されていないと思います。
こちらに、上記で作成したindex.htmlをアップロードしてみて下さい。
※ファイルは、ドラッグして右側の領域にアップロードします。
↓
index.htmlのアップロードが完了したら、
ブラウザから、
http://hpkaisetsu.com/
へアクセスしてみて下さい。
※ドメイン（hpkaisetsu.com）部分は、私が解説用に取得した物なので、
各自で取得されたものに変更して下さい。
↓
画面に「こちらは、HTMLのサンプルです」と表示されれば、公開まで完了です。
本当に基本的なことしか説明していないですが、
取りあえずは、
ホームページの公開についての説明は完了です。
ただ、当然このような簡易ページを公開しても、何の役にも立ちません。
だからと言って、いきなりHTMLとCSSを使って、プロが作ったようなサイトを公開することも通常は不可能です。
そこで、この後は、WordPressというツールを使って、ホームページを公開するための方法を、説明します。
その説明は、以下の記事にまとめてあります。
