初心者でも分かるホームページ(WEBサイト)の作り方①

HPの作り方1

「ホームページを作ってみたい」と思ったけれど、何から始めたらいいのか分からない…という方向けに ホームページの作り方を分かりやすく説明していきます。

※ここでは初心者の方に分かりやすいように「ホームページ」=「WEBサイト」の意味で使っています。

ホームページを作るのに必要な物

まずは、ホームページを作るために必要なものを、初期段階から最終的に必要なものまで、大まかに紹介します。

  1. パソコン
  2. テキストエディタ
  3. ブラウザ
  4. サーバー(サーバという人もいます)
  5. ドメイン
  6. ファイル転送ソフト

まず、この①~⑥までがあればホームページは作れます。

初期段階で必要な物

ホームページ制作の初期段階では、

①パソコン ②テキストエディタ ③ブラウザ

の3つがあればまずは大丈夫です。

テキストエディタとは、すごく簡単にいうとWindowsに入っている「メモ帳」です。

ホームページを作るコードを書くために使います。

ただし、メモ帳で書くと見にくくて書き辛いので、もっと楽に書けるようにしたものが世の中にはたくさんあり、無料でダウンロードできるものもあるので、気にしなくてOKです。

ホームページの仕組み

ホームページを作るうえで知っておく必要があるのが、ホームページの仕組みです。

何気なく見ているホームページは、いったいどのようにして私たちのパソコンやスマートフォンに表示されているのでしょうか。

サーバーから情報をやりとり

ホームページが表示される仕組み

私たちがパソコンやスマートフォンのブラウザ(Google ChromeやSafariなど)で調べ物をすると、たくさんホームページやブログが出てきますね。

その中の一つをクリックすると私たちのパソコンやスマートフォンから、
そのホームページが入っているサーバーまで「このホームページが見せて!」といったリクエストが送られます。

すると、そのリクエストを受け取ったサーバーが私たちのパソコンやスマートフォンに向けて、そのホームページの情報(データ)を送ってくれます。

その送ってもらった情報は、コードで送られてくるので、
そのままでは私たちは見ることができません。

そこで、ブラウザ(Google ChromeやSafariなど)がそれを読み取って、
私たちが見れるホームページとして表示してくれるのです。

これが、ホームページの仕組みです。

サーバーってどこにあるの?

時々 「その、ホームページが入っているサーバーはどこにあるの?」
とご質問されます。

答えは「世界のどこか」です。

どこにあるか分かってしまうと、物理的な攻撃を受けてしまう可能性があるので、基本的には公開されていません。

世界のあちこちに、大きなパソコンがたくさんあり、そこにホームページの情報が入っているというイメージをもってもらればいいかと思います。

ホームページを作る流れ

ここまででホームページが表示される仕組みをお伝えしました。

あと一つ、ホームページを作る上で知っておいていただきたいのが、
ホームページを作る流れです。

この流れを知っていることで、今は全体のどの辺なのか?という事が分かり、挫折しにくくなります。

  1. HTMLでホームページの内容を書く
  2. 書いたHTMLをCSSで飾る
  3. サーバーを契約する
  4. ドメインを購入・設定する
  5. HTMLとCSSをサーバーに入れる(アップロード)
  6. 完成!

この流れでホームページができます。

「③サーバーを契約する」と「④ドメインを購入・設定する」は最初だけです。

ホームページのページを増やしたり変えたりは、

  1. HTMLでホームページの内容を書く
  2. 書いたHTMLをCSSで飾る
  3. HTMLとCSSをサーバーに入れる(アップロード)

を繰り返すことで更新していく事ができます。

まとめ

  • 初期は「パソコン」「テキストエディタ」「ブラウザ」があれば大丈夫
  • ホームページは、そのホームページが入っているサーバーと私たちのパソコンやスマートフォンが情報をやり取りしている
  • ホームページを作る流れは、最初に「HTML」「CSS」を作る
  • サーバーを契約してドメインを取得
  • サーバーに「HTML」と「CSS」にアップロードすることで完成

今回は、ホームーページの初期知識をご紹介しました。

この知識を持っているかいないかで、スムーズに行く作業がたくさんありますし、トラブルが起きた時も対処しやすくなるので、ぜひ、知っておいて損はないと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA