コンテンツ
ホームページ制作の初心者がサイト制作者になるまでの話し
私がホームページ制作の世界に入ったのは28歳の時で、年齢的には、かなり遅い方だと思います。
さらに、WEBの世界に入った当初は、HTMLもCSSもPHPもMySQLも詳しく知りませんでした。
また、社内にはHTMLとCSSを書ける人間はいましたが、
PHPやMySQLに関する知識を持つ人間がいなかったために、
独学で学習しながらの習得となり、初めはかなり苦労したことを今でも覚えています。
そんな私が、ホームページ制作に必要な知識を習得して、実際にリリースできるまでになった経験を踏まえて、
まずは、極力余分な情報を省いて、実際に簡単なページを公開するまでの流れを説明してみたいと思います。
ホームページ制作に最低限必要なもの
ホームページを制作する上で、最低限用意しておかないといけないものは以下になります。
・サーバー
・ドメイン
・エディタ
・FFFTP
サーバー と ドメイン
まずは、一番重要なサーバーとドメインを用意します。
これらが無いと、そもそもホームページを公開することができません。
サーバーの準備
ホームページを公開するためのサーバーを用意します。
サーバーというのは、インターネット上に公開するファイルや写真などを入れておく箱のようなものだと考えて下さい。
サーバーの中に必要なデータさえ入れておけば、
この後で取得するドメインに対して、そのサーバーの場所を教えてあげれば、
ホームページを公開できるようになります。
↓
ホームページの公開には、通常はレンタルサーバーを利用します。
で、レンタルサーバーには、共用サーバー、VPSサーバー、専用サーバー、クラウドサーバーなどの種類がありますが、
今回は、「共用サーバー」を利用することにします。
使用するのは、安くて評判のいい「ロリポップ」の共用サーバーです。
プランは、「スタンダード」です。
それでは、以下のページを参考にしてサーバーの取得を行ってみて下さい。
ロリポップサーバーの申し込み
ドメインの準備
ドメインを取得する前に、まずはどんなドメイン名にするかを決めなければいけません。
運用開始後のドメイン名変更は、非常にリスクが大きいので、
事前にきっちりと決めておきましょう。
利用するドメインの種類には、現在様々なものが誕生しています。
無難なのは「.com」ですが、「.info」「.net」「.org」辺りもよく利用されています。
他にも、「.me」や「.co」などもおすすめです。
↓
ドメインは、ムームードメインという会社で取得します。
それでは、欲しいドメイン名が決まったら、以下のページを参考にして、実際にドメインの取得まで行ってみて下さい。
[ ムームードメインでドメインを取得 ]
※今回は、私は、「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というツールを使って、ホームページを公開するための方法を、説明します。
その説明は、以下の記事にまとめてあります。
この記事へのコメントはありません。