Web制作の基本。どうやって作るの?

このブログを見られているということは、みなさんスマホやパソコンからWebを見ていますよね。
そもそもWebはどうやって作られているのでしょうか。


この記事ではざっくりとしたWebの仕組みをお伝えしたいと思います。
「ふーん、そうなんだ」程度にご理解いただけるようまとめたいと思います。

Webって何?

Web(ウェブ)とはWorld Wide Web(ワールドワイドウェブ)のことで、正確には異なりますがインターネットとも呼ばれます。

インターネットの世界ではパソコンやスマートフォン、家電製品、自動車など、ありとあらゆるコンピューターが回線を通じて繋がっています。


地球上には様々な国があり、国境があり、そこに行くには多くの時間や入国審査が必要になりますが、インターネット上では誰でもすぐに世界中のWebサイトを見ることができます。
(中には閲覧制限を設けている国とかもありますが。。)

お手軽に世界中の人と繋がれることがwebの魅力の一つかなと思います。

話が少しそれましたが、そのインターネットの中にWebサーバーと呼ばれるコンピューターがいます。

このWebサーバーがWebサイトを公開しており、それを僕らが見ています。

Webサーバー

サーバーと聞くと、窓の無い部屋にでっかいコンピューターが並んでいるイメージを思い浮かべるかもしれませんが、普通のノートパソコンも何らかのサーバーにすることができます。

サーバーとは何かしらのサービスを提供するコンピューターのことを指します。

例えば、メールサーバーといえばメールを配信する機能を提供するサーバーのことを指しますし、ファイルサーバーといえばファイルを管理・共有する機能をもったサーバーのことを指します。

Webサーバーとは、自分が作ったWebサイトを、世の中の人に見てもらえるよう公開できる機能を持ったコンピューターのことをいいます。

具体的にはWebサーバーソフトがインストールされたコンピューターのことをいいます。

このソフトウェアには有名なところでApache(アパッチ)やNginx(エンジンエックス)、IIS(アイアイエス)などがあります。

これらのソフトウェアをインストールするとコンピューターの中の特定のフォルダを公開用にすることができます。

その中にWebページを配置すると、世の中の人がインターネットを通じてそのページを見ることができるようになります。

Webページ

今あなたが見られているこの画面のことをWebページといいます。

WebページはHTML(エイチティーエムエル)と呼ばれるプログラミング言語で書かれた電子ファイルで作られます。

例えばこんな感じのファイルになります。

HTML


<html>
   <head>
      <title>このサイトの名前です</title>
   </head>
   <body>
      <h1>見出しです</h1>
      <p>あいうえお</p>
      <a href="https://google.co.jp">これはリンクです。別のWebページにジャンプします。</a>
   </body>
</html>

こういう風に書かれたHTMLをインターネットブラウザで開くと、こんな感じで見えます。

このページには上から見出し<h1>と段落<p>とリンク<a>が載っています。

リンクをクリックすると設定されたページに移動できます。

こうして、Webページはインターネットの世界で網目状に繋がっており、Web(くもの巣)と呼ばれる所以になっています。

まとめ

とりあえずは以上がWebの仕組みになります。

これだけだと味気がないので、一般的にはCSSやJavascriptと呼ばれる別のプログラミング言語でWebページを装飾したり、動きをつけたりします。

HTMLの基本的な書き方については「おしえて!HTMLの書き方」でまとめていますので、こちらもあわせてご覧ください。

CSSについて知りたい方は「おしえて!CSSの書き方」を見てください。

Javascriptについて知りたい方は「おしえて!Javascriptの書き方」を見てください。

したっけ!

  • Webはインターネットの世界のこと
  • インターネットでWebサーバーがWebページを公開している
  • WebページはHTMLで書かれている
  • Webページはくもの巣のように相互に繋がっている

本格的にプログラミングを学びたいですか?ITのエンジニアになりたいですか?

IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、 物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。

身につけた技術は一生モノです。

もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。 転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

DMM WEBCAMPのサイトへ

TechAcademy

最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。

TechAcademyのサイトへ

Want to learn programming in earnest? Want to be an IT engineer?

The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere, so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread. The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.

The skills that you have acquired is something that will last a lifetime.

If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.

DMM WEBCAMP

This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!

move to DMM WEBCAMP

TechAcademy

It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.

move to TechAcademy