ウェブ デザイン

ホームページ・ドメイン

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

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

私がホームページ制作の世界に入ったのは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. ロリポップサーバとムームードメイン
  2. URLのwwwあり・なしの統一方法
  3. JPドメイン
  4. wwwあり、なしのURLが分散してしまうデメリットを理解しよう
  5. ホームページとWEBサイト
  6. ドメインにハイフンを使うのは日本人だけ?

コメント

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

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

最近の記事

  1. システム開発用のアイキャッチ
  2. システム開発用のアイキャッチ
  3. Theme(テーマ)の選択
  4. WP おすすめテーマ
  5. URLの正規化とは?
  6. 「index.html」をスラッシュ(/)へ統一
  7. SSLの種類
  8. 王道のSEO
  9. 学習
  10. アウトソーシング(外注)
PAGE TOP