2018.10.11

初心者、ホームページを作る。

コンテンツ

ホームページ制作の初心者がサイト制作者になるまでの話し

私がホームページ制作の世界に入ったのは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のアイコンが作成されるので、
クリックして開いてみて下さい。

現在は何も記述していないので、以下の様に空の状態で開くと思います。
空のTera Pad

こちらは、「ファイル」メニューの中にある「名前を付けて保存」を選択して、
「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のアイコンが作成されるので、
クリックして開いてみて下さい。

インストール直後の為、以下のように何も設定されていない画面が開きます。
FFFTPの画面
右上にある「新規ホスト」を選択して、必要な情報を登録します。

↓

FFFTP サーバ接続情報設定
■ホストの設定名 => 任意の名称を設定。
　※後々管理が大変になるので、どのサーバの設定かが分かりやすい名称にして下さい。
■ホスト名　　　 => ロリポップの「ＦＴＰサーバー」の値を入力
■ユーザー名　　 => ロリポップの「ＦＴＰ・WebDAVアカウント」の値を入力
■パスワード/パスフレーズ => ロリポップの「ＦＴＰ・WebDAVパスワード」の値を入力