ウェブ デザイン

ホームページ・ドメイン

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

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

私がホームページ制作の世界に入ったのは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 サーバ接続情報設定
■ホストの設定名 => 任意の名称を設定。
 ※後々管理が大変になるので、どのサーバの設定かが分かりやすい名称にして下さい。
■ホスト名    => ロリポップの「FTPサーバー」の値を入力
■ユーザー名   => ロリポップの「FTP・WebDAVアカウント」の値を入力
■パスワード/パスフレーズ => ロリポップの「FTP・WebDAVパスワード」の値を入力

ロリポップのFFFTPの接続情報の確認方法は、以下を参照して下さい。
[ロリポップ FFFTPの確認]

正常に接続できると、以下のような画面に接続できると思います。
FFFTP サーバ接続完了

「pkaisetsu.com」がホームページの公開用ディレクトリになるので、そのディレクトリをクリックしてみて下さい。

まだ、ファイルをアップロードしていない状態の為、何も表示されていないと思います。
こちらに、上記で作成したindex.htmlをアップロードしてみて下さい。
FFFTP サーバ側へファイルをアップロード
※ファイルは、ドラッグして右側の領域にアップロードします。

index.htmlのアップロードが完了したら、
ブラウザから、
http://hpkaisetsu.com/
へアクセスしてみて下さい。
※ドメイン(hpkaisetsu.com)部分は、私が解説用に取得した物なので、
 各自で取得されたものに変更して下さい。

画面に「こちらは、HTMLのサンプルです」と表示されれば、公開まで完了です。

本当に基本的なことしか説明していないですが、
取りあえずは、
ホームページの公開についての説明は完了です。

ただ、当然このような簡易ページを公開しても、何の役にも立ちません。
だからと言って、いきなりHTMLとCSSを使って、プロが作ったようなサイトを公開することも通常は不可能です。

そこで、この後は、WordPressというツールを使って、ホームページを公開するための方法を、説明します。
その説明は、以下の記事にまとめてあります。

[ロリポップ WordPressでサイトを公開]

WordPress短期学習プログラム

関連記事

  1. ドメイン(domain)
  2. ロリポップ WordPressでサイトを公開
  3. JPドメイン
  4. ドメインについて
  5. ロリポップサーバとムームードメイン
  6. 安心感

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Technology-Connection-Net
  2. ドメインにハイフンを使うのは日本人だけ?
  3. SSL(HTTPS)
  4. ドメインについて
  5. WP:WordPress(ワードプレス)
  6. ドメイン(domain)
  7. JPドメイン
  8. 高速(スピード)
  9. ブログアクセス
  10. 高速(スピード)
PAGE TOP